Dissecting the ‘Name-Brand’ CSS Conventions

OOCSS, ITCSS,
SMACSS, BEM, CUBE…

Branded CSS Conventions

Describe how we Write Consistent Code

Describe how we Write Organized Code

Describe how we Write Maintainable Code

Help us Write “Better” Code

CSS Mental Model
Selector Naming
Code Organization

Text Formatting

❌ Text Formatting

(use a linter)

Conventions Are Optional

Understand Their Concerns

Understand Their Solutions

Different Project Needs

Different Team Structures

Just because InstaSalesBook Did It

Doesn’t mean you need to

Proto-convention… The 🌊 Cascade

Built-in Naming Rules

Built-in Organizing Rules

The 🌊 Cascade Makes CSS Possible

CSS solves a Unique Problem

1989 The WorldWideWeb Project

It is required that HTML be a common language between all platforms…

– WWW Project

Web for all. Web on everything.

– W3C Mission Statement

…This implies no device-specific markup, or anything which requires control over fonts or colors.

– WWW Project

WWW parsers should ignore tags which they do not understand, and ignore attributes which they do not understand of tags which they do understand.

– WWW Project

Compatible Forward & Backward & Sideways

HTML totally eliminates any visual creativity that a document’s designer might have.

– Roy Smith, 1993

1993-1994 w3.org/Style/History/

Cascading HTML style sheets

Håkon Lie, October 1994

The user/browser specifies initial preferences and hands the remaining influence over to the document.

🗺 Style Origins

An ordered list (cascade) of style sheets … can be referenced from the same document.

– Håkon Lie

Support visual and non-visual media.

– Håkon Lie

Provide hints that the browser may or may not use.

– Håkon Lie

Ignored Selectors

:is(html) {
  background: rebeccapurple;
}

Ignored Decalarations

body {
  /* display: block; browser default */
  display: grid;
}

Websites don’t need to cannot possibly look the same in every browser.

– Me, again

These differences Are a Feature of The Web

We Script Browsers Perform Live

We don’t control styles We Hint & Suggest

The 🌊 Cascade Resolves 💥 Conflicts

The 🌊 Cascade Relies on Semantic Clues

If conflicts arise the user should have the last word, but one should also allow the author to attach style hints.

– Håkon Lie

❗important

A balance of power

🎯 CSS Selectors

A simple mapping between HTML elements and presentation hints.

– Håkon Lie

CSS Selectors

p {
  font-size: 1em;
  color: red;
}

💥 Conflict!

button          { background: gray; }
.action         { background: darkblue; }
[type=“submit”] { background: darkgreen; }
#send           { background: maroon; }

Layers of… 🎯 Selector Specificity

Layers represent Different Goals

universal/type » Global Defaults

attrs/classes » Common Patterns

ID/style » Singular Overrides

combined… » Components & Parts

Specificity provides A Name-Layering Convention

Use selectors Based on Intent

Use low specificity To Describe Systems

Use high specificity To Describe Details

An Organizing Convention

Source Order Is Meaningful

Not safe to shuffle

Sort code From General to Specific

Link States

A:link {color: blue;}        /* specificity = 1,1 */
A:visited {color: purple;}   /* specificity = 1,1 */
A:hover {color: magenta;}    /* specificity = 1,1 */
A:active {color: red;}       /* specificity = 1,1 */

Mobile-First

Start generic Fallbacks for Everyone

Add on More Targeted Styles

~2004-2006 Broad Conventions

Page Structures

#header { … }
#nav { … }
#main { … }
#footer { … }

HTML5

header { … }
nav { … }
main { … }
footer { … }

Browser Resets

Shared CSS files

~2006-2010… Major CSS Libraries

YUI, Blueprint, 960gs, etc…

Central Class Library

<div class=" column col6of12 last " >

Can be Massive

Solve Every Problem for Every Project

Often Hard to Customize

CSS frameworks decrease the maintainability of code.

– Natalie Downe

CSS Systems Conventions > Frameworks

ClearLeft

Web Consulting Studio

CSS Ordering Based on Specificity

1… General Styles

2… Helper Styles

3… Page Structure

4… Page Components

“most of your styles will be in here”

5… Overrides

avoid as much as possible

Modular Sizing

Components & Internals 100% Fluid

Fixed widths Only On Containers

(usually in ems)

max-width: 100%;

(to stop overflow)

Be Afraid Of Heights

(the variable axis for text)

Up & Down Font Size Constantly

Don’t Overly Sandbox

Styles should be reusable…

Focus on What Not Where

Don’t re-engineer Seperate Solutions

Develop in browsers simultaneously

Working for e.g. Yahoo! & Facebook

How do you scale CSS For Thousands of Pages?

New pages should Rarely Require New CSS

Use a Component Library

Beyond Reusable Components

Components Share Patterns

Avoid even unique component styles

A CSS “object” is a repeating visual pattern, that can be abstracted into an independent snippet of HTML, CSS, and possibly JavaScript.

– Nicole Sullivan, OOCSS

1. Separate Structure & Skin

Object Structure Minimal & Reusable

Object Skin Multiple Theme Options

Avoid limiting A Class To One Tag

.text is better than p.text or div.text

2. Separate Container & Content

Be Flexible

Rarely use Location-Dependent Styles

"Focus on What Not Where"

(from CSS Systems)

Extend Objects By Applying Multiple Classes

