The Ideal Styling Language — CSSConfAu 2016

I'm not sure what happened with the processing of the PDF here...

Video of the talk can be found here: https://www.youtube.com/watch?v=uX9gijsLyzs

Transcript

1. The Ideal Styling Language: A Gedankenexperiment @SEREEENA | CSSCONFAU 2016
2. CSS: 1996 ‑ 2016 The internet was made for documents Global scope and the cascade made sense Denizens of the web have changed. Web development has changed.
3. Molding CSS to our needs SASS allowed common programming patterns such as variables, mixins (i.e. functions) and extensions. PostCSS made writing for multiple browsers more bearable CSS Modules mean the end of global namespaces. We're increasingly tacking on more solutions The core pain point of CSS is still the same:
4. It's hard to write maintainable CSS at scale.
5. Bad for maintainance? Bad at scale? Lack of scoping features Confusing behaviour of specificity, inheritance, cascade ...
6. Bad for maintainance? Bad at scale? Lack of scoping features → specificity wars Confusing behaviour of specificity, inheritance, cascade → specificity wars ...
7. Our ideal language should eliminate specificity wars.
8. Let’s embark on a thought experiment...
9. What would CSS look like if it were written today?
10. (Probably JavaScript)
11. This is not necessarily a bad thing, except when it is. Web owes its success to its accessibility. This accessibility is made possible with clear separation between content, style, and logic. This accessibility is compulsory, not a nice to have.
12. cascade bahaviour selector behaviour scoping behaviour
13. The ideal cascade
14. Wait, what is the cascade again? The cascade is how the browser decides which CSS rules take precedent, depending on origin.
15. The cascade: 1. Select element; filter rules 2. Cascade order , 1. User agent 2. User agent !important 3. User 4. Author 5. CSS Animations (doesn't cascade) 6. Author !important 7. User !important 3. Specificity W3C MDN
16. People are afraid of the cascade.
17. The cascade is actually super useful.
18. The cascade: 1. Select element; filter only rules that apply 2. Cascade order , 1. User agent 2. User agent !important 3. User 4. Author 5. CSS Animations (doesn't cascade) 6. Author !important 7. User !important 3. Specificity W3C MDN
19. The cascade: 1. Select element; filter only rules that apply 2. Cascade order 1. User agent 2. User 3. Author 4. CSS Animations (doesn't cascade) 3. Specificity
20. The ideal selector
21. Ideal selector criteria Separation of concerns Reusability (and DRY code) Efficiency
22. BEM vs Atomic CSS .button { display: inline-block; border-radius: 3px; padding: 7px 12px; border: 1px solid #D5D5D5; background-image: linear-gradient font: 700 13px/18px Helvetica, ar } .button--state-success { color: #FFF; background: #569E3D linear-gradie border-color: #4A993E; } .button--state-danger { color: #900; } BEM = block element modifier Namespacing convention where your components define classes Declarations inside that component are not reused in other components
23. BEM vs Atomic CSS .i { font-style: italic; } .b { font-weight: bold; } .underline { text-decoration: under .strike { text-decoration: line-thr .ttc { text-transform: capitalize; .ttu { text-transform: uppercase; } Atomic CSS = small reusable classes Classes define common rulesets Are applied to whichever element, whenever
24. Atomic CSS BEM Great for lightning fast prototyping Fails to separate content and style (styling in markup) Lots of repetition as you apply 10, 20 classes to each element No styling in markup, no repeated class calls Repeats heavily in CSS as code is not reused across components Can encode DOM structure in CSS class names
25. Reusability or Separation of Concerns; choose one
26. Mixins in SASS @mixin dark-background($color){ background-color: $color; color: white; text-shadow: 0 0 0.5rem black; font-weight: 700; } .box { @include dark-background(black); } .different-box { @include dark-background(blue); }
27. Mixins in your precompiler means less repetition in development What happens when we use it in native CSS?
28. Functions in native CSS is incredibly powerful @function button($color) { padding: 1em; margin: 0 1em; background-color: $color; } @function display-font { font-family: 'Playfair Display'; letterspacing: -0.01em; line-height: 1em; } .block--element { function: button(blue); function: display-font; }
29. Come at me, efficiency ! @function button($color) { padding: 1em; margin: 0 1em; background-color: $color; } @function display-font { font-family: 'Playfair Display'; letterspacing: -0.01em; line-height: 1em; } #this-specific-element { function: button(blue); function: display-font; }
30. No styling in markup? Check. Highly reusable code? Check. Letting our hair down and using IDs? CHECK
31. The ideal scoping behaviour
32. Scoping our CSS Scoping in CSS is looking to be straightforward CSS4 Selector spec introduces :scope all: initial resets all CSS properties to their browser defaults
33. Hostile environments Real problem isn't so much our scope as it is shared scope You're probably familiar with not being able to control markup or CSS No amount of well defined scope or well crafted selectors will stop someone from directly targeting your element
34. :( What do we do?
35. The C in CSS
36. The cascade: 1. User agent 2. User 3. Author 4. CSS Animations (doesn't cascade)
37. The cascade: 1. User agent 2. User 3. Author 1 ‑ Framework 4. Author 2 ‑ Third party provider 5. Author 3 ‑ In‑house dev team 6. ... 7. CSS Animations (doesn't cascade)
38. z‑index: 9999999;
39. The cascade: 1. User agent 2. User 3. Framework {parent: null} 4. Blog_theme {parent: Framework} 5. Blog_theme_yours {parent: Blog_theme}, Blog_theme_theirs {parent: Blog_theme} 6. ... 7. CSS Animations (doesn't cascade)
40. Setting the cascade Yes, can be abused, but at least it works! Encourages developers to interact with the cascade Conquering fear around the unknown
41. What does it mean for us? The cascade is powerful. It's being ignored. Stop ignoring it. CSS4 Spec is exciting! ‑‑variables, :scope... play with it! SASS 3.1 supports first class functions BEM vs Atomic is like tabs vs spaces. Pros and cons. Try both out. Don't choose one blindly. Good interfacing between HTML/CSS/JS needed for separation of concerns
42. But the main thing I learned...
43. CSS is not dead.
44. anks!