Keeping it simple with CSS that scales

A presentation at CSS Café in May 2020 in by Andy Bell

Slide 1

Keeping it simple with CSS that scales Andy Bell Andy Bell @hankchizljaw/@piccalilli_ @hankchizljaw https://piccalil.li

Slide 2

CSS SUCKS! CSS Rules! Learn it better, fools

Slide 3

import CSS from ‘css’;

Slide 4

import CSS from ‘css’;

Slide 5

Let’s talk about “scale”

Slide 6

“Scale” is BOLLOCKS most of the time

Slide 7

Serverless JAMstack Performant

Slide 8

Serverless JAMstack Performant

Slide 9

large project large team Scale complex lots of users

Slide 10

We use a CSS-in-JS library because our product needs to scale Chad Chetson

Slide 11

We use CSS-in-JS because we need to scale

Slide 12

Four key things

Slide 13

1 Don’t panic 2 Communicate 3 Consistency 4 Simplification

Slide 14

1 Don’t panic 2 Communicate 3 Consistency 4 Simplification

Slide 15

Image from bbc.co.uk

Slide 16

Image from waynesworldblog.blogspot.com

Slide 17

I like the cover…“Don’t Panic.” It’s the first helpful or intelligible thing anybody’s said to me all day. Arthur Dent

Slide 18

Fool

Slide 19

Image from thisismoney.co.uk

Slide 20

̂͋ ͛ ̓ ̽ ̄ ̒ ͛ ̓ ̏ ͂ ̋ ̚ ͌ ̕ !important !̷̘ĩ́ ͓̻̭ m̴ ̸ ͖̺̙͒ p̵͖̬͆ ő̵̞ͅ ̀ ř̴̦̖͈ ̡̛t̶͇å ̴ ̈ͅ t̴̞͕ ̀̅ ̝̖̹ ͜ n̵ ͖ ̜͙ ̟ ̤̻

Slide 21

The current state of CSS

Slide 22

Browser support % display: block; display: flex; display: grid; 100% 98.8% 95.49% Feature

Slide 23

CSS :root { —primary: #8e8e8e; } .box { background: var(—primary); } .badge { color: var(—primary); }

Slide 24

Box Badge

Slide 25

CSS .about-page { —primary: #ff00ff; }

Slide 26

Box Badge

Slide 27

Sass FTW

Slide 28

CSS .my-cool-component { .my-cool-element { padding: 2rem; } } p { span { font-weight: bold; } }

Slide 29

Image from commons.wikimedia.org

Slide 30

Image from iwradio.co.uk

Slide 31

Image from gsmarena.com

Slide 32

Tree-shaking Nesting linting Variables DX Portability Components main.css

Slide 33

The “S” in SCSS stands for “Spicy”. The_C_In_CSS https://twitter.com/The_C_In_CSS/status/1165990844882653184

Slide 34

1 Don’t panic 2 Communicate 3 Consistency 4 Simplification

Slide 35

Naming is hard*

Slide 36

When you don’t talk to each other

Slide 37

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

Slide 38

Hey, Isabella, is there a reason why this component is called “block”? Developer #1  Lucrecia

Slide 39

Ah yeh, this very important reason. How about you call that component “box” instead? Developer #2  Isabella

Slide 40

That’s a great idea. Thanks! Developer #1  Lucrecia

Slide 41

Soft Skills Core Skills

Slide 42

Document everything

Slide 43

https://design.bulb.co.uk

Slide 44

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

Slide 45

CSS .card { background-color: #ffffff !important; }

Slide 46

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;

Slide 47

Good written communication can prevent unnecessary collisions BETWEEN PEOPLE which can in turn, prevent expensive tech debt created by tools

Slide 48

1 Don’t panic 2 Communicate 3 Consistency 4 Simplification

Slide 49

Composition Utility Block Exception

Slide 50

CUBE CSS

Slide 51

The “C” in CSS stands for “Cascading”.

Slide 52

CSS body { font-family: Georgia; color: goldenrod; }

Slide 53

CSS body { font-family: Georgia; color: goldenrod; } button { font: inherit; color: currentColor; }

Slide 54

CSS body { font-family: Georgia; color: goldenrod; } button { font: inherit; color: currentColor; }

Slide 55

Slide 56

Composition

Slide 57

Composition Hi I am a totally unrelated element

Slide 58

Margin is bad and padding is bad

Slide 59

Utility I’m a card m8s I appear in every design system that ever existed. I’m a button .weight-bold

Slide 60

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

Slide 61

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

Slide 62

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

Slide 63

https://andy-bell.design/styleguide/

Slide 64

Block I’m a card m8s I appear in every design system that ever existed. I’m a button .card

Slide 65

Elements I’m a card m8s I appear in every design system that ever existed. I’m a button .card__image .card__body

Slide 66

Elements I’m a card m8s I appear in every design system that ever existed. I’m a button .image .body

Slide 67

Elements I’m a card m8s I appear in every design system that ever existed. I’m a button h3 p

Slide 68

1rem 1rem Composition .flow > * + * { margin-top: 1rem; }

Slide 69

I’m a card m8s I appear in every design system that ever existed. I am a button Exception data-state=“reverse”

Slide 70

CSS .card[data-state=’reversed’] { display: flex; flex-direction: column-reverse; }

Slide 71

Composition Utility Block Exception

Slide 72

Enable people in your team to make consistent decisions without slowing them down

Slide 73

Cascade Composition Block Utility Element Block Utility Exception Token

Slide 74

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.

Slide 75

piccalil.li/blog/cube-css

Slide 76

1 Don’t panic 2 Communicate 3 Consistency 4 Simplification

Slide 77

Slide 78

By accident, Bootstrap is one of the best design systems ever created

Slide 79

Image from alaindelorme.com

Slide 80

CSS .card { background-color: #ffffff !important; }

Slide 81

Tailwind.css default output is 46,860 lines Source: https://unpkg.com/tailwindcss@1.1.2/dist/tailwind.css

Slide 82

Frameworks Methodology BEM, SMACSS, ITCSS, CUBE CSS

Slide 83

Featuring Heydon Pickering

Slide 84

Simplify and distill layout

Slide 85

Simplify and distill layout Hint & rules, rather than micromanage

Slide 86

Simplify and distill layout Hint & rules, rather than micromanage Achieves solid, resillient layouts

Slide 87

60% Discount XANDEMIC As the coupon on https://every-layout.dev

Slide 88

On the subject of progressive enhancement…

Slide 89

DON’T DISMISS MODERN CSS BECAUSE YOU HAVE TO SUPPORT IE11

Slide 90

WhAt aboUt IE 11 tHOuGh

Slide 91

Slide 92

Slide 93

CSS https://codepen.io/andybelldesign/pen/xxKdvwy .auto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); grid-gap: 1rem; }

Slide 94

CSS .auto-grid > * { max-width: 25rem; margin-left: auto; margin-right: auto; } .auto-grid > * + * { margin-top: 1rem; } https://codepen.io/andybelldesign/pen/xxKdvwy