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

CSS-in-JS: FTW || WTF?

6f3ec7315ad0715ae2a5f89a52877218?s=47 bruce lawson
June 15, 2018

CSS-in-JS: FTW || WTF?

CSS Day, Amsterdam, June 2018.


bruce lawson

June 15, 2018


  1. @brucel

  2. @brucel

  3. @brucel

  4. @brucel

  5. @brucel

  6. @brucel

  7. @brucel

  8. @brucel CSS-in-JS

  9. @brucel document.tags.H1.fontSize = "20pt";

  10. @brucel Cascading HTML style sheets proposal font.family = times font.size

    = 12pt h1.font.size = font.size * 3 h2.font.size = font.size * 2.5 h3.font.size = font.size * 2 strong.font.weight = bold space.above = 4pt space.below = 4pt space.first = space.left + 0.5cm # i.e. some extra indentation head.space.above = 15pt # straying from the 4pt default above https://www.w3.org/People/howcome/p/cascade.html
  11. @brucel

  12. @brucel Håkon Wium Lie When I first proposed CSS, JavaScript

    was not around so I couldn’t borrow it from there. Rather, the syntax was inspired by X resources from the X11 Window System. The reason for changing the CSS syntax from font.size to font- size was twofold. First, the hyphen makes it look more like written English, which improves human readability. Second, DSSSL and DSSSL-Lite used hyphenated property names. https://dev.opera.com/articles/css-twenty-years-hakon/
  13. @brucel Culture Clash

  14. @brucel

  15. @brucel John Allsopp

  16. @brucel Gandallsopp: “Question after question, of course, is “how do

    I?”. But beneath questions like “how do I make my pages look the same on every platform” and “how can I make my fonts appear identical on the Macintosh and Windows” is an underlying question – “how do I control the user’s browser?” Indeed, the word control turns up with surprising frequency. Underpinning all this is the belief that designers are controllers.
  17. @brucel Håkon One quite specific goal of CSS was to

    *not* create a programming language. DSSSL was emerging from the SGML world and that scared us. So did the Turing- completeness. In short, you can't tell if a program will terminate or not -- you could end up in endless loops. Therefore we chose a simpler model where you just made declarations. - personal correspondace, Bruce and Håkon Wium Lie
  18. @brucel DSSSL DSSSL did, unfortunately, have the fatal flaw which

    would plague all Scheme like languages: too many parenthesis. Additionally, it was arguably too complete of a spec when it was finally published, making it intimidating to browser developers. The DSSSL spec included over 210 separate styleable properties. The Languages Which Almost Became CSS - Zack Bloom
  19. @brucel Y U NO GIVE PARENT SELECTORS? A parent selector

    would mean that styles would have to be updated as the HTML document loads. Languages like DSSSL were completely out, as they could perform operations on the document itself, which would not be entirely available when the rendering is to begin. https://eager.io/blog/the-languages-which-almost-were-css/
  20. @brucel Sir Uncle Timbo’s design principles I chose HTML not

    to be a programming language because I wanted different programs to do different things with it: present it differently, extract tables of contents, index it, and so on. Sir Uncle Timbo https://www.w3.org/DesignIssues/Principles.html#PLP
  21. @brucel Principle of Least Power The choice of language is

    a common design choice. The low power end of the scale is typically simpler to design, implement and use, but the high power end of the scale has all the attraction of being an open-ended hook into which anything can be placed: a door to uses bounded only by the imagination of the programmer. Sir Uncle Timbo https://www.w3.org/DesignIssues/Principles.html#PLP
  22. @brucel

  23. @brucel Why does this conundrum resonate so universally with people

    who have used CSS? CSS is hard because its properties interact, often in unexpected ways. Because when you set one of them, you're never just setting that one thing. That one thing combines and bounces off of and contradicts with a dozen other things, including default things that you never actually set yourself. https://css-tricks.com/css-is-awesome/
  24. @brucel Design creator “at the time it just blew my

    mind that someone thought the default behavior should be to just have the text honk right out of the box, instead of just making the box bigger like my nice, sensible tables had always done.” - Steven Frank https://css-tricks.com/css-is-awesome/#comment-1609829
  25. @brucel CSS is bad “The picture fails to capture all

    the ways in which CSS is bad. You are right. overflow is easy to deal with. Others (specificity, alignment, box sizing models, maintainability of large stylesheets, obscure hidden rules and assumptions, etc.) are numerous and overwhelming.” https://twitter.com/JohnHargrove/status/985630830704852998
  26. @brucel Inheritance and Cascade We also added [a] fairly complex

    mechanism to CSS: inheritance and cascading. Inheritance was/is is fairly well understood, it's used in many other computer languages as well. Cascading, however, was something new and in some ways it competes with inheritance. I can see reasons for not liking it, but to me the benefit of not having to provide complete style sheets makes up for that. Howcome, June 2018, private conversation
  27. @brucel CSS *is* awesome! One rule of thumb for mitigating

    this is, never be more explicit than you need to be... Work with CSS, instead of against it. CSS is weird. It's unlike any other code, and that makes a lot of programmers uncomfortable. But used wisely it can, in fact, be awesome. Brandon Smith https://css-tricks.com/css-is-awesome/
  28. @brucel The era of components

  29. @brucel

  30. @brucel

  31. @brucel

  32. @brucel

  33. @brucel • Something about being convinced by component-based architecture

  34. @brucel Because of • Re-usability • Composability • Testability •

  35. @brucel Thanks Cristiano Rastelli (@areaweb)

  36. @brucel

  37. @brucel Why is CSS for components a PITA? • Everything

    is global • Order affects cascade • Dependency system - @import • Relies on markup structure (classes, IDs, descendant/ strucural combinators) • Breaks silently
  38. @brucel

  39. @brucel

  40. @brucel • There is a tremendous amount of memorization of

    unexpected behaviors, rules, names and other idiosyncrasies. It's amazingly powerful, for sure, but it is loaded with cruft https://twitter.com/JohnHargrove/status/985631372764221440
  41. @brucel Et tu, Specificity? As we all (should) probably know

    by now, specificity is is one of CSS’ most troublesome features, and is an area that soon becomes hard to manage on projects of any reasonable size. Specificity is a trait best avoided, which is why we don’t use IDs in CSS, and we don’t nest selectors unless absolutely necessary. Harry Roberts, October 2014 https://csswizardry.com/2014/10/the-specificity-graph/
  42. @brucel Good old CSS: • IDE support • syntax highlighting

    • code completions • validations • CSS generators • huge community
  43. @brucel

  44. @brucel

  45. @brucel Designers, designers, designers, designers

  46. @brucel What’s your biggest gripe w/ CSS-in-JS? “Always having to

    remember to camelCase properties then spending 10min pulling hair out when you do forget” “the cryptic domain-specific languages that each of the frameworks do just ever so slightly differently”
  47. @brucel https://twitter.com/_philpl/status/935656757942251520 “When I test look and feel in browser,

    then I copy paste from inspector, only to have to re-write it as a JSON object” “Lack of linting, autocomplete, and css plug-ins for colors/ incrementing/ etc”. “Not a gripe. But a concern: Performance.”
  48. @brucel CSS-in-JS costs us! • Loading JS library to handle

    CSS creation at runtime • Creating / modifying stylesheets at runtime • Server-Side Rendering = CSS × 2
  49. @brucel

  50. @brucel

  51. @brucel Totez!

  52. @brucel Totez!

  53. @brucel Totez!

  54. @brucel

  55. @brucel

  56. @brucel Ido’s dream • Modular • Dynamic • Performant •

    CSS capabilities • Tooling • Customisation
  57. @brucel Introducing Stylable is a CSS preprocessor for styling components

    with typed CSS.
  58. @brucel

  59. @brucel Introducing Mr. Potato Mr Potato is a (React) component.

  60. @brucel Sane APIs We use React and Typescript to provide

    an API for component logic
  61. @brucel A bucket of parts The great thing about Mr.

    Potato is that all of his parts are reusable and customizable
  62. @brucel Personalizing a Potato-Bruce Extending a component’s interface

  63. @brucel {Mohawk: required;}

  64. @brucel

  65. @brucel Custom Pseudo-Elements Exposing internal parts all the way down

  66. @brucel Custom States Use custom states with parameters

  67. @brucel Custom States Use custom states with parameters

  68. @brucel CSSWG > “A future version of this specification may

    allow multiple pseudo-elements per selector." > What's the reason for that? What's the reason it's not currently allowed? Pseudo-elements aren't just filtering which element is selected: they actually create structure in the box tree. So if we have a pseudo element attached to a pseudo-element, it creates a box structure that doesn't currently exist, and pseudo-element box structures can be particularly intricate and complicated to implement since many of them don't fit into the box's tree structure. Therefore we intend to only allow specific combinations--those that are needed for particular use cases.
  69. @brucel Latest Spec (30 May 18) https://drafts.csswg.org/selectors-4/#pseudo-element-structure

  70. @brucel Mix it all together

  71. @brucel

  72. @brucel Extra happy in Amsterdam .backdrop:in(amsterdam) ~ .potatoBruce:mood(happy) ::mouth::after {

    content:”??????” }
  73. @brucel

  74. @brucel

  75. @brucel

  76. @brucel Try it out! potatobruce.io stylable.io @stylableio

  77. @brucel A type system for CSS • §

  78. @brucel A type system for CSS • CSS Superset •

    Inner parts as Pseudo-Elements • Create custom Pseudo-Classes • Type aware dependencies • IDE & Build support • Optimization - "ruleset shaking"
  79. @brucel Status of Stylable • Pseudo- Elements & Classes •

    Imports • Mixins • VSCode Extension • Integration - React, Webpack, Jest, Node ...
  80. @brucel W.I.P. • Declaration Interfaces (allowing/ disallowing overwriting of styles)

    • MOAR Integrations • Dogfooding and battle-testing • Web Components Compatibility, Houdini (Roadmap)
  81. @brucel Number One Priority • 120 million registered users •

    CSS Grid
  82. @brucel James Kyle “pretty sure all the CSS-in-JS libraries just

    died for me ... CSS could be perfectly static if given the right tools, that's exactly what stylable does. It gives you the tools you need in CSS so that you don't need to do a bunch of dynamic shit in JS. Making it static is a huge performance win” core team member of Yarn, Babel and TC39 https://twitter.com/jamiebuilds/status/929675977067655170
  83. @brucel

  84. @brucel

  85. @brucel

  86. @brucel Get ‘em while they’re hot • Stylable docs -

    Stylable.io • Stylable repo - github.com/wix/stylable
  87. @brucel

  88. @brucel James Kyle again https://twitter.com/jamiebuilds/status/988839821887107072

  89. @brucel

  90. @brucel “CSS Blocks implements a strict subset of CSS.” This

    means we've intentionally restricted some of the features you're allowed to use in a Block file to ensure we can optimize your stylesheets as much as possible! https://github.com/linkedin/css-blocks#its-just-css-mostly
  91. @brucel “Stylable is 100% CSS, and then some” “In case

    I didn’t say it before, I’ll say it again: with Stylable, you get CSS, and every part of CSS. This seems like a “duh” observation, but this is significant if you’ve ever battled with a CSS-in-JS framework over a lost or “hacky” implementation of a basic CSS feature. If this is all you’re looking for, stop reading here and try it out!” Drew Powers https://blog.envylabs.com/stylable-the-good-the-bad-the-weird-f1ee137311a4
  92. @brucel

  93. @brucel

  94. @brucel Goodbye, :shadow and /deep/ These were shadow-piercing selectors that

    allowed you to target any node in an element’s Shadow DOM. Apart from being terribad for performance, they also required the user of an element to be intimately familiar with some random element’s implementation, which was unlikely and lead to them just breaking the whole element by accident. Monica Dinculescu
  95. @brucel Hello, ::part and ::theme Unlike :shadow and /deep/, they

    don’t allow you to style arbitrary elements inside a shadow tree: they only allow you to style elements that an author has tagged as being eligible for styling This is a lot of effort on the element author, but easy on the theme user. https://meowni.ca/posts/part-theme-explainer/
  96. @brucel

  97. @brucel

  98. @brucel

  99. @brucel Houdini: JS-in-your-CSS! Custom Paint: .myThing {background: paint(nice-thing);} Custom Layout:

    .myMasonry div {display: layout(masonry);} .. and many more! (Ask Greg!)
  100. @brucel

  101. @brucel b • web comping

  102. @brucel

  103. @brucel Thank you! Håkon Wium Lie, John Allsopp, @wixeng Stylable

    team (especially Tom and Lichtash) ! https://pixabay.com/en/potatoes-vegetables-erdfrucht-bio-1585060/ ! https://www.pexels.com/photo/photo-of-eiffel-tower-paris-811715/ ! https://thenounproject.com/icon/38411/ ! https://pixabay.com/en/eiffel-tower-long-exposure-lights-1156146/ No potatoes were harmed during the making of this presentation.