A Ghost Story of CSS

A presentation at Fronteers Conference 2017 in October 2017 in Amsterdam, Netherlands by Stephen Hay

Slide 1

Slide 1

A Ghost Story as told by Stephen Hay at Fronteers 2017 @stephenhay of CSS

Slide 2

Slide 2

A Christmas Carol in Prose, 
 Being a Ghost-Story of Christmas

Slide 3

Slide 3

Ghost of

CSS Past

Slide 4

Slide 4

Photo by Alper Çu ğ un: https://www.flickr.com/photos/alper/1403915234/

Slide 5

Slide 5

Photo by Alper Çu ğ un: https://www.flickr.com/photos/alper/1403915234/ AARGGH! My left hand is gone!

Slide 6

Slide 6

Photo by Bart: https://www.flickr.com/photos/acbo/1470718525/

Slide 7

Slide 7

Slide 8

Slide 8

OH NO! There goes my 
 Template Layout spec!

Slide 9

Slide 9

Photo by RobertG NL: https://www.flickr.com/photos/blueace/2847704261

Slide 10

Slide 10

Photo by RobertG NL: https://www.flickr.com/photos/blueace/2847704261

Slide 11

Slide 11

Slide 12

Slide 12

Slide 13

Slide 13

Slide 14

Slide 14

Slide 15

Slide 15

Slide 16

Slide 16

Slide 17

Slide 17

Slide 18

Slide 18

Slide 19

Slide 19

Slide 20

Slide 20

Slide 21

Slide 21

Slide 22

Slide 22

Slide 23

Slide 23

Slide 24

Slide 24

Slide 25

Slide 25

Slide 26

Slide 26

Slide 27

Slide 27

Slide 28

Slide 28

Slide 29

Slide 29

CSS Hacks

Slide 30

Slide 30

Slide 31

Slide 31

Slide 32

Slide 32

Ingenuity

Slide 33

Slide 33

https://alistapart.com/article/slidingdoors

Slide 34

Slide 34

“Rounded corners”

Slide 35

Slide 35

Slide 36

Slide 36

Slide 37

Slide 37

Slide 38

Slide 38

Slide 39

Slide 39

2012

Slide 40

Slide 40

Slide 41

Slide 41

Layout

Slide 42

Slide 42

Slide 43

Slide 43

Slide 44

Slide 44

Slide 45

Slide 45

Slide 46

Slide 46

Slide 47

Slide 47

Slide 48

Slide 48

Slide 49

Slide 49

Slide 50

Slide 50

Media queries and responsive design

Slide 51

Slide 51

Slide 52

Slide 52

Slide 53

Slide 53

Design systems and components

Slide 54

Slide 54

Slide 55

Slide 55

Slide 56

Slide 56

Developer tools

Slide 57

Slide 57

Preprocessors

Slide 58

Slide 58

Slide 59

Slide 59

Photo by RobertG NL: https://www.flickr.com/photos/blueace/2847704261

Slide 60

Slide 60

Functionally Cool Style Sheets

Slide 61

Slide 61

FuCSS Functionally Cool Style Sheets

Slide 62

Slide 62

A lot has happened 
 in 10 years. Multiple backgrounds, animations, transitions, filters, variables, calc(), more selectors, etc.

Slide 63

Slide 63

Ghost of

CSS Present

Slide 64

Slide 64

Slide 65

Slide 65

source: HTTP Archive

Slide 66

Slide 66

source: HTTP Archive

Slide 67

Slide 67

Fighting against CSS

Slide 68

Slide 68

Slide 69

Slide 69

https://acss.io/

Slide 70

Slide 70

https://acss.io/

Slide 71

Slide 71

What problem are we solving?

Slide 72

Slide 72

50 lies programmers believe, #20 https://tommorris.org/posts/9317 CSS can be “object-oriented” or “functional” rather than a declarative rules language with a moderately complex inheritance model.

Slide 73

Slide 73

We seem to want CSS 
 to be a programming language.

Slide 74

Slide 74

Slide 75

Slide 75

Our concerns have shifted from techniques to processes.

Slide 76

Slide 76

Ghost of

CSS Yet to Come

Slide 77

Slide 77

Ghost of

CSS Yet to Come

Slide 78

Slide 78

The basics are in place. Layout 
 (Responsive) Images 
 Colour 
 Typography 
 Motion

Slide 79

Slide 79

www.w3.org/Style/ CSS/current-work

Slide 80

Slide 80

CSS and developer tools will be more frequently used as design tools.

Slide 81

Slide 81

Here’s the real challenge:

Slide 82

Slide 82

From techniques to processes, 
 from processes to people. Respect and collaboration.

Slide 83

Slide 83

We need to remember that all of this is by people, for people, and about people.

Slide 84

Slide 84

All of the real problems are people problems.

Slide 85

Slide 85

Slide 86

Slide 86

Someone on Twitter, 
 demonstrating skilful debate and formidable social prowess.

Slide 87

Slide 87

Someone on Twitter, 
 demonstrating skilful debate and formidable social prowess.

Slide 88

Slide 88

Slide 89

Slide 89

Try this: defend your opponent’s position and see what you learn from it.

Slide 90

Slide 90

Learn from each other. Keep it fun!

Slide 91

Slide 91

0 10 20 30 40 50 HTML CSS JavaScript Browsers Standards Performance Type/fonts Responsive / Mobile Accessibility SVG Other 10 years of Fronteers talks

Slide 92

Slide 92

Slide 93

Slide 93

Slide 94

Slide 94

I declare myself the victor of this conference 
 and I’m going to celebrate in Amsterdam.

Slide 95

Slide 95

Thank you. @stephenhay