Pro Yearly is on sale from $80 to $50! »

React Inline Styles and the Future of CSS

5e7b5c8f18818bbead8a2093c5ca300d?s=47 Alex Lande
October 26, 2015

React Inline Styles and the Future of CSS

Writing and maintaining CSS for large applications (and large teams) can be challenging. Teams often have trouble with brittle selectors, naming collisions, specificity, and pile-ups of dead code.

After seeing these issues first-hand on large projects, I built Radium: a JavaScript library for styling React applications with inline styles. In the context of a React application, inline styling elegantly solves many of the issues with large-scale CSS. It also gives you the benefits of a CSS preprocessor like Sass, with extra power for expressive styling

In this presentation, we'll compare the benefits of approaches like Radium to some upcoming and proposed additions to the CSS specification that will help make scalable CSS easy in the future, whether you're using React or not. We'll talk about things like:

- Scoped CSS
- Shadow DOM
- CSS Variables and Custom Media Queries
- Native CSS Extends

Presented at CSS Dev Conf 2015

5e7b5c8f18818bbead8a2093c5ca300d?s=128

Alex Lande

October 26, 2015
Tweet

Transcript

  1. REACT INLINE STYLES and the FUTURE OF CSS

  2. Hey! @alexlande

  3. Seattle “Kerry Park, Start of Spring 1” by C.M. Keiner

    is licensed under CC BY 2.0
  4. Seattle “Seattle Thunderstorm 1” by C.M. Keiner is licensed under

    CC BY 2.0
  5. None
  6. REACT INLINE STYLES and the FUTURE OF CSS

  7. NO FUTURE

  8. I’m an architect, honest!

  9. You keep using that word…

  10. None
  11. Not everybody cares about CSS

  12. you don’t have to care Good architecture means

  13. STYLE GUIDE

  14. NAMING CONVENTIONS .Sidebar {} .Sidebar.isExpanded {} .Sidebar__section {} .Btn {}

    .Btn--primary {} .Btn--round {}
  15. AUTHORING GUIDELINES

  16. CODE REVIEW

  17. EVERYTHING WAS PERFECT!

  18. EVERYTHING WAS TERRIBLE!

  19. SPECIFICITY HELL

  20. SPECIFICITY HELL

  21. SPECIFICITY HELL

  22. SPECIFICITY HELL

  23. “Not bad” is not great.

  24. None
  25. CoolCorp MENU a { color: orange; }

  26. CoolCorp MENU .header a { color: white; }

  27. CoolCorp MENU SOME OPTIONS Pages

  28. CoolCorp MENU SOME OPTIONS Pages

  29. CoolCorp MENU SOME OPTIONS Pages .flyout a { color: orange;

    }
  30. CoolCorp MENU SOME OPTIONS Pages LOG IN .button { color:

    white; }
  31. CoolCorp MENU SOME OPTIONS Pages LOG IN

  32. CoolCorp MENU SOME OPTIONS Pages LOG IN .flyout .button {

    color: white; }
  33. CoolCorp MENU SOME OPTIONS Pages LOG IN .button { color:

    white !important; }
  34. CoolCorp MENU SOME OPTIONS Pages LOG IN .header .flyout .button

    { color: white; }
  35. CoolCorp MENU BUTTON BUTTON BUTTON BUTTON BUTTON BUTTON BUTTON BUTTON

    BUTTON BUTTON BUTTON BUTTON
  36. SOURCE ORDER
 WOES

  37. CoolCorp MENU SOME OPTIONS Pages .header a { color: white;

    } .flyout a { color: orange; } LOG IN
  38. CoolCorp MENU SOME OPTIONS Pages .flyout a { color: orange;

    } .header a { color: white; } LOG IN
  39. NAMING COLLISIONS

  40. It’s all globular

  41. Just give me my fix!

  42. .product-page .sidebar .btn {…}

  43. DEAD CODE

  44. DEAD CODE FOREVER

  45. IMPOSSIBLE TO CHANGE

  46. Let’s have a show of hands

  47. ✴ Specificity ✴ Source Order ✴ Naming ✴ Dead Code

    ✴ Modification
  48. BEM SMACSS OOCSS UNCSS IMMUTABLE STYLES ???

  49. A challenger appears…

  50. REACT

  51. aficionado: one with afición

  52. Components all the way down

  53. <button type="button" class="button"> Click me! </button>

  54. <Button>Click me!</Button>

  55. <div class="flyout"> <i class="flyout-caret"></i> <h3 class="flyout-title">Hey!</h3> <div class="flyout-modal"> Content! </div>

    </div>
  56. <Flyout title="Hey!"> Content! </Flyout>

  57. A BETTER TOMORROW

  58. AN INTERESTING STORY

  59. Christopher “vjeux” Chedeau React: CSS in JS

  60. Plan • Problems with CSS at scale 1. Global Namespace

    2. Dependencies 3. Dead Code Elimination 4. Minification 5. Sharing Constants 6. Non-deterministic Resolution 7. Isolation
  61. ✴ Specificity ✴ Source Order ✴ Naming ✴ Dead Code

    ✴ Modification 1. Global Namespace 2. Dependencies 3. Dead Code Elimination 4. Minification 5. Sharing Constants 6. Non-deterministic Resolution 7. Isolation
  62. JS Everything!

  63. COLIN HAS A QUESTION @colinmegill

  64. Have you seen this talk? It’s pretty cool! I don’t

    know how practical it is. So, what’s missing?
  65. WE CALLED IT RADIUM

  66. So how does it work, then?

  67. <div>JSX</div>

  68. var styles = { color: "#333" } <div style={styles}>

  69. No Selectors, No Semicolons, No Mercy

  70. REGISTER styles = { background: "green", padding: "1rem" }

  71. REGISTER <Button>Register</Button>

  72. VARIABLES

  73. NO SPECIFICITY

  74. SOURCE ORDER INDEPENDENCE

  75. ONE LESS HARD PROBLEM NAMING

  76. DEAD CODE ELIMINATION

  77. MODIFY AND MAINTAIN

  78. ✴ Specificity ✴ Source Order ✴ Naming ✴ Dead Code

    ✴ Modification
  79. OK

  80. Back to Radium

  81. styles = { color: "green", ":hover": { color: "blue" }

    } BROWSER STATES
  82. BROWSER STATES onMouseEnter() { this.setState({ hover: true }); }

  83. MEDIA QUERIES styles = { width: 50%, "@media (min-width: 600px)":

    { width: 75% } }
  84. MEDIA QUERIES var mql = window.matchMedia( "min-width: 600px" ); mql.addListener(updateMediaState);

  85. style={[ styles.base, styles[this.props.kind], this.props.block && styles.block ]} STYLE ARRAYS

  86. class="btn btn-primary btn-block" STYLE ARRAYS

  87. Let’s make a button

  88. BUTTON TIME styles = { background: "green", display: "block", padding:

    "1rem" }
  89. BUTTON TIME ":hover": { background: "blue" }

  90. BUTTON TIME "@media (min-width: 400px)": { display: "inline-block" }

  91. BUTTON TIME style={[ styles.base, styles[this.props.kind], this.props.block && styles.block ]}

  92. BUTTON TIME <Button kind="inverse">

  93. BUTTON TIME <Button block>

  94. BUTTON TIME <Button kind="inverse" block >

  95. So, what’s the problem?

  96. Well…

  97. FAKING IT

  98. Enhance

  99. Don’t panic

  100. REACT ONLY

  101. Virtual— what now?

  102. DIFFING

  103. DIFFING <div class="flyout flyout-active "> flyout-active <ul> <li>One</li> <li>Two</li> <li>Three</li>

    </ul> <li>Three</li>
  104. DIFFING <div style=" display: inline-block; background: orange; color: black; color:

    white; "> color: white; color: black;
  105. Still…

  106. NO FUTURE

  107. STRANGE EXPERIMENTS IN USERLAND!

  108. CSS MODULES

  109. // blog-post.css .title { font-size: 2rem; } // blog-post.js var

    styles = require("./blog-post.css"); <h2 class={{styles.title}}> // Rendered HTML <h2 class="title_12ekjlk">
  110. ✴ Specificity ✴ Source Order ✴ Naming ✴ Dead Code

    ✴ Modification
  111. CSS MODULE COMPOSITION

  112. // blog-post.css .normal { font-size: 2rem; } .highlight { composes:

    normal; color: orange; } // blog-post.js var styles = require("./blog-post.css"); <h2 class={{styles.highlight}}> // Rendered HTML <h2 class="normal_41awdnl highlight_98qoijs">
  113. @EXTEND WOES

  114. .btn, .btn-primary, .btn-secondary, .btn-tertiary, .btn-inverse, .sidebar-btn, .sidebar-btn-primary, .sidebar-btn-secondary, .sidebar-btn-tertiary, .sidebar-btn-inverse

    { color: #333; }
  115. .btn { color: #333; } .btn-primary { /* other styles

    */ } .sidebar-btn { /* other styles */ }
  116. None
  117. TOOLS, NOT RULES - SOMEONE “

  118. BETTER UX BETTER DX =

  119. I PLEDGE ALLEGIANCE TO THE SPEC

  120. WEB COMPONENTS

  121. button { background: blue; font-family: Chaparral; } <button>Normal DOM</button> Normal

    DOM
  122. <cool-button> <style> button { background: orange; font-family: Verlag; } </style>

    <button>Shadow DOM!</button> </cool-button> Normal DOM SHADOW DOM!
  123. @philwalton GO SEE PHIL

  124. RUNTIME VARIABLES

  125. CUSTOM PROPERTIES :root { --bg-color: green; } .btn{ background-color: var(--bg-color);

    }
  126. @custom-media --medium (min-width: 30em); @media(--medium) { width: 50%; } CUSTOM

    MEDIA QUERIES
  127. @custom-selector :--button button, .btn; :--button:hover { background-color: var(--hover-color); } CUSTOM

    SELECTORS
  128. CSS EXTEND

  129. .btn { padding: 1rem; } .btn-primary { @extend .btn; background-color:

    orange; }
  130. .modal { /* modal styles */ } .panel { /*

    panel styles */ } @media (max-width: 599px) { .options { @extend .panel; } } @media (min-width: 600px) { .options { @extend .modal; } }
  131. FINE “ - SOMEONE CSS IS

  132. YOU JUST HAVE TO…

  133. LET’S MAKE CSS EASY

  134. @alexlande Thanks!