A Ghost Story of CSS

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

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

Ghost of

CSS Past

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

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

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

OH NO! There goes my   Template Layout spec!

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

CSS Hacks

Ingenuity

https://alistapart.com/article/slidingdoors

“Rounded corners”

2012

Layout

Media queries and responsive design

Design systems and components

Developer tools

Preprocessors

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

Functionally Cool Style Sheets

FuCSS Functionally Cool Style Sheets

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

Ghost of

CSS Present

source: HTTP Archive

Fighting against CSS

https://acss.io/

What problem are we solving?

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.

We seem to want CSS   to be a programming language.

Our concerns have shifted from techniques to processes.

Ghost of

CSS Yet to Come

Ghost of

CSS Yet to Come

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

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

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

Here’s the real challenge:

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

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

All of the real problems are people problems.

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

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

Learn from each other. Keep it fun!

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

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

Thank you. @stephenhay