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

The Expanding Boundaries of CSS

Chris Eppstein
December 04, 2015
51

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 full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size slide

  19. 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 full-size slide

  20. “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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  25. 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 full-size 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 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 full-size slide

  27. 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 full-size slide

  28. 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 full-size slide

  29. 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 full-size slide

  30. 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 full-size slide

  31. 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 full-size slide

  32. 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 full-size slide

  33. 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 full-size slide

  34. 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 full-size slide

  35. 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 full-size slide

  36. 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 full-size slide

  37. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  40. 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 full-size 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

    View full-size slide

  42. 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 full-size slide

  43. – 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 full-size slide

  44. 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 full-size slide

  45. 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 full-size slide

  46. 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 full-size slide

  47. 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 full-size slide

  48. 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 full-size slide

  49. 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 full-size slide

  50. 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 full-size slide

  51. 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 full-size slide

  52. 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 full-size slide

  53. 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 full-size slide

  54. 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 full-size slide

  55. 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 full-size slide

  56. 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 full-size slide

  57. 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 full-size slide

  58. 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 full-size slide

  59. 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 full-size slide

  60. 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 full-size slide

  61. 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 full-size slide

  62. 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 full-size slide

  63. 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 full-size slide

  64. 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 full-size slide

  65. T H A N K Y O U !

    View full-size slide

  66. Photo Credits:

    View full-size slide