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