Naming

Prerequisites

Methodologies

There are a lot of ways to name and structure your CSS.

  • Object-Oriented CSS (OOCSS)
  • Block, Element, Modifier (BEM)
  • Scalable and Modular Architecture for CSS (SMACSS)
  • SUIT CSS
  • Systematic CSS
  • Atomic CSS (ACSS)

I use BEM with flavors of many methodologies.

BEM (Block + Element + Modifier)

The BEM methodology is a better way to decouple CSS from HTML, and modularize class names so they can be extended.

// Standard BEM
.block
.block__element {}
.block--modifier {}
.block__element--modifier {}

// GravDept BEM (preferred)
.block {}
.block_element {}
.block--modifier {}
.block_element--modifier {}

Use one underscore between the block and element. Standard BEM uses two underscores, which is longer for no reason. GravDept BEM is more succinct.

Example

<div class="panel panel--collapsible">
    <div class="panel_title">
        <h1>Heading</h1>
    </div>

    <div class="panel_body">
        <p>Lorem ipsum dolor sit amet.</p>
    </div>
</div>
.panel {}                 // Block
.panel--collapsible {}    // Modifier of block

.panel_title {}           // Element

.panel_body {}            // Element
.panel_body--unpadded {}  // Modifier of element

Why it’s better

  • All the selectors have same specificity (one).
  • Every element is defined via a block.
  • Every modifier is defined via a block or element.
  • Each class name imparts structural info without binding to exact HTML.