Writing Scalable and Maintainable CSS
•Télécharger en tant que PPTX, PDF•
2 j'aime•665 vues
Essentials on harmony with your CSS code
Recommandé
Contenu connexe
Tendances
Tendances (13)
En vedette
Similaire à Writing Scalable and Maintainable CSS
Similaire à Writing Scalable and Maintainable CSS (20)
Plus de Dmitry Sheiko
Dernier
Dernier (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