Skip to content

CSS Architecture

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

CSS Architecture

Patterns

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

  • Tools
  • Elements
  • Objects
  • Layouts
  • Components
  • Templates
  • Helpers

Types

Tools are non-renderable parts like variables and mixins.

Elements contain styles for raw, non-classed, element selectors to provide foundational typography, color, margins and padding as well as browser resets.

Objects class-based patterns that represent atomic parts of the UI. As such, they can have modifiers, but they cannot be comprised of other objects or components.

Layouts are also class-based patterns, but are strictly scoped to positioning other patterns and have no cosmetic styles.

Components are also class-based patterns, but can be composed of other objects, layouts and components as well as having cosmetic styles.

Templates are a similar to layout patterns in that they position patterns, but these also dictate content structure and contain cosmetic styles.

Helpers are class-based utility styles that act as global modifiers and provides a single function to absolutely override all others, with each property specifying an !important.

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.

A couple spins I like to add to this are states and namespaces:

States are similar to modifiers, but only represent stateful changes to blocks or elements with the convention: .is--state. State classes in CSS selectors must always be attached to another class .c-menu__item.is--active.

Namespaces prefix classnames to give for more clarity to the type of pattern it represents: .c-menu is a type of component.

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