SMACSS

Scalable to…

• Large projects• Large teams•Multiple projects

Modular

Use concepts to simplify CSS and rethink how we code

Categorization

Thinking about the role that a piece of code plays

Naming Convention

Clarifying the intent via a consistent clear selector name.

#navigation ul li span{ background-image: url(‘arrow.png’); color: #CCC; padding-left: 16px;}

.nav-arrow{ background-image: url(‘arrow.png’); padding-left: 16px;}.muted-text{ color: #CCC;}

Scaling CSS for large applications

Base

Layout

Module

State

Theme

a{ color: #039;}a:hover{ color: #03F;}

Base

html,body{ margin: 0; padding: 0;}input[type='text']{ border: 1px solid #999;}

Or, use a pre-made one!http://necolas.github.com/normalize.css/

Layout

body{ width: 960px; margin: 0 auto;}#sidebar{ width: 160px;}#content{ width: 760px;}

#sidebar,#content{ float: left; padding: 10px;}#footer{ clear: both;}

Or, use a pre-made one!http://960.gs/http://blueprintcss.org/http://twitter.github.com/bootstrap/

ModuleHeader

Primary Navigation

Secondary Navigation

Primary/FeaturedContent

Tertiary Content

Secondary Content

Feature Feature Feature

Feature Feature FeatureList

Modules

• <span> and <div> are container that have no meaning.• <img>, <p>, <header>, <footer>

have some semantic meaning• A well named CSS class has even

more meaning

Modules

<div class="folder"> <span>My Folder</span></div><div class="folder"> <span>Another Folder</span></div>

.folder > span{ padding-left: 20px; background: url('icon.png');}

Modules

<div class="folder"> <span>My Folder</span> <span>(31 items)</span></div><div class="folder"> <span>Another Folder</span> <span>(17 items)</span></div>

.folder > span{ padding-left: 20px; background: url('icon.png');}

Modules

<div class="folder"> <span class="folder-name">My Folder</span> <span class="folder-items">(31 items)</span></div><div class="folder"> <span class="folder-name">Another Folder</span> <span class="folder-items">(17 items)</span></div>

.folder-name{ padding-left: 20px; background: url('icon.png');}.folder-items{ color: #999;}

Modules

•Be Specific•Be Meaningful

Resources

• Smacss.com• AppRiver Library Book (at my desk)