SassConf: Managing Complex Projects with Design Components


Published on

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.

Published in: Technology
1 Comment
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

SassConf: Managing Complex Projects with Design Components

  1. 1. SassConf 2013 Managing Complex Projects with Design Components John Albin Wilkins @JohnAlbin
  2. 2. SassConf 2013 John Albin Wilkins @JohnAlbin
  3. 3. Free Gifts From Me ★ Zen Grids ★ Normalize.css for Sass/Compass ★ Succinct theme for Colloquy (IRC for Mac) ★ git-svn-migrate ★ Zen theme for Drupal
  4. 4. Introduction to Sass and Compass O’Reilly Due in Winter 2013 May contain Lemurs.
  5. 5. Building Sites Outside-In
  6. 6. CSS Specificity Wars
  7. 7. CSS Specificity Wars .menu .item a:link {} .sidebar .menu .item a:link {} .page-37 .sidebar .menu .item a:link {}
  8. 8. CSS Specificity Wars .menu .item a:link { .sidebar & { .page-37 & {} } }
  9. 9. Seemed like a good idea at the time.
  10. 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. 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. 12. Goals of Design Components ★ Reduce specificity ★ Reduce applicability / control the cascade
  13. 13. File organization = first 3 SMACSS Layers
  14. 14. Simple Folder Structure
  15. 15. styles.scss
  16. 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. 17. A simple component and a variant (all in one file)
  18. 18. A component with sub-parts .feature
  19. 19. A component with sub-parts
  20. 20. A SMACSS “state”
  21. 21. The “fugly” selector hack Selector in DOM I couldn’t change Class name I wish I could use in DOM
  22. 22. On the meaning of semantics
  23. 23. On the meaning of semantics .omnomnomnom is more semantic then .blaaagh
  24. 24. On the meaning of semantics ★ Content semantics is handled by HTML5 elements ★ Design semantics is handled by class names
  25. 25. Thank you! Follow me on the Twitterz. @JohnAlbin