A presentation at Technica11y by Andy Bell
CUBE CSS July 1st 2020 #technica11y
CSS Doesn’t Scale!
Just use Tailwind Just use Emotion Just use Styled components Just use CSS Modules
Tailwind CSS default output: 80,936 lines, 102kb weight https://unpkg.com/tailwindcss@1.4.6/dist/tailwind.css
npm init -y
WordPress 36%
React JS 0.3%
body { content: “How Andy Does it” }
What is CUBE CSS?
C Composition Utility U Block B Exception E
The “C” in CSS stands for “Cascading”
CSS + CUBE =
CSS
CSS scales Beautifully
CSS
Progressive Enhancement for the win
Composition
Micro
Macro
Design System Work is often diplomacy work
Provide high-level, flexible layouts Determine how elements interact with each other Create consistent flow and rhythm
Provide visual treatment such as colour or font style Provide decorative styles such as shadows and patterns Force a browser to generate a pixelperfect layout
Featuring Heydon Pickering https://every-layout.dev
Simplify and distill layout Hints & rules, rather than micromanaging Achieves solid, resillient layouts
Simplify and distill layout Hints & rules, rather than micromanaging Achieves solid, resillient layouts
Simplify and distill layout Hints & rules, rather than micromanaging Achieves solid, resillient layouts
Featuring Heydon Pickering https://every-layout.dev
CSS
HTML
Utility
Image: thedrum.com
CSS
Design Tokens
“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
Design tokens for scalable systems
JSON
CSS
HTML
Design tokens mean light CSS
Apply a single CSS property, or a concise group of related properties Extend design tokens to maintain a single source of truth Abstract repeatability away from the CSS and apply it in the HTML instead
Define a large group of unrelated CSS properties. Be used as a specificity hack.
Block
CUBE CSS BEM
Bring your own opinions (slightly risky)
CSS
CSS
Extend the work already done by CSS, composition and utility Apply a collection of design tokens within a concise group Create a namespace or specificity boost
Grow to anything larger than a handful of CSS rules (max 80-100 lines) Solve more than one contextual problem
Exception
HTML
CSS
Principles
Pls do this layout thx
Progressive Enhancement for the win
https://swop.link/pe
Bye Bye AutoPrefixer we will not miss you
Abstraction only when necessary
Any technology is fine just keep the output light
Wrapping up
IT’S A LIE
https://cube.fyi
Thank you Use code TECHNICA11Y_PALS to save 40% off Learn Eleventy From Scratch https://swop.link/11ty-cube
Thank you Use code TECHNICA11Y_PALS to save 40% off Learn Eleventy From Scratch https://swop.link/11ty-cube
A run-down of the CUBE CSS methodology, how it works and most importantly why it exists.
for free. You
can too.