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 similar to layout patterns in that they position patterns, but these also dictate content structure and can contain more granular cosmetic styles. Think large page parts and page templates.

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 and 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