Naming

Good vs bad naming

When you stare into the abyss — the abyss stares back:

// Good
.search_button {}

// Bad
.header .search-box input[type=search] + .button {}

Chaining selectors creates a specifity mess.

BEM (Gravity flavored)

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

.block_element--modifier {}

I use one underscore after blocks. Official BEM uses two, and I think it’s pointless.

Example

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

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

.panel_title {}               // Element

.panel_content {}             // Element
.panel_content--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.