scalable css architecture
TRANSCRIPT
![Page 1: Scalable CSS Architecture](https://reader038.vdocument.in/reader038/viewer/2022110108/58cef9b21a28abab738b5649/html5/thumbnails/1.jpg)
Scalable CSS Architecture
Artur Kot & Michał Pierzchała
![Page 2: Scalable CSS Architecture](https://reader038.vdocument.in/reader038/viewer/2022110108/58cef9b21a28abab738b5649/html5/thumbnails/2.jpg)
Does it even exist?
Scalable CSS? Maintainable CSS?
![Page 3: Scalable CSS Architecture](https://reader038.vdocument.in/reader038/viewer/2022110108/58cef9b21a28abab738b5649/html5/thumbnails/3.jpg)
What we need
Modularity Encapsulation Predictability
![Page 4: Scalable CSS Architecture](https://reader038.vdocument.in/reader038/viewer/2022110108/58cef9b21a28abab738b5649/html5/thumbnails/4.jpg)
What we have
![Page 5: Scalable CSS Architecture](https://reader038.vdocument.in/reader038/viewer/2022110108/58cef9b21a28abab738b5649/html5/thumbnails/5.jpg)
What we really have
Cascade Global namespace Selectors specificity
![Page 6: Scalable CSS Architecture](https://reader038.vdocument.in/reader038/viewer/2022110108/58cef9b21a28abab738b5649/html5/thumbnails/6.jpg)
Solution?
![Page 7: Scalable CSS Architecture](https://reader038.vdocument.in/reader038/viewer/2022110108/58cef9b21a28abab738b5649/html5/thumbnails/7.jpg)
–David Heinemeier Hansson
“Convention over configuration”
![Page 8: Scalable CSS Architecture](https://reader038.vdocument.in/reader038/viewer/2022110108/58cef9b21a28abab738b5649/html5/thumbnails/8.jpg)
Like in JavaScript
Embrace the good parts Throw away the bad parts
![Page 9: Scalable CSS Architecture](https://reader038.vdocument.in/reader038/viewer/2022110108/58cef9b21a28abab738b5649/html5/thumbnails/9.jpg)
Introducing
![Page 10: Scalable CSS Architecture](https://reader038.vdocument.in/reader038/viewer/2022110108/58cef9b21a28abab738b5649/html5/thumbnails/10.jpg)
ITCSSInverted Triangle
CSS
![Page 11: Scalable CSS Architecture](https://reader038.vdocument.in/reader038/viewer/2022110108/58cef9b21a28abab738b5649/html5/thumbnails/11.jpg)
![Page 12: Scalable CSS Architecture](https://reader038.vdocument.in/reader038/viewer/2022110108/58cef9b21a28abab738b5649/html5/thumbnails/12.jpg)
// main.scss
@import 'settings/*'; @import 'tools/*'; @import 'generic/*'; @import 'elements/*'; @import 'objects/*'; @import 'components/*'; @import 'trumps/*';
![Page 13: Scalable CSS Architecture](https://reader038.vdocument.in/reader038/viewer/2022110108/58cef9b21a28abab738b5649/html5/thumbnails/13.jpg)
used with preprocessors font definitions, colours, variables, etc.
1. Settings
2. Toolsglobally used mixins and functions
![Page 14: Scalable CSS Architecture](https://reader038.vdocument.in/reader038/viewer/2022110108/58cef9b21a28abab738b5649/html5/thumbnails/14.jpg)
normalising styles box-sizing
3. Generic
4. Elementsbare HTML elements
reset lists, anchors, etc
![Page 15: Scalable CSS Architecture](https://reader038.vdocument.in/reader038/viewer/2022110108/58cef9b21a28abab738b5649/html5/thumbnails/15.jpg)
simple & reusable containers, grids, global animations, etc
5. Objects
6. Componentsactual UI
CSS ❤ components
![Page 16: Scalable CSS Architecture](https://reader038.vdocument.in/reader038/viewer/2022110108/58cef9b21a28abab738b5649/html5/thumbnails/16.jpg)
utilities and helper classes visibility, alternative colours
override anything
7. Trumps
![Page 17: Scalable CSS Architecture](https://reader038.vdocument.in/reader038/viewer/2022110108/58cef9b21a28abab738b5649/html5/thumbnails/17.jpg)
![Page 18: Scalable CSS Architecture](https://reader038.vdocument.in/reader038/viewer/2022110108/58cef9b21a28abab738b5649/html5/thumbnails/18.jpg)
Some constraints and recommendations
![Page 19: Scalable CSS Architecture](https://reader038.vdocument.in/reader038/viewer/2022110108/58cef9b21a28abab738b5649/html5/thumbnails/19.jpg)
Groups order is crucial (Inner order doesn’t matter)
![Page 20: Scalable CSS Architecture](https://reader038.vdocument.in/reader038/viewer/2022110108/58cef9b21a28abab738b5649/html5/thumbnails/20.jpg)
Avoid “!important”
![Page 21: Scalable CSS Architecture](https://reader038.vdocument.in/reader038/viewer/2022110108/58cef9b21a28abab738b5649/html5/thumbnails/21.jpg)
Use BEM (Block Element Modifier)
![Page 22: Scalable CSS Architecture](https://reader038.vdocument.in/reader038/viewer/2022110108/58cef9b21a28abab738b5649/html5/thumbnails/22.jpg)
<section class="c-component c-component--small"> <div class="c-component__bg"></div> <h2 class="c-component__heading">A component!</h2> <div class="c-component__child"> Lorem ipsum dolor sit amet, consectetur adipisicing elit <button class="c-component__grandchild">inside</button> </div> </section>
![Page 23: Scalable CSS Architecture](https://reader038.vdocument.in/reader038/viewer/2022110108/58cef9b21a28abab738b5649/html5/thumbnails/23.jpg)
• .[component-name]__[child]—[modifier] • Remember that it’s on only a convention! • Use 🍌 instead of __ or 🍓instead —
if you like • Important: separation of the parent
element and its children. • Be consistent.
![Page 24: Scalable CSS Architecture](https://reader038.vdocument.in/reader038/viewer/2022110108/58cef9b21a28abab738b5649/html5/thumbnails/24.jpg)
JS hooks
• .js-[name] • readonly to identify DOM elements for JS • can’t be styled!
![Page 25: Scalable CSS Architecture](https://reader038.vdocument.in/reader038/viewer/2022110108/58cef9b21a28abab738b5649/html5/thumbnails/25.jpg)
State classes
• .is-[name] • .has-[name] • should be used in favour of —modifiers
in case a component changes its state after the page is loaded
• handy to use with JS
![Page 26: Scalable CSS Architecture](https://reader038.vdocument.in/reader038/viewer/2022110108/58cef9b21a28abab738b5649/html5/thumbnails/26.jpg)
Resist from nesting
![Page 27: Scalable CSS Architecture](https://reader038.vdocument.in/reader038/viewer/2022110108/58cef9b21a28abab738b5649/html5/thumbnails/27.jpg)
Temptation to target tags.c-my-list li { [item styles] }
<ul> <li> <div class=”c-some-component-with-a-list”> <ul> <li>another list!</li> <li> and now you need to override
.c-my-list li with stronger selector...</li> </ul> </div> </li> </ul>
![Page 28: Scalable CSS Architecture](https://reader038.vdocument.in/reader038/viewer/2022110108/58cef9b21a28abab738b5649/html5/thumbnails/28.jpg)
• You can’t predict the future. It’s possible that a sneaky designer could design a nested list inside your element. What to do then? More nesting. :)
• It, obviously, works but what if you’ve got identical list but with divs instead of lis?
• Usually, nesting is like a domino effect: one innocent nested selector results in dozen deeper nested selectors. Avoid when possible.
![Page 29: Scalable CSS Architecture](https://reader038.vdocument.in/reader038/viewer/2022110108/58cef9b21a28abab738b5649/html5/thumbnails/29.jpg)
You can’t entirely avoid nesting. It’s impossible.
The goal is to minimise it and its side effects.
![Page 30: Scalable CSS Architecture](https://reader038.vdocument.in/reader038/viewer/2022110108/58cef9b21a28abab738b5649/html5/thumbnails/30.jpg)
.c-component { /* third-party code */ .super-slick-slider { float: left !important; }
/* state affects children */ &.is-open { .c-component__grandchild { display: block; }
.c-component__inner { display: flex; }
.c-component__inner-most { color: red; } } }
![Page 31: Scalable CSS Architecture](https://reader038.vdocument.in/reader038/viewer/2022110108/58cef9b21a28abab738b5649/html5/thumbnails/31.jpg)
.c-component { /* state classes */ &.is-open, &.has-popup { display: block; } /* state pseudo-selectors */ &:hover, &:focus, &:nth-child(2n) { border-bottom: 1px solid; }
/* relationships */ + &, ~ &, > &, * { display: none; } }
![Page 32: Scalable CSS Architecture](https://reader038.vdocument.in/reader038/viewer/2022110108/58cef9b21a28abab738b5649/html5/thumbnails/32.jpg)
Do Repeat Yourself
If it makes your life easier (usually does)
extra bytes will be squashed by gzip anyway…
![Page 33: Scalable CSS Architecture](https://reader038.vdocument.in/reader038/viewer/2022110108/58cef9b21a28abab738b5649/html5/thumbnails/33.jpg)
Tricky MQ nesting
.c-component { @media { &.is-cos { @media { color: red; } } } }
.c-component { color: blue;
@media { color: red; }
&.is-cos { @media { color: yellow; } } }
BAD GOOD
![Page 34: Scalable CSS Architecture](https://reader038.vdocument.in/reader038/viewer/2022110108/58cef9b21a28abab738b5649/html5/thumbnails/34.jpg)
Keep it tidy
![Page 35: Scalable CSS Architecture](https://reader038.vdocument.in/reader038/viewer/2022110108/58cef9b21a28abab738b5649/html5/thumbnails/35.jpg)
Sync filenames with naming
/* _my-pretty-component.scss: */
.c-my-pretty-cmp { color: brown; }
/* _my-pretty-component.scss: */
.c-my-pretty-component { color: blue; }
BAD GOOD
![Page 36: Scalable CSS Architecture](https://reader038.vdocument.in/reader038/viewer/2022110108/58cef9b21a28abab738b5649/html5/thumbnails/36.jpg)
Do not mix components with each other
![Page 37: Scalable CSS Architecture](https://reader038.vdocument.in/reader038/viewer/2022110108/58cef9b21a28abab738b5649/html5/thumbnails/37.jpg)
Not in stylesheets
/* Some time before */
.c-my-box { width: 320px; }
.c-my-box__inner { padding: 20px; background: blue;
.c-my-other-box { color: white; } }
/* Few weeks later… */
.c-my-other-box { color: white;
/* Doesn’t work :( */ &--pink { color: pink;
} }
![Page 38: Scalable CSS Architecture](https://reader038.vdocument.in/reader038/viewer/2022110108/58cef9b21a28abab738b5649/html5/thumbnails/38.jpg)
Nor in the markup<div class=”c-boxie c-footer”></div>
.c-boxie { display: block; }
.c-footer { display: flex; }
What display will it get?
![Page 39: Scalable CSS Architecture](https://reader038.vdocument.in/reader038/viewer/2022110108/58cef9b21a28abab738b5649/html5/thumbnails/39.jpg)
Objects for reusability Components for explicitness
![Page 40: Scalable CSS Architecture](https://reader038.vdocument.in/reader038/viewer/2022110108/58cef9b21a28abab738b5649/html5/thumbnails/40.jpg)
Use objects for mixing with component!
<div class=”o-boxie c-footer”></div>
.o-boxie { display: block; }
![Page 41: Scalable CSS Architecture](https://reader038.vdocument.in/reader038/viewer/2022110108/58cef9b21a28abab738b5649/html5/thumbnails/41.jpg)
Trumps are the new “!important”
![Page 42: Scalable CSS Architecture](https://reader038.vdocument.in/reader038/viewer/2022110108/58cef9b21a28abab738b5649/html5/thumbnails/42.jpg)
<h3 class=”o-title t-color-blue”>Heading</h3>
.o-title { font-size: 12px; color: red; }
/* trumps/utilities.scss */
.t-color-blue { color: blue; }
![Page 43: Scalable CSS Architecture](https://reader038.vdocument.in/reader038/viewer/2022110108/58cef9b21a28abab738b5649/html5/thumbnails/43.jpg)
It’s easier to maintain separated UI components than ones mixed in HTML markup
Take it serious
![Page 44: Scalable CSS Architecture](https://reader038.vdocument.in/reader038/viewer/2022110108/58cef9b21a28abab738b5649/html5/thumbnails/44.jpg)
It Just Works™ for CSS, SCSS, LESS
![Page 45: Scalable CSS Architecture](https://reader038.vdocument.in/reader038/viewer/2022110108/58cef9b21a28abab738b5649/html5/thumbnails/45.jpg)
Piece of cake
Critical CSS or PRPL?
![Page 46: Scalable CSS Architecture](https://reader038.vdocument.in/reader038/viewer/2022110108/58cef9b21a28abab738b5649/html5/thumbnails/46.jpg)
/* critical.index.scss */
@import 'settings/*'; @import ‘tools/*'; @import 'generic/*'; @import 'elements/*'; @import 'components/colorbar'; @import 'components/header'; @import 'components/hero';
![Page 47: Scalable CSS Architecture](https://reader038.vdocument.in/reader038/viewer/2022110108/58cef9b21a28abab738b5649/html5/thumbnails/47.jpg)
Kinda
Use in existing messy codebase?
![Page 48: Scalable CSS Architecture](https://reader038.vdocument.in/reader038/viewer/2022110108/58cef9b21a28abab738b5649/html5/thumbnails/48.jpg)
Gradual adoptionNeeds pre-/post-processor (sorry CSS 😞)
#create #strongest #selector { @import 'settings/*'; @import 'tools/*'; @import 'generic/*'; @import 'elements/*'; @import 'objects/*'; @import 'components/*'; @import 'trumps/*'; }
![Page 49: Scalable CSS Architecture](https://reader038.vdocument.in/reader038/viewer/2022110108/58cef9b21a28abab738b5649/html5/thumbnails/49.jpg)
With predefined and ready to use (or remove) components
Featured in Chisel, our new project generator
![Page 50: Scalable CSS Architecture](https://reader038.vdocument.in/reader038/viewer/2022110108/58cef9b21a28abab738b5649/html5/thumbnails/50.jpg)
![Page 51: Scalable CSS Architecture](https://reader038.vdocument.in/reader038/viewer/2022110108/58cef9b21a28abab738b5649/html5/thumbnails/51.jpg)
ITCSSISAWESOMER
![Page 52: Scalable CSS Architecture](https://reader038.vdocument.in/reader038/viewer/2022110108/58cef9b21a28abab738b5649/html5/thumbnails/52.jpg)
Cool JS-based alternatives
CSS Modules CSS in JS
Available with Webpack & Browserify
![Page 53: Scalable CSS Architecture](https://reader038.vdocument.in/reader038/viewer/2022110108/58cef9b21a28abab738b5649/html5/thumbnails/53.jpg)
Thank you.
Artur Kot & Michał Pierzchała