Writing Scalable and Maintainable CSS
•Download as PPTX, PDF•
2 likes•665 views
Essentials on harmony with your CSS code
Recommended
More Related Content
What's hot
What's hot (13)
Viewers also liked
Similar to Writing Scalable and Maintainable CSS
Similar to Writing Scalable and Maintainable CSS (20)
More from Dmitry Sheiko
Recently uploaded
Recently uploaded (20)
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