Mix & match Container & Content Objects

To create unique components, without unique CSS

Organized from Simple to Complex Tasks

Mentions Missing Scope

We’ll come back to that…

2009-Present Systems/Objects Repackaged

SMACSS, BEM, Atomic Design, ITCSS, etc…

2010, Yandex Block Element Modifier

Block Standalone Entity

Meaningful on its own

Element Always Part Of A Block

No standalone meaning

Modifier Change Appearance Or Behavior

A flag on a block or element

Not Size or Complexity Self-Sufficiency & Belonging

Selector Naming

.block { }
.block--modifier { }
.block__element { }
.block__element--modifier { }

Always Flat Specificty

No .combined.selectors

Modifier Exception

.block--modifier .block__element { }

Principle of Single Responsibility

Parent block provides External Positioning

Open/Closed Principle

Open to modifier classes, closed to direct changes

2011, Jonathan Snook SMACSS

Scalable and Modular Architecture for CSS

Other Inspirations

Organized on Category

Layout Styles

#article { float: left; }
.l-flipped #article { float: right; }
.l-fixed #article { width: 600px; }

Related elements within a module use the base name as a prefix.

– Jonathan Snook, SMACSS

State Types

.is-collapsed, .msg.is-error, .is-hidden

Minimize Depth of Applicability

2013, Brad Frost Atomic Web Design

A design process based on composition

2014, Harry Roberts Inverted Triangle CSS

Narrow/Broad Reach How Many Elements?

Low/High Specificity What Selector Weight?

Generic to Explicit What Desired Impact?

From p {} through .text-center {}

2015 BEMIT

Extending the BEM syntax for ITCSS

NameSpaces

2014, Glen Maddern Attribute Modules for CSS

Custom Attributes Provide Namespacing

Base Attribute

[am-Button]

Attribute Variations

[am-Button~='large']

Choosing A Prefix

CSS-in-JS

Has multiple meanings

Using JS Frameworks… Single File Components

Component Styles “Scoped”?

Scope Is About Ownership

Not just Is-Inside-Of

(no lower boundary)

But specifically Is-Owned-By

(clear lower boundaries)

Frameworks Don’t Organize CSS

Always Scope Single-File Components

Emotion

render(
  <button css={css`
    padding: 32px;
    background-color: hotpink;
    font-size: 24px;
    border-radius: 4px;
    &:hover {
      color: ${color};
    }
  `} >...</button>
)

JS doesn’t understand Lengths & Colors &c.

2015, Yahoo! Atomic CSS

CSS is Painful

Not-quite Inline Styles

Tachyons

<body class="bg-green black-70 pa4">
  <h1 class="f1">...</h1>
</body>

Tailwind CSS

<div class="md:flex">
  <div class="md:flex-shrink-0">
    <img class="rounded-lg md:w-56" src="..." alt="">
  </div>
  <div class="mt-4 md:mt-0 md:ml-6">
    <div class="uppercase tracking-wide text-sm text-indigo-600 font-bold">...</div>
  </div>
</div>

.btn {
  @apply font-bold py-2 px-4 rounded;
}
.btn-blue {
  @apply bg-blue-500 text-white;
}
.btn-blue:hover {
  @apply bg-blue-600;
}

I don’t Get It ¯\_(ツ)_/¯

Often called Functional CSS

CSS is All About Context

CSS is All About Side Effects

CSS is never Functionally “Pure”

It’s all CSS In The End

When you… reduce the amount of time you spend writing and editing CSS… you must instead spend more time changing HTML classes…

– Nicolas Gallagher

2020, Andy Bell CUBE CSS

Composition Utility Block Exception

Adjusting OOCSS/BEM to De-Emphasize Blocks

Macro Before Micro

Most of the work is already done for you with global and high-level styles.

– Andy Bell

Composition How Blocks Flow Together

Relies on “Intelligent” Selectors

No “intervention by the author”

Utilities Have One Job

Blocks (Like BEM But Flexible)

Exceptions Variations To A Block

Class Grouping

<article
  class="[ card ] [ section box ] [ bg-base color-primary ]"
  data-state="reversed"
></article>

At OddBird We Mix & Match

Ideas from Systems, OOCSS, ITCSS, AMCSS, CUBE…

Context Matters

Work In Layers

(roughly ITCSS)

More layers Using Custom Properties

(with layered fallbacks)

Prefer Global Styles

Define some constraints. Let the language work out the details.

– Keith J Grant

Use Built-In Attributes When Available

(We ❤ “intelligent” selectors)

is-hidden

[aria-hidden] & [hidden] & ??

is-collapsed

[aria-expanded] & [aria-pressed]

Use Utility Classes Where Meaningful & Common

.visually-hidden | .elide

DRY Code Don’t Repeat Yourself

.warning { border-color: red; }

DSfP Don’t Stretch for Patterns

.bc-r { border-color: red; }

Combine Tokens Into Themes

Attribute-namespace For Related Classes

.is-success | .is-error ➡ [data-msg="success | error"]

A Wider 🌊 Cascade Allows More Nuance in Layering

W3C is working to Update & Extend The Cascade

More 🎯 Nuance

e.g. :where()

Custom Layers

The Cascade is Important

The Cascade is Not Going Away

The Cascade is Useful

To guide our conventions

CSS is unlike anything else… designed for the realities of a flexible, multilingual, multi-device web.

– Rachel Andrew