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. The Ideal Styling Language:
    A Gedankenexperiment
    @SEREEENA | CSSCONFAU 2016

    View full-size slide

  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.

    View full-size slide

  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:

    View full-size slide

  4. It's hard to write maintainable
    CSS at scale.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. Our ideal language should
    eliminate specificity wars.

    View full-size slide

  8. Let’s embark on a thought experiment...

    View full-size slide

  9. What would CSS look like if it
    were written today?

    View full-size slide

  10. (Probably JavaScript)

    View full-size slide

  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.

    View full-size slide

  12. cascade bahaviour
    selector behaviour
    scoping behaviour

    View full-size slide

  13. The ideal cascade

    View full-size slide

  14. Wait, what is the cascade again?
    The cascade is how the browser decides which CSS rules
    take precedent, depending on origin.

    View full-size slide

  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

    View full-size slide

  16. People are afraid of the cascade.

    View full-size slide

  17. The cascade is actually super
    useful.

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  20. The ideal selector

    View full-size slide

  21. Ideal selector criteria
    Separation of concerns
    Reusability (and DRY code)
    Efficiency

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  25. Reusability or Separation of Concerns;
    choose one

    View full-size slide

  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);
    }

    View full-size slide

  27. Mixins in your precompiler means less
    repetition in development
    What happens when we use it in native
    CSS?

    View full-size slide

  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;
    }

    View full-size slide

  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;
    }

    View full-size slide

  30. No styling in markup? Check.
    Highly reusable code? Check.
    Letting our hair down and using IDs? CHECK

    View full-size slide

  31. The ideal scoping
    behaviour

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  34. :(
    What do we do?

    View full-size slide

  35. The C in CSS

    View full-size slide

  36. The cascade:
    1. User agent
    2. User
    3. Author
    4. CSS Animations (doesn't cascade)

    View full-size slide

  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)

    View full-size slide

  38. z‑index: 9999999;

    View full-size slide

  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)

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  42. But the main thing I learned...

    View full-size slide

  43. CSS is not dead.

    View full-size slide