Keeping it simple with CSS that scales

A presentation at FrontEnd Conf 2019 in October 2019 in Moscow, Russia by Andy Bell

Slide 1

Slide 1

Keeping it simple with CSS that scales Andy Bell @hankchizljaw

Slide 2

Slide 2

CSS SUCKS! CSS Rules! Learn it better, fools

Slide 3

Slide 3

import CSS from ‘css’;

Slide 4

Slide 4

import CSS from ‘css’;

Slide 5

Slide 5

Let’s talk about “scale”

Slide 6

Slide 6

“Scale” is RUBBISH most of the time

Slide 7

Slide 7

Serverless JAMstack Performant

Slide 8

Slide 8

Serverless JAMstack Performant

Slide 9

Slide 9

large project large team Scale complex lots of users

Slide 10

Slide 10

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

Slide 11

Slide 11

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

Slide 12

Slide 12

Four key things

Slide 13

Slide 13

1 Don’t panic 2 Communicate 3 Consistency 4 Simplification

Slide 14

Slide 14

1 Don’t panic 2 Communicate 3 Consistency 4 Simplification

Slide 15

Slide 15

Image from bbc.co.uk

Slide 16

Slide 16

Image from waynesworldblog.blogspot.com

Slide 17

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

Slide 18

Fool

Slide 19

Slide 19

Image from thisismoney.co.uk

Slide 20

Slide 20

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

Slide 21

Slide 21

The current state of CSS

Slide 22

Slide 22

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

Slide 23

Slide 23

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

Slide 24

Slide 24

Box Badge

Slide 25

Slide 25

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

Slide 26

Slide 26

Box Badge

Slide 27

Slide 27

Sass FTW

Slide 28

Slide 28

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

Slide 29

Slide 29

Image from commons.wikimedia.org

Slide 30

Slide 30

Image from iwradio.co.uk

Slide 31

Slide 31

Image from gsmarena.com

Slide 32

Slide 32

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

Slide 33

Slide 33

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

Slide 34

Slide 34

1 Don’t panic 2 Communicate 3 Consistency 4 Simplification

Slide 35

Slide 35

Naming is hard*

Slide 36

Slide 36

  • When you don’t talk to each other

Slide 37

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

Slide 38

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

Slide 39

Slide 39

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

Slide 40

Slide 40

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

Slide 41

Slide 41

Soft Skills Core Skills

Slide 42

Slide 42

Document everything

Slide 43

Slide 43

https://design.bulb.co.uk

Slide 44

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

Slide 45

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

Slide 46

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

Slide 47

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

Slide 48

Slide 48

1 Don’t panic 2 Communicate 3 Consistency 4 Simplification

Slide 49

Slide 49

Cascade Block Element Utility Token

Slide 50

Slide 50

CBEUT what a rubbish name, I know

Slide 51

Slide 51

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

Slide 52

Slide 52

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

Slide 53

Slide 53

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

Slide 54

Slide 54

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

Slide 55

Slide 55

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

Slide 56

Slide 56

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

Slide 57

Slide 57

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

Slide 58

Slide 58

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

Slide 59

Slide 59

Token I’m a card m8s I appear in every design system that ever existed. I’m a button .font-brand .text-600

Slide 60

Slide 60

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 61

Slide 61

Token I’m a card m8s I appear in every design system that ever existed. I’m a button .font-brand .text-600

Slide 62

Slide 62

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

Slide 63

Slide 63

Cascade Block Element Utility Token

Slide 64

Slide 64

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

Slide 65

Slide 65

Cascade Block Element Utility Token

Slide 66

Slide 66

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 67

Slide 67

1 Don’t panic 2 Communicate 3 Consistency 4 Simplification

Slide 68

Slide 68

Slide 69

Slide 69

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

Slide 70

Slide 70

Image from alaindelorme.com

Slide 71

Slide 71

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

Slide 72

Slide 72

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

Slide 73

Slide 73

Frameworks Methodology BEM, SMACSS, ITCSS, C-BEUT

Slide 74

Slide 74

Featuring Heydon Pickering

Slide 75

Slide 75

Simplify and distill layout

Slide 76

Slide 76

Simplify and distill layout Hint & rules, rather than micromanage

Slide 77

Slide 77

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

Slide 78

Slide 78

50% Discount FECRU As the coupon on https://every-layout.dev

Slide 79

Slide 79

On the subject of progressive enhancement…

Slide 80

Slide 80

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

Slide 81

Slide 81

WhAt aboUt IE 11 tHOuGh

Slide 82

Slide 82

Slide 83

Slide 83

Slide 84

Slide 84

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

Slide 85

Slide 85

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

Slide 86

Slide 86

CSS https://codepen.io/andybelldesign/pen/xxKdvwy @supports (display: grid) { .auto-grid > * { max-width: unset; margin: 0; } }

Slide 87

Slide 87

22 lines of CSS No hacks Works back to IE9

Slide 88

Slide 88

Slide 89

Slide 89

Slow down

Slide 90

Slide 90

Stop Step back Think

Slide 91

Slide 91

Instead of moving fast and breaking things, move slowly and deliberately instead.

Slide 92

Slide 92

Thank you Спасибо Andy Bell @hankchizljaw https://hankchizljaw.com