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

React Inline Styles and the Future of CSS

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

Alex Lande

October 26, 2015
Tweet

More Decks by Alex Lande

Other Decks in Programming

Transcript

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

    } .flyout a { color: orange; } LOG IN
  2. 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
  3. ✴ 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
  4. Have you seen this talk? It’s pretty cool! I don’t

    know how practical it is. So, what’s missing?
  5. OK

  6. // 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">
  7. // 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">
  8. .btn { color: #333; } .btn-primary { /* other styles

    */ } .sidebar-btn { /* other styles */ }
  9. <cool-button> <style> button { background: orange; font-family: Verlag; } </style>

    <button>Shadow DOM!</button> </cool-button> Normal DOM SHADOW DOM!
  10. .modal { /* modal styles */ } .panel { /*

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