Class naming convention - BEM

There are only two hard things in Computer Science: cache invalidation and naming things.

-- Phil Karlton

Since most projects will have multiple developers or thrid-party stylesheets loaded, there's another issue - classname/selector clashes.

Block Element Modifier

.block__element--modifier {}

Block

A block represents a self-contained part of your website. Examples of blocks: header, content, sidebar, footer, and search.

.header {}
.sidebar {}

Element

An elements is part of the block and makes no sense outside it. Each block contains at least one element.

.header__logo {}
.sidebar__section {}

Modifier

A modifier represents a visual variation of a block.

.header--sticky {}
.sidebar--wider {}

<article class="content content--wide">
    <p class="content__text content__text--featured">Lorem ipsum...</p>

    <p class="content__text">Lorem ipsum...</p>

    <footer class="content__footer">
        <a href="#" class="content__read-more">Read more</a>
    </footer>
</article>

.content {
  width: 60%;
  background-color: white;
}

.content--wide { /* only styles that differ from normal .content */
  width: 80%;
}

.content__text {
  font-size: 16px;
}

.content__text--featured {
  font-weight: bold;
}

.content__read-more {
  color: #008cff;
  text-decoration: underline;
}

Tasks

See the Pen by t-i-m-i (@t-i-m-i) on CodePen.

Further reading

results matching ""

    No results matching ""