Writing Scalable and Maintainable CSS

Slide 1

Slide 1 text

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

“ 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

Slide 4

Slide 4 text

What are we after?

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Portability /* Context dependent */ .error { color: red; } div.error { border: … }

Msg..

/* Portable */ .error-txt { color: red; } .error-box { border: … }

Msg..

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Specificity /* Conflicting styles */ .foo .bar .label { color: red; } .bar.baz .label { color: green; } /* Will it be green or red?! */ .

LABEL

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Is there a standardized approach? 17

Slide 18

Slide 18 text

18 OOCSS SMACSS SUITCSS Atomic BEM

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Layers 20 Theme Layout Component Element State

Slide 21

Slide 21 text

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 *

Slide 22

Slide 22 text

Abstract button component … Click me 22 Concrete button component Toolbar element component

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

...

State 24 State

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Layout element

26 Layout

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

...

Themed component 28 Theme

Slide 29

Slide 29 text

File Structure 29

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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