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

The Expanding Boundaries of CSS

Chris Eppstein
December 04, 2015
47

The Expanding Boundaries of CSS

Is CSS a simple technology for non programmers? It certainly seems simple at first. Let's explore the boundaries of CSS and cover the ways in which those boundaries are changing and what that means for how we think about ourselves as CSS authors.

Chris Eppstein

December 04, 2015
Tweet

Transcript

  1. T H E E X PA N D I N G
    B O U N D A R I E S O F C S S
    W H E R E W E D R A W T H E L I N E S I S C H A N G I N G :
    Boundaries are tricky things and when you play with them, people develop feelings. I want us to talk today about the boundaries we’ve drawn around CSS
    and how I’ve seen and helped them change over the last decade and where I see them going. But I also want to talk about how these boundaries affect us
    as people; how we see ourselves. how they can affect our lives and careers in real, tangible ways.

    View Slide

  2. B E R T B O S
    T H U S S PA K E T H E C O - C R E A T O R O F C S S
    Read
    Full
    Article
    Not long after I got involved in Sass, I found this article by Bert Bos, one of the co-creators of CSS. Everyone here should read it. It’s not very long.

    View Slide

  3. T H E C S S D E S I G N P H I L O S O P H Y
    Original
    ^

    View Slide

  4. I N T E N D E D
    A U D I E N C E
    W H O I S T H E
    O F C S S ?

    View Slide

  5. “ syntax was considered to be
    unsuitable for non-programmers.”
    – H Å K O N W I U M L I E , P H . D . T H E S I S O N C S S

    View Slide

  6. N O N P R O G R A M M E R S

    View Slide

  7. W H AT I S
    P R O G R A M M I N G ?

    View Slide

  8. P R O G R A M M I N G I S : M O V I N G D ATA
    D ATA T R A N F O R M D ATA
    Programming

    View Slide

  9. P R O G R A M M I N G I S : M O V I N G D ATA
    Programming
    function fibonacci(n) {
    if (n == 1 or n == 0) {
    return n
    } else {
    return fibonacci(n - 1) +
    fibonacci(n - 2)
    }
    }
    Data IN 0 1 2 3 4 5 6 7 …
    0 1 1 2 3 5 8 1 3 …
    Data OUT

    View Slide

  10. D ATA M O V E S
    • From DB to “Object”
    • From “Object” to HTML
    • From Server to Browser
    • From Browser to Screen

    View Slide

  11. A C S S F I L E
    T R A N S F O R M S
    H T M L D ATA
    I N T O
    P I X E L D ATA
    I contend that authoring stylesheets is a kind of software development

    View Slide

  12. “A non-turing-complete declarative language.”
    – H Å K O N W I U M L I E , P H . D . T H E S I S O N C S S
    read the paragraph

    View Slide

  13. T U R I N G
    C O M P L E T E ?
    W H A T I S
    & W H Y D O P E O P L E C A R E
    A B O U T I T ?

    View Slide

  14. T U R I N G M A C H I N E
    A turing machine is a theoretical computer that is constructed of concepts that are convenient to reason about in formal proofs in computer science. It has
    instructions and an infinitely long tape on which symbols can be written and erased (storage).
    Someone actually built one recently, but the irony of this is that it takes modern technology and powerful computers to actually realize it as a physical
    device.

    View Slide

  15. A L A N G U A G E I S “ T U R I N G
    C O M P L E T E ” W H E N I T C A N
    C O M P U T E A N Y T H I N G T H AT A
    T U R I N G M A C H I N E C A N
    C O M P U T E .

    View Slide

  16. T H I N G S A T U R I N G M A C H I N E C A N D O :
    • Looping
    • Branching
    • Calculate anything a modern computer can
    • Run forever

    View Slide

  17. T H I N G S A T U R I N G M A C H I N E C A N ’ T D O :
    • Analyze another Turing machine and determine
    whether it will ever stop.
    • In general, computers cannot analyze arbitrary
    programs and decide if they will do anything in
    particular without actually running them.
    Congratulations if you weren’t already, you are now a computer scientist!

    View Slide

  18. View Slide

  19. The following page would hang if it was ran. Contact
    the author to correct the issue.
    (infinite_loop.js:19)

    View Slide

  20. N O T B E I N G T U R I N G C O M P L E T E
    M E A N S P R O G R A M S C A N R E A S O N
    A B O U T C S S .

    View Slide

  21. “A programming language would have been a
    more powerful solution, but it comes at a cost;
    programs are difficult to read and expensive to
    maintain.”

    View Slide

  22. T L ; D R
    Programming is hard.
    Styling should be easy.
    Therefore: Styling should not be programming.

    View Slide

  23. H A R D
    P R O G R A M M I N G I S

    View Slide

  24. S H O U L D
    S T Y L I N G
    B E E A S Y

    View Slide

  25. W H Y S H O U L D S T Y L I N G
    B E E A S Y ?

    View Slide

  26. P R O G R A M M E R S T H I N K
    D E S I G N I S E A S Y
    I H A V E A S N E A K I N G S U S P I C I O N T H A T I T ’ S B E C A U S E

    View Slide

  27. P R O G R A M M E R S T H I N K
    D E S I G N I S A N N O Y I N G
    O R M A Y B E I T ’ S B E C A U S E
    Change at the design level feels arbitrary and capricious.
    Would rather it be someone else’s problem.
    I know! Let’s make the styles the designer’s problem. if we can just make it simple enough…

    View Slide

  28. T H E K I N D O F S T Y L I N G T H AT C S S
    WA S D E S I G N E D F O R , I S E A S Y.
    O K , L E T ’ S G I V E T H E M T H E B E N E F I T O F T H E D O U B T:
    B U T T H A T ’ S N O T T H E K I N D O F S T Y L I N G W E A C T U A L LY D O N O W.

    View Slide

  29. D O C U M E N T S T Y L I N G H A S B E C O M E
    D E S I G N S Y S T E M S F O R
    H I G H LY I N T E R A C T I V E A P P L I C AT I O N S

    View Slide

  30. I T WA S A
    S I M P L E R T I M E .
    • 53 Properties.
    • Simple selectors.
    • A few at-rules.

    View Slide

  31. C O M P L E X I T Y
    O N LY I N C R E A S E S
    • CSS1: 53 Properties
    • CSS2: 122 Properties
    • CSS3: 316 Properties

    View Slide

  32. C S S I S H O W H T M L
    E L E M E N T S VA RY
    A L M O S T E V E RY H T M L E L E M E N T I S T H E S A M E

    View Slide

  33. A W E L L D E S I G N E D S Y S T E M
    A C C O U N T S F O R T H E I N C R E A S I N G
    C O M P L E X I T Y O F T H AT S Y S T E M .
    The creators of CSS are smart people and did plan for the future by adding parsing semantics that can handle unknown parts of a CSS file (progressive
    enhancement).

    View Slide

  34. W E C A N N O T R E A S O N A B O U T A
    C O M P L E X S Y S T E M W I T H O U T
    D E C O M P O S I N G I T
    By shunning all notion of abstraction and indirection, stylesheets quickly become unintelligible.

    View Slide

  35. A C O R E A S S U M P T I O N T O T H E D E S I G N
    O F C S S I S F L A W E D A N D T H O S E
    D E C I S I O N S M U S T B E R E - E VA L U AT E D
    S T Y L I N G I S N O T E A S Y
    but the downsides of this early decision to declare that CSS shall not be “programming” are not just technical.

    View Slide

  36. L A N G U A G E
    B O U N D A R I E S D E F I N E U S
    L I K E I T O R N O T

    View Slide

  37. Front-End Developer
    Back-end Developer
    Javascript Developer
    Sass Developer
    Database Developer
    Designer
    Java Developer
    Rubyist
    Pythonista
    Data
    Scientist
    Kernel Developer
    CSS Developer
    There’s a very good chance that you identify as one or more of these.

    View Slide

  38. T H E S E L A B E L S C R E AT E A S E N S E
    O F C O M M U N I T Y A N D B E L O N G I N G
    These languages and technologies, like all labels, give us something to attach to, they give us power and a sense of belonging.

    View Slide

  39. But these boundaries affect how others view us
    but they also can surreptitiously put us into a box

    View Slide

  40. Often more than they affect how we view ourselves
    leaving that box can be scary, hard, uncomfortable.

    View Slide

  41. C S S
    H T M L
    T H E L E A R N I N G L A D D E R
    J AVA S C R I P T
    T E M P L AT I N G
    O B J E C T M O D E L
    B U S I N E S S L O G I C
    D ATA B A S E
    Many of these technologies have touch points, analogs, and visual similarities that enable learning across boundaries
    But not CSS, it is purposefully different.
    This might make sense if CSS was modeled according to how designers work and think about design — but it’s not.

    View Slide

  42. C S S
    H T M L
    T H E L E A R N I N G L A D D E R
    J AVA S C R I P T
    T E M P L AT I N G
    O B J E C T M O D E L
    B U S I N E S S L O G I C
    D ATA B A S E

    View Slide

  43. S A S S
    H T M L
    T H E L E A R N I N G L A D D E R
    J AVA S C R I P T
    T E M P L AT I N G
    O B J E C T M O D E L
    B U S I N E S S L O G I C
    D ATA B A S E

    View Slide

  44. – N I C O L E S U L L I VA N , C R E AT O R O O C S S
    “I had done a little Java but it felt so abstract.
    Learning Sass connected programming concepts to
    a domain in which I was already competent. I knew
    CSS so I could tell if my Sass output was right.”
    I have heard this story over and over again. “I was *just* a css developer, but once I learned Sass, it unlocked programming for me”.

    View Slide

  45. S A S S M O V E D T H E
    B O U N D A R I E S O F S T Y L E S H E E T S

    View Slide

  46. S A S S P R O V I D E D T H E T H I N G S C S S
    W O U L D N ’ T.
    Macros
    Additional Scopes
    Indirections
    Symbolic Constants
    Alternative to CSS
    Sass appears to be the alternative solution that Bert was recommending. That we keep CSS “simple” and let another technology fill this gap.

    View Slide

  47. A N D I T B O T H E R E D
    P E O P L E .
    S A S S M O V E D T H E B O U N D A R I E S O F C S S

    View Slide

  48. U N S U I TA B L E F O R T H E
    TA R G E T A U D I E N C E ?
    P R E D I C T I O N :

    View Slide

  49. S A S S G I V E S T H E T O O L S
    N E E D E D T O E X P R E S S
    T H E R E L AT I O N S H I P S
    I N T R I N S I C I N A D E S I G N
    S Y S T E M
    N O !

    View Slide

  50. C S S I S
    C H A N G I N G
    N O W.
    D U E I N PA R T T O T H E W I D E
    A D O P T I O N O F S A S S

    View Slide

  51. D E V E L O P F E AT U R E S T H AT E X P O S E
    T H E “ M A G I C ” O F S T Y L I N G A N D
    L AY O U T O N T H E W E B .
    C S S H O U D I N I

    View Slide

  52. H O U D I N I I S T H E C S S R E S P O N S E T O
    T H E E X T E N S I B L E W E B M A N I F E S T O
    In 2013, I was one of the original co-signers of the extensible web manifesto. I strongly believe in the mission of making the underpinnings of web
    browsers more accessible to web developers.

    View Slide

  53. C S S C U S T O M P R O P E R T I E S ( V 2 )
    C S S H O U D I N I E X A M P L E

    View Slide

  54. C S S C U S T O M PA I N T
    C S S H O U D I N I E X A M P L E

    View Slide

  55. M O V E S T H E B O U N D A RY
    O F T H E B R O W S E R E N G I N E
    T H E E X T E N S I B L E W E B M A N I F E S T O
    no longer will browser features be across the language divide from javascript to languages like C++ and this is hugely empowering for the web platform.

    View Slide

  56. H O U D I N I W I L L U N L O C K C S S A N D
    M A K E I T E X T E N S I B L E T O W E B
    D E V E L O P E R S .

    View Slide

  57. H O U D I N I I S S T I L L A C R O S S A
    B O U N D A RY F O R C S S D E V E L O P E R S
    B U T T H E R E I S A P R O B L E M :

    View Slide

  58. H O U D I N I , L I K E P O S T C S S , P U T S
    E X T E N S I B I L I T Y I N T H E H A N D S O F
    J AVA S C R I P T.
    this makes good sense, especially if you’re great at javascript. Javascript is a great language, certainly far better than SassScript for complex programming
    tasks.
    But forcing CSS developers to cross the technology boundary in order to extend their own environment puts many of them back into the same box they
    have always been.

    View Slide

  59. S A S S ’ S S U C C E S S P R O V E S T H AT
    N AT I V E E X T E N S I B I L I T Y I S B O T H
    V I A B L E A N D B E N E F I C I A L

    View Slide

  60. W E C A N M A K E
    T H E W E B M O R E
    L E A R N A B L E
    W E C A N D O M O R E T H A N M A K E
    T H E W E B M O R E E X T E N S I B L E

    View Slide

  61. N O T E V E RY O N E N E E D S O R WA N T S
    T O M O V E “ D O W N T H E S TA C K ”
    T O B E C L E A R
    there is no *just* about being a CSS developer. Stylesheet development is a rich and rewarding career.

    View Slide

  62. T H E B O U N D A R I E S O F C S S
    A N D T H E W E B A R E M O V I N G
    The design of CSS can be multi-faceted and serve many goals. We can make CSS more extensible, more organizable, and one side effect of this is that for
    those who do find joy in more traditional software development, can transition to that.

    View Slide

  63. B U T A R E T H E Y M O V I N G
    FA R E N O U G H ?
    I hope that we will at least think long and hard about the consequences of where we draw these boundaries.

    View Slide

  64. T H E R A M I F I C AT I O N S A R E M U C H
    B I G G E R T H A N W E M I G H T T H I N K .
    How many CSS authors are not paid a developers salary because the management doesn’t think it’s “programming”?
    Why are more women in CSS development than other areas of web technology? Is it because that’s where they want to be or is it because our views of
    gender and our views of CSS have overlapping stereotypes?

    View Slide

  65. W E C A N D O B E T T E R A N D
    I ’ M C O N F I D E N T T H AT W E W I L L .
    All the signs are looking up but we can’t just wait for it to happen. Get involved in the spec process. Houdini is a massive step, with our feedback we can
    make sure it’s in the right direction.

    View Slide

  66. T H A N K Y O U !

    View Slide

  67. Photo Credits:

    View Slide