Improve your Workflow with Modular Sass

There are a number of methodologies floating around that help improve how we write and maintain our CSS: SMACSS, BEM, or Object-Oriented CSS. In this session, you’ll get a better understanding of Sass and modular based design principles and how we can use them to create flexible, modular and responsive CSS.

In this session we’ll:

• contrast SMACSS, OOCSS, & BEM concepts
• discuss practical information about how to structure your Sass
• look at a handful of modular examples
• wield the power of Sass to it’s fullest and love it
• not be dogmatic about preferred methodologies ‘cause we really just want to enjoy writing Sass

Transcript

1. S A S MODULAR S @bermonpainter | CAMP SASS
2. MODULAR MINDSET Smaller, objects that are DRY, responsive & accessible.
3. We’re not designing pages, we’re designing systems of components. —Stephen Hay
4. 3 METHODOLOGIES OOCSS, SMACSS, BEM
5. OOCSS Object Oriented CSS
6. SEPARATE STRUCTURE FROM SKIN
7. SEPARATE CONTAINER FROM CONTENT
9. OOCSS Example | HTML <dl class=“accordion box-border”> <dt class=“title separator-border”> Title </dt> <dd class=“content”> … </dd> </dl>
10. OOCSS Example | CSS .accordion {} .accordion .title {} .accordion .content {} .box-border {} .separator-border {}
11. SMACSS Scalable and Modular Architecture for CSS
13. BASE
14. LAYOUT
15. MODULES
16. STATES
17. THEMES
19. SMACSS Example | HTML <dl class=“accordion”> <dt class=“accordion-title is-active”> Title </dt> <dd class=“accordion-content is-active”> … </dd> </dl>
20. SMACSS Example | CSS .accordion {} .accordion-title {} .accordion-title.is-active {} .accordion-content {} .accordion-content.is-active {}
21. BEM Block, Element, Modifier
22. BLOCK
23. ELEMENT
24. MODIFYER
26. BEM Example | HTML <dl class=“accordion”> <dt class=“accordion__title accordion––active”> Title </dt> <dd class=“accordion__content accordion––active”> … </dd> </dl>
27. BEM Example | CSS .accordion {} .accordion__title {} .accordion__title.accordion––active {} .accordion__content {} .accordion__content.is––active {}
28. SMABEMOOCSS?
29. MODULE REQUIREMENTS
30. CAN BE NESTED
31. CAN BE COMBINED
32. CLEARFIXED
33. FLEXIBLE
34. SEPARATE STRUCTURE AND THEME
35. ACCESSIBLE
36. Bermon Example | HTML <dl class=“accordion”> <dt class=“accordion-title” data-state=“open”> Title </dt> <dd class=“accordion-content” data-state=“open”> … </dd> </dl>
37. Bermon Example | CSS .accordion {} .accordion-title {} .accordion-item {} [data-state=“open”]{}
38. Bermon Example | SCSS .accordion { … &-title { &[data-state=“open”] {} } &-item { &[data-state=“open”] {} } }
39. Bermon Example | ACCESSIBLE HTML <dl class=“accordion” role=“tablist”> <dt id=“tab-1” class=“accordion-title” role=“tab” aria-selected=“true” aria-expanded=“true” aria-controls=“panel-1”> Title </dt> <dd id=“panel-1” class=“accordion-content” role=“tabpanel” aria-hidden=“false” aria-labeled-by=“tab-1” > … </dd> </dl>
40. Bermon Example | SCSS .accordion { … &-title { &[aria-selected=“true”] {} &[aria-selected=“false”] {} &[aria-expanded=“true”] {} &[aria-expanded=“false”] {} } &-item { &[aria-selected=“true”] {} &[aria-selected=“false”] {} } }
41. DON’T BE DOGMATIC
42. Just try, and do a good job. —Chris Coyier