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.
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
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
*
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