Writing Scalable and Maintainable CSS
Download as PPTX, PDF2 likes674 views
The document discusses approaches for writing scalable and maintainable CSS, including OOCSS, SMACSS, BEM, Atomic Design, and PCSS. It emphasizes writing reusable styles with loose coupling, abstracted class names, and separating concerns like components, elements, states, layouts, and themes. The goal is to develop structured, organized CSS that is portable, performant and avoids specificity conflicts.
Writing Scalable and Maintainable CSS
- 2. Guude wiie? I am Dmitry Sheiko a web developer, blogger, open source contributor. www.dsheiko.com github.com/dsheiko @sheiko 2
- 3. “ The skills required to write good CSS code are by and large the same skills required to write good code in general. Lea Verou 3
- 4. What are we after?
- 5. E.g. a button can be taken from one context and placed in other 5 Reusable styles
- 6. Location Independence /* Tight coupling */ .callout a {} /* Loose coupling */ .btn {} 6
- 7. Portability /* Context dependent */ .error { color: red; } div.error { border: … } <div class=“error”>Msg..</div> /* Portable */ .error-txt { color: red; } .error-box { border: … } <div class=“error-txt error- box”>Msg..</div> 7
- 8. Qualified Selectors /* Tight coupling */ ul.nav {} a.button {} div.header {} /* Loose coupling */ .nav {} .button {} .header {}8
- 9. Use the cascade carefully, scope the classes, keep compoents OCP, use composition over inheritance 9 Conflict-free styles
- 10. Loose class names /* Obscure selector intent, chance of being accidently redefined */ .card {} /* Clear selector intent, isolated scope*/ . credit-card-image {} 10
- 11. Content-Based Class Names /* Risk of becoming obsolete */ .red { color: red; } /* Too specific, not reusable */ .header-color { color: red; } /* Nicely abstracted and portable */ .danger-color { color: red; }11
- 12. Function- Based Class Names /* Makes it dependent to markup */ . flex-columns { flex-flow: column nowrap; } /* Bound to domain, not to function */ .panel-content { .. } 12
- 13. Selector Performance /* Slower – reading from right to left */ body.home div.header ul {} /* Faster */ .primary-nav {} 13
- 14. Specificity /* Conflicting styles */ .foo .bar .label { color: red; } .bar.baz .label { color: green; } /* Will it be green or red?! */ . <div class="foo"> <div class="bar baz"> <label class="label">LABEL</label> </div> </div>14
- 15. Reactive !important /* Reactively used, brute- force, specificity conflicts */ . heading-sub { font-size: 1.5em !important; } /* Proactively used */ .is-hidden { display: none !important; } 15
- 16. References ▫Code smells in CSS http://csswizardry.com/2012/11/code- smells-in-css ▫ High-level advice and guidelines for writing sane, manageable, scalable CSS http://cssguidelin.es ▫10 things to need to know about CSS http://dsheiko.com/weblog/10-things-to- need-to-know-about-css/ 16
- 21. Components Component is a reusable module of UI (e.g. nav-bar, main-panel). Component consists of elements (e.g. main-panel __title) and can be extended by subclasses (e.g. nav-bar—primary) 21 Element .foo__baz Component .foo Subclass .foo--bar 1 *
- 22. Abstract button component <a class=“btn btn--primary”> <i class=“btn__toolbar”>…</i> Click me </a> 22 Concrete button component Toolbar element component
- 23. State State classes are intended to represent a UI unit state: .is- expanded, .is-hidden, .has-error. 23
- 24. <div class="l-main has-error"> <aside class="sidebar is-hidden">...</aside> </div> State 24 State
- 25. Layouts Layout specifies how the components are arranged in a given context (e.g. .l-app) 25
- 26. Layout element <div class="l-app"> <div class="l-app__body"> <aside class="l-app__aside">..</aside> <div class="l-app__main">..</div> </div> </div> 26 Layout
- 27. Themes Theme classes used to alternate the style of a component or a layout depending on the context. (e.g. .foo- theme) 27
- 28. <html class="theme-foo"> <div class="l-main"> <aside class="sidebar">...</aside> </div> </html> Themed component 28 Theme
- 31. 31 THANKS Any questions? You can find me at ▫ www.dsheiko.com ▫ github.com/dsheiko ▫ @sheiko
- 32. CREDITS Special thanks to all the people who made and released these awesome resources for free: ▫ Presentation template by SlidesCarnival ▫ Photographs by Unsplash 32