Our CSS sucks. We've been building sites for over a decade using crappy, ornamentation techniques and shoddy selectors. Our styles unintentional bleed across the site. Our stylesheets are fragile and unmaintainable and full of specificity landminds. Pandas wander alone in the wilderness. But there's no need to drown ourselves in beer. New techniques like OOCSS, SMACSS and BEM show us that planning before building can make our projects maintainable, easier to debug, and smaller with reduced CSS file sizes. This workshop will introduce the basic techniques for CSS layering and using design components, the heart of any front-end CSS project. We will also discuss Sass organization and tips to more easily implement these ideas.

1. SassConf 2013
Managing Complex
Projects with Design
Components
John Albin Wilkins
@JohnAlbin

2. SassConf 2013
John Albin Wilkins
@JohnAlbin

3. Free Gifts From Me
★ Zen Grids
http://zengrids.com
★ Normalize.css for Sass/Compass
http://bit.ly/normalize-with-compass
★ Succinct theme for Colloquy (IRC for Mac)
https://github.com/JohnAlbin/succinct-for-colloquy
★ git-svn-migrate
http://john.albin.net/git/git-svn-migrate
★ Zen theme for Drupal
https://drupal.org/project/zen

4. Introduction to
Sass and Compass
O’Reilly
Due in Winter
2013
May contain
Lemurs.

5. Building Sites Outside-In

6. CSS
Specificity Wars

7. CSS
Specificity Wars
.menu .item a:link {}
.sidebar .menu .item a:link {}
.page-37 .sidebar .menu
.item a:link {}

8. CSS
Specificity Wars
.menu .item a:link {
.sidebar & {
.page-37 & {}
}
}

9. Seemed like a good idea
at the time.

10. Nicolas Gallagher
“Are you new to front-end
web development?
Here’s a secret:
no one else really knows
what they’re doing either.”
— @necolas

11. What are Design
Components?
★ “Component” is the same as…
★ “Object” in OOCSS
★ “Module” in SMACSS
★ “Block” in BEM’s BlockElement-Modifier
★ “UI Pattern”

12. Goals of Design
Components
★ Reduce specificity
★ Reduce applicability /
control the cascade

13. File organization =
first 3 SMACSS Layers

14. Simple Folder Structure

15. styles.scss

16. Putting all components
in one folder means it
is ridiculously easy to
find components.
★ Inspect the DOM.
★ Find the class on the
design component.
★ Look for a file with that
name in the components
folder.

17. A simple
component
and a
variant
(all in one file)

18. A component with sub-parts
.feature

19. A component with sub-parts

20. A SMACSS “state”

21. The “fugly” selector hack
Selector in DOM
I couldn’t change
Class name I wish
I could use in DOM

22. On the meaning of
semantics

23. On the meaning of
semantics
.omnomnomnom
is more semantic then
.blaaagh

24. On the meaning of
semantics
★ Content semantics
is handled by HTML5 elements
★ Design semantics
is handled by class names

25. Thank you!
Follow me on the Twitterz.
@JohnAlbin