The Expanding Boundaries of CSS

T H E E X PA N D I N G
B O U N D A R I E S O F C S S
W H E R E W E D R A W T H E L I N E S I S C H A N G I N G :
Boundaries are tricky things and when you play with them, people develop feelings. I want us to talk today about the boundaries we’ve drawn around CSS
and how I’ve seen and helped them change over the last decade and where I see them going. But I also want to talk about how these boundaries affect us
as people; how we see ourselves. how they can affect our lives and careers in real, tangible ways.

B E R T B O S
T H U S S PA K E T H E C O - C R E A T O R O F C S S
Read
Full
Article
Not long after I got involved in Sass, I found this article by Bert Bos, one of the co-creators of CSS. Everyone here should read it. It’s not very long.

T H E C S S D E S I G N P H I L O S O P H Y
Original
^

I N T E N D E D
A U D I E N C E
W H O I S T H E
O F C S S ?

“<CSS alternative> syntax was considered to be
unsuitable for non-programmers.”
– H Å K O N W I U M L I E , P H . D . T H E S I S O N C S S

W H AT I S
P R O G R A M M I N G ?

P R O G R A M M I N G I S : M O V I N G D ATA
D ATA T R A N F O R M D ATA
Programming

P R O G R A M M I N G I S : M O V I N G D ATA
Programming
function fibonacci(n) {
if (n == 1 or n == 0) {
return n
} else {
return fibonacci(n - 1) +
fibonacci(n - 2)
}
}
Data IN 0 1 2 3 4 5 6 7 …
0 1 1 2 3 5 8 1 3 …Data OUT

D ATA M O V E S
• From DB to “Object”
• From “Object” to HTML
• From Server to Browser
• From Browser to Screen

A C S S F I L E
T R A N S F O R M S
H T M L D ATA
I N T O
P I X E L D ATA
I contend that authoring stylesheets is a kind of software development

“A non-turing-complete declarative language.”
– H Å K O N W I U M L I E , P H . D . T H E S I S O N C S S
read the paragraph

T U R I N G
C O M P L E T E ?
W H A T I S
& W H Y D O P E O P L E C A R E
A B O U T I T ?

T U R I N G M A C H I N E
A turing machine is a theoretical computer that is constructed of concepts that are convenient to reason about in formal proofs in computer science. It has
instructions and an infinitely long tape on which symbols can be written and erased (storage).
Someone actually built one recently, but the irony of this is that it takes modern technology and powerful computers to actually realize it as a physical
device.

A L A N G U A G E I S “ T U R I N G
C O M P L E T E ” W H E N I T C A N
C O M P U T E A N Y T H I N G T H AT A
T U R I N G M A C H I N E C A N
C O M P U T E .

T H I N G S A T U R I N G M A C H I N E C A N D O :
• Looping
• Branching
• Calculate anything a modern computer can
• Run forever

T H I N G S A T U R I N G M A C H I N E C A N ’ T D O :
• Analyze another Turing machine and determine
whether it will ever stop.
• In general, computers cannot analyze arbitrary
programs and decide if they will do anything in
particular without actually running them.
Congratulations if you weren’t already, you are now a computer scientist!

The Expanding Boundaries of CSS

The following page would hang if it was ran. Contact
the author to correct the issue.
(infinite_loop.js:19)

N O T B E I N G T U R I N G C O M P L E T E
M E A N S P R O G R A M S C A N R E A S O N
A B O U T C S S .

“A programming language would have been a
more powerful solution, but it comes at a cost;
programs are difficult to read and expensive to
maintain.”

T L ; D R
Programming is hard.
Styling should be easy.
Therefore: Styling should not be programming.

H A R D
P R O G R A M M I N G I S

S H O U L D
S T Y L I N G
B E E A S Y

W H Y S H O U L D S T Y L I N G
B E E A S Y ?

P R O G R A M M E R S T H I N K
D E S I G N I S E A S Y
I H A V E A S N E A K I N G S U S P I C I O N T H A T I T ’ S B E C A U S E

