CUBE CSS

Slide 1

CUBE CSS July 1st 2020 #technica11y

Slide 2

CSS Doesn’t Scale!

Slide 3

Just use Tailwind Just use Emotion Just use Styled components Just use CSS Modules

Slide 4

Tailwind CSS default output: 80,936 lines, 102kb weight https://unpkg.com/tailwindcss@1.4.6/dist/tailwind.css

Slide 5

npm init -y

Slide 6

WordPress 36%

React JS 0.3%

Slide 7

body { content: “How Andy Does it” }

Slide 8

Slide 9

What is CUBE CSS?

Slide 10

C Composition Utility U Block B Exception E

Slide 11

The “C” in CSS stands for “Cascading”

Slide 12

CSS + CUBE =

Slide 13

CSS

Slide 14

CSS scales Beautifully

Slide 15

Slide 16

Slide 17

CSS

Slide 18

Progressive Enhancement for the win

Slide 19

Composition

Slide 20

Micro

Macro

Slide 21

Design System Work is often diplomacy work

Slide 22

Slide 23

Provide high-level, flexible layouts Determine how elements interact with each other Create consistent flow and rhythm

Slide 24

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

Slide 25

Slide 26

Featuring Heydon Pickering https://every-layout.dev

Slide 27

Simplify and distill layout Hints & rules, rather than micromanaging Achieves solid, resillient layouts

Slide 28

Simplify and distill layout Hints & rules, rather than micromanaging Achieves solid, resillient layouts

Slide 29

Simplify and distill layout Hints & rules, rather than micromanaging Achieves solid, resillient layouts

Slide 30

Featuring Heydon Pickering https://every-layout.dev

Slide 31

Slide 32

Slide 33

Slide 34

Slide 35

CSS

Slide 36

HTML

Slide 37

Utility

Slide 38

Image: thedrum.com

Slide 39

CSS

Slide 40

Design Tokens

Slide 41

“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

Slide 42

Design tokens for scalable systems

Slide 43

JSON

Slide 44

CSS

Slide 45

HTML

Slide 46

Design tokens mean light CSS

Slide 47

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

Slide 48

Define a large group of unrelated CSS properties. Be used as a specificity hack.

Slide 49

Block

Slide 50

Slide 51

CUBE CSS BEM

Slide 52

Bring your own opinions (slightly risky)

Slide 53

CSS

Slide 54

CSS

Slide 55

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