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)
  • 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__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.


<div class="panel panel--collapsible">
    <div class="panel_title">

    <div class="panel_body">
        <p>Lorem ipsum dolor sit amet.</p>
.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.