Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Ideal Styling Language — CSSConfAu 2016

Serena Chen
November 30, 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

Serena Chen

November 30, 2016
Tweet

More Decks by Serena Chen

Other Decks in Programming

Transcript

  1. 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.
  2. 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:
  3. Bad for maintainance? Bad at scale? Lack of scoping features

    Confusing behaviour of specificity, inheritance, cascade ...
  4. Bad for maintainance? Bad at scale? Lack of scoping features

    → specificity wars Confusing behaviour of specificity, inheritance, cascade → specificity wars ...
  5. 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.
  6. Wait, what is the cascade again? The cascade is how

    the browser decides which CSS rules take precedent, depending on origin.
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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); }
  14. 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; }
  15. 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; }
  16. 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
  17. 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
  18. The cascade: 1. User agent 2. User 3. Author 4.

    CSS Animations (doesn't cascade)
  19. 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)
  20. 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)
  21. Setting the cascade Yes, can be abused, but at least

    it works! Encourages developers to interact with the cascade Conquering fear around the unknown
  22. 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