SassConf: Managing Complex Projects with Design Components
9 likes3,387 views
John Albin Wilkins discusses managing complex projects with design components at SassConf 2013. He emphasizes the use of design components to reduce CSS specificity and improve file organization while highlighting the importance of understanding design semantics. The presentation provides practical tips and resources for front-end web developers, including tools and themes.
SassConf: Managing Complex Projects with Design Components
- 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.
- 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
- 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