The Expanding Boundaries of CSS

Slide 1

Slide 1 text

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.

Slide 2

Slide 2 text

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.

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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 ?

Slide 5

Slide 5 text

“ 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

Slide 6

Slide 6 text

N O N P R O G R A M M E R S

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

“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

Slide 13

Slide 13 text

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 ?

Slide 14

Slide 14 text

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.

Slide 15

Slide 15 text

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 .

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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!

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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 .

Slide 21

Slide 21 text

“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.”

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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…

Slide 28

Slide 28 text

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.

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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 • CSS2: 122 Properties • CSS3: 316 Properties

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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).

Slide 34

Slide 34 text

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.

Slide 35

Slide 35 text

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.

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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.

Slide 38

Slide 38 text

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.

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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 L B 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.

Slide 42

Slide 42 text

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 L B U S I N E S S L O G I C D ATA B A S E

Slide 43

Slide 43 text

S A 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 L B U S I N E S S L O G I C D ATA B A S E

Slide 44

Slide 44 text

– 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”.

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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.

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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 :

Slide 49

Slide 49 text

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 !

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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.

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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.

Slide 56

Slide 56 text

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 .

Slide 57

Slide 57 text

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 :

Slide 58

Slide 58 text

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.

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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.

Slide 62

Slide 62 text

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.

Slide 63

Slide 63 text

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.

Slide 64

Slide 64 text

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?

Slide 65

Slide 65 text

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.