DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified and Scalable stylesheets
Writing Scalable and Maintainable CSS
32
Writing Scalable and Maintainable CSS
-
Upload
dmitry-sheiko -
Category
Internet
-
view
261 -
download
1
Transcript of Writing Scalable and Maintainable CSS
Writing Scalable and Maintainable CSS
Guude wiie?
I am Dmitry Sheikoa web developer, blogger, open source contributor.
www.dsheiko.comgithub.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 inheritance9
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 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
Is there a standardized approach?
17
18
OOCSS
SMACSSSUITCSS
Atomic
BEM
19
OOCSS SMACSS BEM
PCSShttps://github.com/dsheiko/pcss
Layers
20
ThemeLayout
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 PCSShttps://github.com/dsheiko/pcss BEMhttp://getbem.comOOCSShttps://oocss.orgSMACSShttps://smacss.comATOMIChttps://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
