The Expanding Boundaries of CSS

Is CSS a simple technology for non programmers? It certainly seems simple at first. Let's explore the boundaries of CSS and cover the ways in which those boundaries are changing and what that means for how we think about ourselves as CSS authors.

Transcript

1. 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.
2. 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.
3. T H E C S S D E S I G N P H I L O S O P H Y Original ^
4. 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 ?
5. “<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
6. N O N P R O G R A M M E R S
7. W H AT I S P R O G R A M M I N G ?
8. 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
9. 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
10. D ATA M O V E S • From DB to “Object” • From “Object” to HTML • From Server to Browser • From Browser to Screen
11. 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
12. “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
13. 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 ?
14. 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.
15. 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 .
16. 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
17. 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!
19. The following page would hang if it was ran. Contact the author to correct the issue. (infinite_loop.js:19)
20. 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 .
21. “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.”
22. T L ; D R Programming is hard. Styling should be easy. Therefore: Styling should not be programming.
23. H A R D P R O G R A M M I N G I S
24. S H O U L D S T Y L I N G B E E A S Y
25. W H Y S H O U L D S T Y L I N G B E E A S Y ?
26. 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
27. 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…
28. 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.
29. 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
30. I T WA S A S I M P L E R T I M E . • 53 Properties. • Simple selectors. • A few at-rules.
31. 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
32. 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
33. 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).
34. 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.
35. 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.
36. 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
37. 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.
38. 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.
39. But these boundaries affect how others view us but they also can surreptitiously put us into a box
40. Often more than they affect how we view ourselves leaving that box can be scary, hard, uncomfortable.
41. 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.
42. 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
43. 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
44. – 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”.
45. 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
46. 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.
47. 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
48. 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 :
49. 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 !
50. 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
51. 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
52. 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.
53. 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
54. 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
55. 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.
56. 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 .
57. 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 :
58. 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.
59. 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
60. 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
61. 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.
62. 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.
63. 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.
64. 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?
65. 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.
66. T H A N K Y O U !
67. Photo Credits: