Modified BEM syntax

In short, this:

.block {}
.block__element {}
.block--modifier {}

The block is the module (object or component), the block__element is a descendant of that module and the block--modifier is a variation on that module.

For example:

.search {}
.search__field {}
.search--full {}

BEM ground rules


To add yet more clarity to the block__element--modifier convention, we can use “namespacing”: prefixing a module with an identifying character. This makes it easy to see what type of module we’re dealing with:

.o-object {}
.component {}
.u-utility {}
.js-javascript {}
._-hack {}
.is-state {}, has-state {}

For example, .button {}, .o-media {}, .u-cf, _-messy-hack.

As you may have guessed, the odd one is out component – no c- prefix here, because components are the most common type of module, and if it doesn’t have a prefix, it’ll be a component.

Taken from Harry RobertsMore transparent UI code with namespaces, Nicolas Gallagher’s SUIT CSS utilities and Jonathan Snook’s SMACSS State Rules.


/* ==========================================================================
   Section comment block
   ========================================================================== */

/* Sub-section comment block
   ========================================================================== */

 * Short description using Doxygen-style comment format
 * The first sentence of the long description starts here and continues on this
 * line for a while finally concluding here at the end of this paragraph.
 * The long description is ideal for more detailed explanations and
 * documentation. It can include example HTML, URLs, or any other information
 * that is deemed necessary or useful.
 * TODO: This is a todo statement that describes an atomic task to be completed
 *   at a later date. It wraps after 80 characters and following lines are
 *   indented by 2 spaces.
 * @tag This is a tag named 'tag'
 * 1. A helpful description of a declaration's purpose.
 * 2. Another declaration or collection of declarations can reference this
 *    comment with an inline comment corresponding to the lists number.

/* Basic comment */

I think these are from SUIT CSS!


Modified BEM syntax mostly from Harry RobertsMindBEMding – getting your head ’round BEM syntax and Nicolas Gallagher’s SUIT CSS naming conventions. As the kids used to say in the 1990s, respec’