P R O G R A M M E R S T H I N K
D E S I G N I S A N N O Y I N G
O R M A Y B E I T ’ S B E C A U S E
Change at the design level feels arbitrary and capricious.
Would rather it be someone else’s problem.
I know! Let’s make the styles the designer’s problem. if we can just make it simple enough…

T H E K I N D O F S T Y L I N G T H AT C S S
WA S D E S I G N E D F O R , I S E A S Y.
O K , L E T ’ S G I V E T H E M T H E B E N E F I T O F T H E D O U B T:
B U T T H A T ’ S N O T T H E K I N D O F S T Y L I N G W E A C T U A L LY D O N O W.

D O C U M E N T S T Y L I N G H A S B E C O M E
D E S I G N S Y S T E M S F O R
H I G H LY I N T E R A C T I V E A P P L I C AT I O N S

I T WA S A
S I M P L E R T I M E .
• 53 Properties.
• Simple selectors.
• A few at-rules.

C O M P L E X I T Y
O N LY I N C R E A S E S
• CSS1: 53 Properties

C S S I S H O W H T M L
E L E M E N T S VA RY
A L M O S T E V E RY H T M L E L E M E N T I S T H E S A M E

A W E L L D E S I G N E D S Y S T E M
A C C O U N T S F O R T H E I N C R E A S I N G
C O M P L E X I T Y O F T H AT S Y S T E M .
The creators of CSS are smart people and did plan for the future by adding parsing semantics that can handle unknown parts of a CSS file (progressive
enhancement).

W E C A N N O T R E A S O N A B O U T A
C O M P L E X S Y S T E M W I T H O U T
D E C O M P O S I N G I T
By shunning all notion of abstraction and indirection, stylesheets quickly become unintelligible.

A C O R E A S S U M P T I O N T O T H E D E S I G N
O F C S S I S F L A W E D A N D T H O S E
D E C I S I O N S M U S T B E R E - E VA L U AT E D
S T Y L I N G I S N O T E A S Y
but the downsides of this early decision to declare that CSS shall not be “programming” are not just technical.

L A N G U A G E
B O U N D A R I E S D E F I N E U S
L I K E I T O R N O T

Front-End Developer
Back-end Developer
Javascript Developer
Sass Developer
Database Developer
Designer
Java Developer
Rubyist
Pythonista
Data
Scientist
Kernel Developer
CSS Developer
There’s a very good chance that you identify as one or more of these.

T H E S E L A B E L S C R E AT E A S E N S E
O F C O M M U N I T Y A N D B E L O N G I N G
These languages and technologies, like all labels, give us something to attach to, they give us power and a sense of belonging.

But these boundaries affect how others view us
but they also can surreptitiously put us into a box

Often more than they affect how we view ourselves
leaving that box can be scary, hard, uncomfortable.

C S S
H T M L
T H E L E A R N I N G L A D D E R
J AVA S C R I P T
T E M P L AT I N G
O B J E C T M O D E LB U S I N E S S L O G I C
D ATA B A S E
Many of these technologies have touch points, analogs, and visual similarities that enable learning across boundaries
But not CSS, it is purposefully different.
This might make sense if CSS was modeled according to how designers work and think about design — but it’s not.

C S S
H T M L
J AVA S C R I P T
T E M P L AT I N G
D ATA B A S E

S A S S
H T M L
J AVA S C R I P T
T E M P L AT I N G
D ATA B A S E

– N I C O L E S U L L I VA N , C R E AT O R O O C S S
“I had done a little Java but it felt so abstract.
Learning Sass connected programming concepts to
a domain in which I was already competent. I knew
CSS so I could tell if my Sass output was right.”
I have heard this story over and over again. “I was *just* a css developer, but once I learned Sass, it unlocked programming for me”.

S A S S M O V E D T H E
B O U N D A R I E S O F S T Y L E S H E E T S

S A S S P R O V I D E D T H E T H I N G S C S S
W O U L D N ’ T.
Macros
Additional Scopes
Indirections
Symbolic Constants
Alternative to CSS
Sass appears to be the alternative solution that Bert was recommending. That we keep CSS “simple” and let another technology fill this gap.

