SassConf: Managing Complex Projects with Design Components

2,504 views

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
8 Likes
Statistics
Notes
No Downloads
Views
Total views
2,504
On SlideShare
0
From Embeds
0
Number of Embeds
26
Actions
Shares
0
Downloads
18
Comments
1
Likes
8
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 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. 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

×