Writing Scalable and Maintainable CSS

Guude wiie? I am Dmitry Sheiko a web developer, blogger,
open source contributor. www.dsheiko.com github.com/dsheiko @sheiko 2

“ 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

What are we after?

E.g. a button can be taken from one context and
placed in other 5 Reusable styles

Location Independence /* Tight coupling */ .callout a {} /*
Loose coupling */ .btn {} 6

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

Qualified Selectors /* Tight coupling */ ul.nav {} a.button {}
div.header {} /* Loose coupling */ .nav {} .button {} .header {} 8

Use the cascade carefully, scope the classes, keep compoents OCP,
use composition over inheritance 9 Conflict-free styles

Loose class names /* Obscure selector intent, chance of being
accidently redefined */ .card {} /* Clear selector intent, isolated scope*/ . credit-card-image {} 10

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

Function- Based Class Names /* Makes it dependent to markup
*/ . flex-columns { flex-flow: column nowrap; } /* Bound to domain, not to function */ .panel-content { .. } 12

Selector Performance /* Slower – reading from right to left
*/ body.home div.header ul {} /* Faster */ .primary-nav {} 13

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

Reactive !important /* Reactively used, brute- force, specificity conflicts */
. heading-sub { font-size: 1.5em !important; } /* Proactively used */ .is-hidden { display: none !important; } 15

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

Is there a standardized approach? 17

18 OOCSS SMACSS SUITCSS Atomic BEM

19 OOCSS SMACSS BEM PCSS https://github.com/dsheiko/pcss

Layers 20 Theme Layout Component Element State

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 *

Abstract button component <a class=“btn btn--primary”> <i class=“btn__toolbar”>…</i> Click me
</a> 22 Concrete button component Toolbar element component

State State classes are intended to represent a UI unit
state: .is- expanded, .is-hidden, .has-error. 23

<div class="l-main has-error"> <aside class="sidebar is-hidden">...</aside> </div> State 24 State

Layouts Layout specifies how the components are arranged in a
given context (e.g. .l-app) 25

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

Themes Theme classes used to alternate the style of a
component or a layout depending on the context. (e.g. .foo- theme) 27

<html class="theme-foo"> <div class="l-main"> <aside class="sidebar">...</aside> </div> </html> Themed component
28 Theme

File Structure 29

References PCSS https://github.com/dsheiko/pcss BEM http://getbem.com OOCSS https://oocss.org SMACSS https://smacss.com ATOMIC
https://github.com/nemophrost/atomic- css 30

31 THANKS Any questions? You can find me at ▫
www.dsheiko.com ▫ github.com/dsheiko ▫ @sheiko

CREDITS Special thanks to all the people who made and
released these awesome resources for free: ▫ Presentation template by SlidesCarnival ▫ Photographs by Unsplash 32

Writing Scalable and Maintainable CSS

Writing Scalable and Maintainable CSS

Dmitry Sheiko

More Decks by Dmitry Sheiko

Other Decks in Programming

Featured

Transcript