Skip to content

CSS Architecture

Jump to bottom
Keith Daulton edited this page Feb 7, 2018 · 12 revisions

CSS Architecture

Patterns

Styles and patterns are layered and loaded by scope, specificity and extensibility.

Naming

I prefer BEM-style naming, but with some added syntax.

BEM uses this convention: .block__element--modifier

  • Blocks represent the outer boundary of a pattern.
  • Elements represent children of blocks.
  • Modifiers represent variants to blocks and elements.

One spin I like to add to this is the state class. The purpose being to distinguish state from design variants.

States represent stateful changes to blocks or elements with the convention: .is--state

Namespaces are also added which will prefix class names for more clarity.

Example

<body class="t-home">
    <header class=”c-header t-home__header”>
        <div class=”c-header__brand”>Brand</div>
        <nav class=”c-menu c-header__menu”>
            <ul class=”c-menu__list”>
                <li class=”c-menu__item”>
                    <a class=”c-menu__link is--active” href="#">Link 1</a>
                </li>
                <li class=”c-menu__item”>
                    <a class=”c-menu__link” href="#">Link 2</a>
                </li>
                [...]
            </ul>
        </nav>
    </header>
    <main class=”t-home__content”>[...]</main>
    <footer class=”c-footer t-home__footer”>[...]</footer>
</body>
Clone this wiki locally