SassConf: Managing Complex Projects with Design Components

Embed Size (px)


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.

Text of SassConf: Managing Complex Projects with Design Components

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

2. SassConf 2013John Albin Wilkins @JohnAlbin 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. Introduction to Sass and Compass OReillyDue in Winter 2013 May contain Lemurs. 5. Building Sites Outside-In 6. CSS Specicity Wars 7. CSS Specicity Wars .menu .item a:link {} .sidebar .menu .item a:link {} .page-37 .sidebar .menu .item a:link {} 8. CSS Specicity 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? Heres a secret: no one else really knows what theyre doing either. @necolas 11. What are Design Components? Component is the same as Object in OOCSS Module in SMACSS Block in BEMs BlockElement-Modier UI Pattern 12. Goals of Design Components Reduce specicity Reduce applicability / control the cascade 13. File organization = rst 3 SMACSS Layers 14. Simple Folder Structure 15. styles.scss 16. Putting all components in one folder means it is ridiculously easy to nd components. Inspect the DOM. Find the class on the design component. Look for a le with that name in the components folder. 17. A simple component and a variant (all in one le) 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 couldnt 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