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