As developers, we put a lot of effort into keeping our code clean, clear, and flexible. So why do we let our CSS become such a mess? It's time to grow up as web developers and take responsibility for writing high-quality CSS and keeping it that way. Here's how I did it on a recent project.

1. We need
t
to talk
about CSS

2. We do our best
to keep it together

3. But try
as we might

4. chaos takes us
in the end

5. Day by day
our CSS grows

6. It grows
disorganized
Our files are long
and contain unrelated styles
It isn't clear how and when
to break CSS up
into separate files

7. It grows
fragile
Making changes feels unsafe

9. WE

10. WE
NEED

11. WE
NEED
HELP

13. Is the answer out there?

14. OOCSS
SMACSS
BEM
MCSS

16. We need
guiding principals
for organizing our CSS
What do we call it?
Where do we put it?

17. We need
robust stylesheets
we can change gracefully
How can I style this page
without breaking other pages?

18. We need
a methodology
but which one?
Any worthwhile methodology
would help with our problems

19. Let’s give it a shot

20. SMACSS
Scalable, Modular
Architecture for CSS

21. 1. Consider the intent
of a style

22. Base
Layout
Module
Module subclass
Module component
State
Theme

23. 2. Express your intent
by following
a naming scheme

24. Base
Set the default style for an element type
a {
color: red;
}
a:hover {
color: purple;
text-decoration: none;
}
This is the only place you should see
tag names in your stylesheets.

25. Layout
Define a component that structures a page
.l-sidebar {
float: left;
width: 320px;
}
Prefix layout components with ’l-’.

26. Module
Define a type of thing
.activity {
border-bottom: 1px solid #eee;
}
Most CSS we write will define modules

27. Module subclass
Define a variation of a module
.activity--metric-share {
background-color: white;
}
Prefix subclassed modules with ‘module-name--‘.

28. Module component
Define a component that exists
only within a specific module.
.activity__icon {
float: right;
color: #d5d5d5;
}
Prefix a component with ‘module-name__’.

29. State
Define a state of a layout or module
.is-collapsed {
height: 0;
margin-bottom: 0;
}
.activity-is-read {
background-color:#eee;
}
Prefix global states with ‘is-‘.
Prefix module-specific states with ‘module-name-is-‘.

30. *
Module subclasses and states
are both variations on modules.
!
How do we tell them apart?
!
A subclass is applied at markup time.
A state is applied and removed at runtime.

31. Theme
Define the appearance of a module
We won’t use this intent
// in _thing.less
.thing {
display: block;
}
// in fun_theme.less
.thing {
border: 4px dashed magenta;
}

32. Theme
Define the appearance of a module
We won’t use this intent
Define modules without decorative properties
in a module file.
Decorate all modules in a single theme file.
Include a single theme file on a page.

33. Where do we put this stuff?
Base /_base.less
!
Layout
/_layout.less
Global states /_states.less
Modules /modules/_module_name.less
Subclassed modules, components, and modulespecific states go with their parent module.

34. I propose
a couple
more patterns

35. JS selectors
We want to know which classes are safe to change,
and which will cause behavior to break
<div class=“js-toggle-agreers"></div>
!
$('.js-toggle-agreers')
.click(this.toggleAgreers);
When you need to select an element in a view
give that element a classname beginning with ‘.js’.
Apply no style to that class.

36. Region selectors
<div class=“js-comments-region"></div>
!
layout: {
comments: ‘.js-comments-region'
}
When you need to select a class to become a view
region append that class with ‘-region’.
Apply no style to that class.

37. Property ordering
Group related properties
.module {
// Box properties
display: block;
width: 100%;
margin: 0 0 18px 0;
// Background & border
background-color: perrywinkle;
border: 1px solid: lavendar;
// Typography
color: #666;
line-height: 20px;
text-decoration: none;
// Other
-webkit-transition: all .4s ease-in-out;
}

38. That
was
cathartic