Keeping it simple with CSS that scales Andy Bell Andy Bell @hankchizljaw/@piccalilli_ @hankchizljaw https://piccalil.li
CSS SUCKS! CSS Rules! Learn it better, fools
import CSS from ‘css’;
import CSS from ‘css’;
Let’s talk about “scale”
“Scale” is BOLLOCKS most of the time
Serverless JAMstack Performant
Serverless JAMstack Performant
large project large team Scale complex lots of users
We use a CSS-in-JS library because our product needs to scale Chad Chetson
We use CSS-in-JS because we need to scale
Four key things
1 Don’t panic 2 Communicate 3 Consistency 4 Simplification
1 Don’t panic 2 Communicate 3 Consistency 4 Simplification
Image from bbc.co.uk
Image from waynesworldblog.blogspot.com
I like the cover…“Don’t Panic.” It’s the first helpful or intelligible thing anybody’s said to me all day. Arthur Dent
Fool
Image from thisismoney.co.uk
̂͋ ͛ ̓ ̽ ̄ ̒ ͛ ̓ ̏ ͂ ̋ ̚ ͌ ̕ !important !̷̘ĩ́ ͓̻̭ m̴ ̸ ͖̺̙͒ p̵͖̬͆ ő̵̞ͅ ̀ ř̴̦̖͈ ̡̛t̶͇å ̴ ̈ͅ t̴̞͕ ̀̅ ̝̖̹ ͜ n̵ ͖ ̜͙ ̟ ̤̻
The current state of CSS
Browser support % display: block; display: flex; display: grid; 100% 98.8% 95.49% Feature
CSS :root { —primary: #8e8e8e; } .box { background: var(—primary); } .badge { color: var(—primary); }
Box Badge
CSS .about-page { —primary: #ff00ff; }
Box Badge
Sass FTW
CSS .my-cool-component { .my-cool-element { padding: 2rem; } } p { span { font-weight: bold; } }
Image from commons.wikimedia.org
Image from iwradio.co.uk
Image from gsmarena.com
Tree-shaking Nesting linting Variables DX Portability Components main.css
The “S” in SCSS stands for “Spicy”. The_C_In_CSS https://twitter.com/The_C_In_CSS/status/1165990844882653184
1 Don’t panic 2 Communicate 3 Consistency 4 Simplification
Naming is hard*
This component I came up with already exists. Let me have a quick look in git and see who created it… Ah, it was Isabella Developer #1 Lucrecia
Hey, Isabella, is there a reason why this component is called “block”? Developer #1 Lucrecia
Ah yeh, this very important reason. How about you call that component “box” instead? Developer #2 Isabella
That’s a great idea. Thanks! Developer #1 Lucrecia
Soft Skills Core Skills
Document everything
https://design.bulb.co.uk
One of my favourite details in @bulbenergy’s new pattern library – research insights that explain rationale behind some of the patterns, based on user research. Alla Kholmatova - @craftui
CSS .card { background-color: #ffffff !important; }
CSS .card { /* When this card is used in the legacy app, there is a collision between existing styles, so unfortunately we had to go nuclear. It’s certainly a refactor target. */ } background-color: #ffffff !important;
Good written communication can prevent unnecessary collisions BETWEEN PEOPLE which can in turn, prevent expensive tech debt created by tools
1 Don’t panic 2 Communicate 3 Consistency 4 Simplification
Composition Utility Block Exception
CUBE CSS
The “C” in CSS stands for “Cascading”.
CSS body { font-family: Georgia; color: goldenrod; }
CSS body { font-family: Georgia; color: goldenrod; } button { font: inherit; color: currentColor; }
CSS body { font-family: Georgia; color: goldenrod; } button { font: inherit; color: currentColor; }
Composition
Composition Hi I am a totally unrelated element
Margin is bad and padding is bad
Utility I’m a card m8s I appear in every design system that ever existed. I’m a button .weight-bold
Token Also a utility I’m a card m8s I appear in every design system that ever existed. I’m a button .font-brand .text-600
Design Tokens are the visual atoms of the design system – specifically, they are named entities that store visual design attributes. We use them in place of hard–coded values in order to maintain a scalable and consistent visual system. Jina Anne - @jina
Token Also a utility I’m a card m8s I appear in every design system that ever existed. I’m a button .font-brand .text-600
https://andy-bell.design/styleguide/
Block I’m a card m8s I appear in every design system that ever existed. I’m a button .card
Elements I’m a card m8s I appear in every design system that ever existed. I’m a button .card__image .card__body
Elements I’m a card m8s I appear in every design system that ever existed. I’m a button .image .body
Elements I’m a card m8s I appear in every design system that ever existed. I’m a button h3 p
1rem 1rem Composition .flow > * + * { margin-top: 1rem; }
I’m a card m8s I appear in every design system that ever existed. I am a button Exception data-state=“reverse”
CSS .card[data-state=’reversed’] { display: flex; flex-direction: column-reverse; }
Composition Utility Block Exception
Enable people in your team to make consistent decisions without slowing them down
Cascade Composition Block Utility Element Block Utility Exception Token
If you stick to your guns too tightly, you’re probably going to end up causing more problems not just for yourself, but everyone else, in the future.
piccalil.li/blog/cube-css
1 Don’t panic 2 Communicate 3 Consistency 4 Simplification
By accident, Bootstrap is one of the best design systems ever created
Image from alaindelorme.com
CSS .card { background-color: #ffffff !important; }
Tailwind.css default output is 46,860 lines Source: https://unpkg.com/tailwindcss@1.1.2/dist/tailwind.css
Frameworks Methodology BEM, SMACSS, ITCSS, CUBE CSS
Featuring Heydon Pickering
Simplify and distill layout
Simplify and distill layout Hint & rules, rather than micromanage
Simplify and distill layout Hint & rules, rather than micromanage Achieves solid, resillient layouts
60% Discount XANDEMIC As the coupon on https://every-layout.dev
On the subject of progressive enhancement…
DON’T DISMISS MODERN CSS BECAUSE YOU HAVE TO SUPPORT IE11
WhAt aboUt IE 11 tHOuGh
CSS https://codepen.io/andybelldesign/pen/xxKdvwy .auto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); grid-gap: 1rem; }
CSS .auto-grid > * { max-width: 25rem; margin-left: auto; margin-right: auto; } .auto-grid > * + * { margin-top: 1rem; } https://codepen.io/andybelldesign/pen/xxKdvwy
CSS https://codepen.io/andybelldesign/pen/xxKdvwy @supports (display: grid) { .auto-grid > * { max-width: unset; margin: 0; } }
22 lines of CSS No hacks Works back to IE9
Slow down
Stop Step back Think
Instead of moving fast and breaking things, move slowly and deliberately instead.
Thank you Andy Bell @hankchizljaw/@piccalilli_ https://piccalil.li
CSS is a handy language that’s often misunderstood, even with the powerful new layout tools that we have at our disposal. This misunderstanding can lead to some wildly over-engineered solutions where the main byproduct is high-interest technical debt, frustration and worst of all, great expense for users.
In this session, I’m going to share with you the tricks that I use to produce highly flexible CSS for design systems, pattern libraries, rich applications and good ol’ websites. We focus on letting the browser make decisions for us, rather than micromanaging them by using algorithms, axioms, the cascade and a solid component strategy.
By the end of the session, I hope that you will see the value in distilling layout problems to their simplest solutions that utilise the power modern CSS and the browser’s capabilities.
for free. You
can too.