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

Transcript

1. REACT
   INLINE STYLES
   and the
   FUTURE
   OF CSS
   

   View Slide

2. Hey!
   @alexlande
   

   View Slide

3. Seattle
   “Kerry Park, Start of Spring 1” by C.M. Keiner is licensed under CC BY 2.0
   

   View Slide

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

   View Slide

5. View Slide

6. REACT
   INLINE STYLES
   and the
   FUTURE
   OF CSS
   

   View Slide

7. NO
   FUTURE
   

   View Slide

8. I’m an architect,
   honest!
   

   View Slide

9. You keep using that
   word…
   

   View Slide

10. View Slide

11. Not everybody cares
    about CSS
    

    View Slide

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

    View Slide

13. STYLE GUIDE
    

    View Slide

14. NAMING
    CONVENTIONS
    .Sidebar {}
    .Sidebar.isExpanded {}
    .Sidebar__section {}
    .Btn {}
    .Btn--primary {}
    .Btn--round {}
    

    View Slide

15. AUTHORING
    GUIDELINES
    

    View Slide

16. CODE REVIEW
    

    View Slide

17. EVERYTHING WAS
    PERFECT!
    

    View Slide

18. EVERYTHING WAS
    TERRIBLE!
    

    View Slide

19. SPECIFICITY
    HELL
    

    View Slide

20. SPECIFICITY
    HELL
    

    View Slide

21. SPECIFICITY
    HELL
    

    View Slide

22. SPECIFICITY
    HELL
    

    View Slide

23. “Not bad”
    is not great.
    

    View Slide

24. View Slide

25. CoolCorp
    MENU
    a {
    color: orange;
    }
    

    View Slide

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

    View Slide

27. CoolCorp
    MENU
    SOME OPTIONS
    Pages
    

    View Slide

28. CoolCorp MENU
    SOME OPTIONS
    Pages
    

    View Slide

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

    View Slide

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

    View Slide

31. CoolCorp MENU
    SOME OPTIONS
    Pages
    LOG IN
    

    View Slide

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

    View Slide

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

    View Slide

34. CoolCorp MENU
    SOME OPTIONS
    Pages
    LOG IN
    .header .flyout
    .button {
    color: white;
    }
    

    View Slide

35. CoolCorp MENU
    BUTTON BUTTON BUTTON BUTTON
    BUTTON BUTTON BUTTON BUTTON
    BUTTON BUTTON BUTTON
    BUTTON
    

    View Slide

36. SOURCE
    ORDER

    WOES
    

    View Slide

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

    View Slide

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

    View Slide

39. NAMING
    COLLISIONS
    

    View Slide

40. It’s all globular
    

    View Slide

41. Just give me
    my fix!
    

    View Slide

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

    View Slide

43. DEAD
    CODE
    

    View Slide

44. DEAD
    CODE
    FOREVER
    

    View Slide

45. IMPOSSIBLE
    TO CHANGE
    

    View Slide

46. Let’s have a
    show of hands
    

    View Slide

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

    View Slide

48. BEM
    SMACSS
    OOCSS
    UNCSS
    IMMUTABLE STYLES
    ???
    

    View Slide

49. A challenger
    appears…
    

    View Slide

50. REACT
    

    View Slide

51. aficionado:
    one with afición
    

    View Slide

52. Components
    all the way down
    

    View Slide

53. 
    Click me!
    
    

    View Slide

54. Click me!
    

    View Slide

55. 
    
    Hey!
    
    Content!
    
    
    

    View Slide

56. 
    Content!
    
    

    View Slide

57. A
    BETTER
    TOMORROW
    

    View Slide

58. AN
    INTERESTING
    STORY
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

62. JS Everything!
    

    View Slide

63. COLIN HAS
    A QUESTION
    @colinmegill
    

    View Slide

64. Have you seen this talk?
    It’s pretty cool! I don’t
    know how practical it is.
    So, what’s missing?
    

    View Slide