A N D I T B O T H E R E D
P E O P L E .
S A S S M O V E D T H E B O U N D A R I E S O F C S S

U N S U I TA B L E F O R T H E
TA R G E T A U D I E N C E ?
P R E D I C T I O N :

S A S S G I V E S T H E T O O L S
N E E D E D T O E X P R E S S
T H E R E L AT I O N S H I P S
I N T R I N S I C I N A D E S I G N
S Y S T E M
N O !

C S S I S
C H A N G I N G
N O W.
D U E I N PA R T T O T H E W I D E
A D O P T I O N O F S A S S

D E V E L O P F E AT U R E S T H AT E X P O S E
T H E “ M A G I C ” O F S T Y L I N G A N D
L AY O U T O N T H E W E B .
C S S H O U D I N I

H O U D I N I I S T H E C S S R E S P O N S E T O
T H E E X T E N S I B L E W E B M A N I F E S T O
In 2013, I was one of the original co-signers of the extensible web manifesto. I strongly believe in the mission of making the underpinnings of web
browsers more accessible to web developers.

C S S C U S T O M P R O P E R T I E S ( V 2 )
C S S H O U D I N I E X A M P L E

C S S C U S T O M PA I N T
C S S H O U D I N I E X A M P L E

M O V E S T H E B O U N D A RY
O F T H E B R O W S E R E N G I N E
T H E E X T E N S I B L E W E B M A N I F E S T O
no longer will browser features be across the language divide from javascript to languages like C++ and this is hugely empowering for the web platform.

H O U D I N I W I L L U N L O C K C S S A N D
M A K E I T E X T E N S I B L E T O W E B
D E V E L O P E R S .

H O U D I N I I S S T I L L A C R O S S A
B O U N D A RY F O R C S S D E V E L O P E R S
B U T T H E R E I S A P R O B L E M :

H O U D I N I , L I K E P O S T C S S , P U T S
E X T E N S I B I L I T Y I N T H E H A N D S O F
J AVA S C R I P T.
this makes good sense, especially if you’re great at javascript. Javascript is a great language, certainly far better than SassScript for complex programming
tasks.
But forcing CSS developers to cross the technology boundary in order to extend their own environment puts many of them back into the same box they
have always been.

S A S S ’ S S U C C E S S P R O V E S T H AT
N AT I V E E X T E N S I B I L I T Y I S B O T H
V I A B L E A N D B E N E F I C I A L

W E C A N M A K E
T H E W E B M O R E
L E A R N A B L E
W E C A N D O M O R E T H A N M A K E
T H E W E B M O R E E X T E N S I B L E

N O T E V E RY O N E N E E D S O R WA N T S
T O M O V E “ D O W N T H E S TA C K ”
T O B E C L E A R
there is no *just* about being a CSS developer. Stylesheet development is a rich and rewarding career.

T H E B O U N D A R I E S O F C S S
A N D T H E W E B A R E M O V I N G
The design of CSS can be multi-faceted and serve many goals. We can make CSS more extensible, more organizable, and one side effect of this is that for
those who do find joy in more traditional software development, can transition to that.

B U T A R E T H E Y M O V I N G
FA R E N O U G H ?
I hope that we will at least think long and hard about the consequences of where we draw these boundaries.

T H E R A M I F I C AT I O N S A R E M U C H
B I G G E R T H A N W E M I G H T T H I N K .
How many CSS authors are not paid a developers salary because the management doesn’t think it’s “programming”?
Why are more women in CSS development than other areas of web technology? Is it because that’s where they want to be or is it because our views of
gender and our views of CSS have overlapping stereotypes?

W E C A N D O B E T T E R A N D
I ’ M C O N F I D E N T T H AT W E W I L L .
All the signs are looking up but we can’t just wait for it to happen. Get involved in the spec process. Houdini is a massive step, with our feedback we can
make sure it’s in the right direction.

The Expanding Boundaries of CSS

More Related Content

Viewers also liked (9)

Similar to The Expanding Boundaries of CSS (20)

More from chriseppstein (9)

Recently uploaded (20)

The Expanding Boundaries of CSS