CSS Variables vs. BEM (urg!)

by mfranzke

HTML

<p class="element">test - element</p>
  <p class="element is-secondary">test - element is secondary</p>

<div class="module">
  <p class="element">test - element is in module</p>
  <p class="element is-secondary">test - element is in module is secondary</p>
</div>

CSS

.module {
  border:1px solid black;
}
/* initial CSS Variable definition */
:root {
  --fontColor: red;
}

/* global elements declarations */
.element {
  color: var(--fontColor);
}
/* global element in a specific modules context overwritings */
.module .element {
  --fontColor: green;
}

/* modifier / valency */
.element.is-secondary {
  --fontColor: blue;
}
.module .element.is-secondary {
  --fontColor: purple;
}