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
   

   View 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 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 Slide

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

   View Slide

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

   View Slide

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

   View Slide

7. Our ideal language should
   eliminate specificity wars.
   

   View Slide

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

   View Slide

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

   View Slide

10. (Probably JavaScript)
    

    View 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 Slide

12. cascade bahaviour
    selector behaviour
    scoping behaviour
    

    View Slide

13. The ideal cascade
    

    View Slide

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

    View 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 Slide

16. People are afraid of the cascade.
    

    View Slide

17. The cascade is actually super
    useful.
    

    View 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 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 Slide

20. The ideal selector
    

    View Slide

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

    View 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 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 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 Slide

25. Reusability or Separation of Concerns;
    choose one
    

    View 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 Slide

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

    View 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 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 Slide

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

    View Slide

31. The ideal scoping
    behaviour
    

    View 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 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 Slide

34. :(
    What do we do?
    

    View Slide

35. The C in CSS
    

    View Slide

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

    View 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 Slide

38. z‑index: 9999999;
    

    View 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 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 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 Slide

42. But the main thing I learned...
    

    View Slide

43. CSS is not dead.
    

    View Slide

44. anks!
    

    View Slide