writing scalable and maintainable css
TRANSCRIPT
![Page 1: Writing Scalable and Maintainable CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587a71b21a28ab8a2a8b7f73/html5/thumbnails/1.jpg)
Writing Scalable and Maintainable CSS
![Page 2: Writing Scalable and Maintainable CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587a71b21a28ab8a2a8b7f73/html5/thumbnails/2.jpg)
Guude wiie?
I am Dmitry Sheikoa web developer, blogger, open source contributor.
www.dsheiko.comgithub.com/dsheiko @sheiko
2
![Page 3: Writing Scalable and Maintainable CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587a71b21a28ab8a2a8b7f73/html5/thumbnails/3.jpg)
“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
![Page 4: Writing Scalable and Maintainable CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587a71b21a28ab8a2a8b7f73/html5/thumbnails/4.jpg)
What are we after?
![Page 5: Writing Scalable and Maintainable CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587a71b21a28ab8a2a8b7f73/html5/thumbnails/5.jpg)
E.g. a button can be taken from one context and placed in other
5
Reusable styles
![Page 6: Writing Scalable and Maintainable CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587a71b21a28ab8a2a8b7f73/html5/thumbnails/6.jpg)
Location Independence
/* Tight coupling */.callout a {}
/* Loose coupling */.btn {}
6
![Page 7: Writing Scalable and Maintainable CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587a71b21a28ab8a2a8b7f73/html5/thumbnails/7.jpg)
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
![Page 8: Writing Scalable and Maintainable CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587a71b21a28ab8a2a8b7f73/html5/thumbnails/8.jpg)
Qualified Selectors
/* Tight coupling */ul.nav {} a.button {} div.header {}
/* Loose coupling */.nav {} .button {} .header {}
8
![Page 9: Writing Scalable and Maintainable CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587a71b21a28ab8a2a8b7f73/html5/thumbnails/9.jpg)
Use the cascade carefully, scope the classes, keep compoents OCP, use composition over inheritance9
Conflict-free styles
![Page 10: Writing Scalable and Maintainable CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587a71b21a28ab8a2a8b7f73/html5/thumbnails/10.jpg)
Loose class names
/* Obscure selector intent, chance of being accidently redefined */.card {}
/* Clear selector intent, isolated scope*/. credit-card-image {}
10
![Page 11: Writing Scalable and Maintainable CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587a71b21a28ab8a2a8b7f73/html5/thumbnails/11.jpg)
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
![Page 12: Writing Scalable and Maintainable CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587a71b21a28ab8a2a8b7f73/html5/thumbnails/12.jpg)
Function-Based Class Names
/* Makes it dependent to markup */. flex-columns { flex-flow: column nowrap;}/* Bound to domain, not to function */.panel-content { .. }
12
![Page 13: Writing Scalable and Maintainable CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587a71b21a28ab8a2a8b7f73/html5/thumbnails/13.jpg)
Selector Performance
/* Slower – reading from right to left */body.home div.header ul {}
/* Faster */.primary-nav {}
13
![Page 14: Writing Scalable and Maintainable CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587a71b21a28ab8a2a8b7f73/html5/thumbnails/14.jpg)
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
![Page 15: Writing Scalable and Maintainable CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587a71b21a28ab8a2a8b7f73/html5/thumbnails/15.jpg)
Reactive !important
/* Reactively used, brute-force, specificity conflicts */. heading-sub { font-size: 1.5em !important; }
/* Proactively used */.is-hidden { display: none !important; }
15
![Page 16: Writing Scalable and Maintainable CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587a71b21a28ab8a2a8b7f73/html5/thumbnails/16.jpg)
References ▫ Code smells in CSShttp://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 CSShttp://dsheiko.com/weblog/10-things-to-need-to-know-about-css/
16
![Page 17: Writing Scalable and Maintainable CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587a71b21a28ab8a2a8b7f73/html5/thumbnails/17.jpg)
Is there a standardized approach?
17
![Page 18: Writing Scalable and Maintainable CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587a71b21a28ab8a2a8b7f73/html5/thumbnails/18.jpg)
18
OOCSS
SMACSSSUITCSS
Atomic
BEM
![Page 19: Writing Scalable and Maintainable CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587a71b21a28ab8a2a8b7f73/html5/thumbnails/19.jpg)
19
OOCSS SMACSS BEM
PCSShttps://github.com/dsheiko/pcss
![Page 20: Writing Scalable and Maintainable CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587a71b21a28ab8a2a8b7f73/html5/thumbnails/20.jpg)
Layers
20
ThemeLayout
Component
Element
State
![Page 21: Writing Scalable and Maintainable CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587a71b21a28ab8a2a8b7f73/html5/thumbnails/21.jpg)
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
*
![Page 22: Writing Scalable and Maintainable CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587a71b21a28ab8a2a8b7f73/html5/thumbnails/22.jpg)
Abstract button component
<a class=“btn btn--primary”> <i class=“btn__toolbar”>…</i> Click me</a>
22
Concrete button component
Toolbar element component
![Page 23: Writing Scalable and Maintainable CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587a71b21a28ab8a2a8b7f73/html5/thumbnails/23.jpg)
State
State classes are intended to represent a UI unit state: .is-expanded, .is-hidden, .has-error.
23
![Page 24: Writing Scalable and Maintainable CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587a71b21a28ab8a2a8b7f73/html5/thumbnails/24.jpg)
<div class="l-main has-error"><aside class="sidebar is-hidden">...</aside></div>
State
24
State
![Page 25: Writing Scalable and Maintainable CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587a71b21a28ab8a2a8b7f73/html5/thumbnails/25.jpg)
Layouts
Layout specifies how the components are arranged in a given context (e.g. .l-app)
25
![Page 26: Writing Scalable and Maintainable CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587a71b21a28ab8a2a8b7f73/html5/thumbnails/26.jpg)
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
![Page 27: Writing Scalable and Maintainable CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587a71b21a28ab8a2a8b7f73/html5/thumbnails/27.jpg)
Themes
Theme classes used to alternate the style of a component or a layout depending on the context. (e.g. .foo-theme)
27
![Page 28: Writing Scalable and Maintainable CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587a71b21a28ab8a2a8b7f73/html5/thumbnails/28.jpg)
<html class="theme-foo"> <div class="l-main"> <aside class="sidebar">...</aside> </div></html>
Themed component
28
Theme
![Page 29: Writing Scalable and Maintainable CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587a71b21a28ab8a2a8b7f73/html5/thumbnails/29.jpg)
File Structure
29
![Page 30: Writing Scalable and Maintainable CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587a71b21a28ab8a2a8b7f73/html5/thumbnails/30.jpg)
References PCSShttps://github.com/dsheiko/pcss BEMhttp://getbem.comOOCSShttps://oocss.orgSMACSShttps://smacss.comATOMIChttps://github.com/nemophrost/atomic-css 30
![Page 31: Writing Scalable and Maintainable CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587a71b21a28ab8a2a8b7f73/html5/thumbnails/31.jpg)
31
THANKS
Any questions?You can find me at
▫ www.dsheiko.com▫ github.com/dsheiko▫ @sheiko
![Page 32: Writing Scalable and Maintainable CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062503/587a71b21a28ab8a2a8b7f73/html5/thumbnails/32.jpg)
CREDITS Special thanks to all the people who made and released these awesome resources for free:▫ Presentation template by
SlidesCarnival▫ Photographs by Unsplash
32