Flexible, maintainable patterns for large-scale web development

1. Scalable and Modular
Architecture for CSS
Flexible, maintainable patterns for large-
scale web development

2. 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).

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

4. Categorization & Naming Conventions
1. Base
2. Layout
3. Module
4. State

5. 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.

6. 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.

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

8. 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>

9. 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;}

10. 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.

11. Child selectors
#nav ul li {
color: #333;
display: inline-block;
margin: 0 10px;
}
#nav ul li ul li {
background-color: #333;
color: #fa5400;
display: block;
margin: 0;
}
.nav > li {
color: #333;
display: inline-block;
margin: 0 10px;
}
.nav-sub > li {
background-color: #333;
color: #fa5400;
}

12. 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.

13. Pain Points
"Object Oriented CSS" goes against conventional wisdom.
Separating modules & layout often means extra mark-up.
Class names may describe a visual state.

14. 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)