Syntax

Block Element Modifier

cwf-lite uses BEM (Block Element Modifier) as a naming convention. Here’s an example of what a CSS developer writing in the BEM style might write:

/* Block component */
.btn {}

/* Element that depends upon the block */
.btn__price {}

/* Modifier that changes the style of the block */
.btn--orange {}
.btn--big {}

In this CSS methodology a block is a top-level abstraction of a new component, for example a button: .btn { }. This block should be thought of as a parent. Child items, or elements, can be placed inside and these are denoted by two underscores following the name of the block like .btn__price { }. Finally, modifiers can manipulate the block so that we can theme or style that particular component without inflicting changes on a completely unrelated module. This is done by appending two hyphens to the name of the block just like btn--orange.

The markup might then look like this:

<a class="btn btn--big btn--orange" href="/">
  <span class="btn__price">$9.99</span>
  <span class="btn__text">Subscribe</span>
</a>

Further information on BEM can be found at BEM 101

CSS variables

cwf-lite uses css variables with default fallbacks such as:

.elementclass {
  background: var(--element-background, white);
}

In this example, the browser would first look to see if a variable of --element-background has been set. if it has then that is what will be shown, if it hasn’t then the background will fallback to white.

For more information on css variables take a look at Using CSS custom properties