65. WE CALLED IT
    RADIUM
    

    View Slide

66. So how does it
    work, then?
    

    View Slide

67. JSX
    

    View Slide

68. var styles = {
    color: "#333"
    }
    
    

    View Slide

69. No Selectors,
    No Semicolons,
    No Mercy
    

    View Slide

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

    View Slide

71. REGISTER
    Register
    

    View Slide

72. VARIABLES
    

    View Slide

73. NO
    SPECIFICITY
    

    View Slide

74. SOURCE ORDER
    INDEPENDENCE
    

    View Slide

75. ONE LESS HARD PROBLEM
    NAMING
    

    View Slide

76. DEAD CODE
    ELIMINATION
    

    View Slide

77. MODIFY
    AND MAINTAIN
    

    View Slide

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

    View Slide

79. OK
    

    View Slide

80. Back to Radium
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

87. Let’s make a
    button
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

92. BUTTON TIME
    
    

    View Slide

93. BUTTON TIME
    
    

    View Slide

94. BUTTON TIME
    kind="inverse"
    block
    >
    

    View Slide

95. So, what’s the
    problem?
    

    View Slide

96. Well…
    

    View Slide

97. FAKING IT
    

    View Slide

98. Enhance
    

    View Slide

99. Don’t panic
    

    View Slide

100. REACT ONLY
     

     View Slide

101. Virtual—
     what now?
     

     View Slide

102. DIFFING
     

     View Slide

103. DIFFING
     
     flyout-active
     
     One
     Two
     Three
     
     Three
     

     View Slide

104. DIFFING
     
     color: white;
     color: black;
     

     View Slide

105. Still…
     

     View Slide

106. NO
     FUTURE
     

     View Slide

107. STRANGE
     EXPERIMENTS
     IN USERLAND!
     

     View Slide

108. CSS MODULES
     

     View Slide

109. // blog-post.css
     .title { font-size: 2rem; }
     // blog-post.js
     var styles = require("./blog-post.css");
     
     // Rendered HTML
     
     

     View Slide

110. ✴ Specificity
     ✴ Source Order
     ✴ Naming
     ✴ Dead Code
     ✴ Modification
     

     View Slide

111. CSS MODULE
     COMPOSITION
     

     View Slide

112. // blog-post.css
     .normal { font-size: 2rem; }
     .highlight {
     composes: normal;
     color: orange;
     }
     // blog-post.js
     var styles = require("./blog-post.css");
     
     // Rendered HTML
     
     

     View Slide

113. @EXTEND
     WOES
     

     View Slide

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;
     }
     

     View Slide

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

     View Slide

116. View Slide

117. TOOLS, NOT RULES
     - SOMEONE
     “
     

     View Slide

118. BETTER UX
     BETTER DX
     =
     

     View Slide

119. I PLEDGE
     ALLEGIANCE
     TO THE SPEC
     

     View Slide

120. WEB
     COMPONENTS
     

     View Slide

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

     View Slide

122. 
     <br/>button {<br/>background: orange;<br/>font-family: Verlag;<br/>}<br/>
     Shadow DOM!
     
     Normal DOM
     SHADOW DOM!
     

     View Slide

123. @philwalton
     GO SEE PHIL
     

     View Slide

124. RUNTIME
     VARIABLES
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

128. CSS
     EXTEND
     

     View Slide

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

     View Slide

130. .modal { /* modal styles */ }
     .panel { /* panel styles */ }
     @media (max-width: 599px) {
     .options { @extend .panel; }
     }
     @media (min-width: 600px) {
     .options { @extend .modal; }
     }
     

     View Slide

131. FINE
     “
     - SOMEONE
     CSS IS
     

     View Slide

132. YOU JUST
     HAVE TO…
     

     View Slide

133. LET’S MAKE CSS
     EASY
     

     View Slide

134. @alexlande
     Thanks!
     

     View Slide