The Ideal Styling Language — CSSConfAu 2016

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

C2817e27f333415dec3be6e5b805469a?s=128

Serena Chen

November 30, 2016
Tweet

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!