SMACSS Workshop

Scalable and Modular
Architecture for CSS

Flexible, maintainable patterns for large-
scale web development

The Problem

The way we write CSS more complicated than it needs
to be.

.article #comments ul > li > a.button {}

Overly-specific rules create problems:
● when new features need to be added (flexibility)
● when other developers work on our code
(maintainability).

Solutions

1. Categorization of styles
2. Naming conventions
3. Limiting "depth of applicability"

Categorization & Naming Conventions

1. Base
2. Layout
3. Module
4. State

Base Styles

Reset typography & unhelpful defaults.

html {
background-color: #fff;
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
}

Reset stylesheets can be very redundant. normalize.css is a
better place to start, but strip out styles that are unlikely to be
utilized.

Layout Styles
Specify widths & margins, color & background.

.layout-sidebar { .container_12 .grid_2 {
float: left; float: left;
width: 20%; margin-left: 10px;
} margin-right: 10px;
width: 140px;
}

Define the major sections of your site. Can be semantic in
smaller systems, but a defined grid system scales better in
larger applications.

Module Styles

Discrete components in a system. The bulk of your styles.

.button {
background-color: maroon;
color: #fff
display: inline-block;
padding: .33em .5em;
text-align: center;
}

<div class="container_12">
<div class="grid_2">
<a href="#" class="button">Buy Now</a>
</div>
</div>

Sub-Module Styles

Variations on major elements.

.button-rounded {
border-radius: 6px;
}

.button-large {
font-size: 16px;
}

<div class="container_12">
<div class="grid_2">
<a href="#" class="button button-rounded">Buy Now</a>
</div>
</div>

State Styles

Describes a module in a certain condition.

.is-hidden { display: none; }

Usually indicates a JavaScript dependency

Module-specific states should be namespaced:

.is-accordian-collapsed { height: 0;}

Depth of Applicability

Modules can be nested. Limit their impact.
#content a { color: #fa5400; }
#sidebar a { color: #333; }

.callout a { color: #90c3dd; }

#content .callout a,
#sidebar .callout a { color: #90c3dd; }

.callout a { color: #90c3dd !important; }

● Avoid id selectors.
● Use fewer selectors, ideally one.
● Utilize child selectors to limit depth.

Child selectors
#nav ul li {
color: #333;
margin: 0 10px;
}

#nav ul li ul li {
background-color: #333;
color: #fa5400;
display: block;
margin: 0;
}

.nav > li {
color: #333;
margin: 0 10px;
}
.nav-sub > li {
background-color: #333;
color: #fa5400;
}

Practical Example: The Media Object
<div class="media">
<div class="media-object">
...
</div>
<div class="media-body">
...
</div>
</div>

.media { color: #999;
.media-object { float: left; }
.media-body { overflow: hidden;
margin-left: 10px;
}

Abstracting styles into reusable modules can save hundreds of
lines of code.

Pain Points

"Object Oriented CSS" goes against conventional wisdom.

Separating modules & layout often means extra mark-up.

Class names may describe a visual state.

Resources

SMACSS (https://smacss.com/)
● Object Oriented CSS (https://github.
com/stubbornella/oocss/wiki)
● CSS Wizardy (http://csswizardry.com/)
● BEM (http://bem.github.com/bem-
method/pages/beginning/beginning.en.html)

SMACSS Workshop

Related slideshows

More Related Content

SMACSS Workshop