5e CSS Naming Conventions

We use the BEM methodology mixed with a component organisation. Each BEM block is a component. Each component can have different implementation depending on the responsive. The responsive steps are defined in a JSON file components.config.json used by a nodeJS script to prepare the required components files.

BEM naming :

.block__element--modifier { }
.block__complex-element--modifier { }

All the class names are lowercase. We never define specific style using semantics except if we can assure that the element is not a block or does not contain any block

.block__content div {
/* not allowed if the div may be or contain other blocks */
}

.block__content a {
/* allowed if we are at the end of the chain : no more blocks inside .block__content… */
}

The "Body Block" is not implicit : all classes without element notation are blocks ! (no ".container")

.container => .body__container

the typeface related styles are applied directly on the tags when they are common or normalisation styles :

h1 {
  font-size: 0.2rem;
  font-family: arial;
}

the font sizes are relative to the body :

legend {
  font-size: 0.1rem;
}

the font-styles, when they don't apply to a certain semantic, are considered implicit to the "Body Block"

.big-title {
  font-size: 30rem;
}

The hover state should always consider .touchevents/.no-touchevents devices using the Modernizr classes