Skip to content

CSS Architecture

Jump to bottom
Keith Daulton edited this page May 2, 2019 · 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 and artifacts like variables for colors, type, config as well as mixins.

Elements contain styles for raw, non-classed, element selectors to apply foundational typography, color, margins and padding as well as normalizing cross-browser defaults.

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 can contain more granular cosmetic styles. Think page parts.

Helpers are class-based utility styles that act as global modifiers and provides a single function to override all others. The only acceptable point to specify a property with an !important flag.

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, namespaces:

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

Namespaces prefix blocks 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