Naming conventions

First.css offers five types of selectors.

• Block
• Element
• Modifier
• State
• Utilities

They are all presented in the code below:

<div class="christmas-tree">
    <div class="christmas-tree--star is-active">
        <img src="shine.png" />
    </div>
    <ul class="christmas-tree--lights">
        <li class="christmas-tree--light mod-red"><svg /></li>
        <li class="christmas-tree--light mod-green"><svg /></li>
        <li class="christmas-tree--light mod-blue"><svg /></li>
    </ul>
</div>

Block

Independent, this selector has the highest level. Should represent a container.

Example

.christmas-tree

Element

A selector that has dependency of a Block. Prefixed with -- before the name of the Block.

Example

.christmas-tree--lights

Modifier

Prefixed with .mod-. Try to place these modifiers on the higher level, to make it more reusable. But if you need something super specific, I have good news: This selector (along with the State one) should be the unique selectors that could be child of another selector. It's recommended to place all your modifiers in a unique stylesheet. So, before creating a new one, ask yourself:

Haven't I made a modifier for this?

Check the list, and create a new one if not.

Examples

.mod-green
.mod-bordered
.mod-no-icon

State

Prefixed with .is-. The state selectors manage the state of an element and the user interaction. This selector type works great with Javascript. The state (as well as a Modifier) could be child of another selector. And is the ONLY selector type where is allowed to use !importante. Only here, ok?

Examples

.is-hidden
.is-active
.is-current
.is-collapsed
.is-disabled

Utilities

Prefixed with .u-. For generic helper classes.

Examples

.u-clearfix
.u-responsive