React Inline Styles and the Future of CSS

29 February 2016

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, we 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 the screencast below, I 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. I’ll also cover:

  • CSS Modules
  • Shadow DOM
  • CSS Variables and Custom Media Queries
  • Native CSS Extends

Read the docs: http://stack.formidable.com/radium/
Find the code:
https://github.com/FormidableLabs/radium

Related Posts

Finding and fixing duplicates in webpack with Insp ...

Needlessly duplicated dependencies produce larger, slower web applications. Let's embark on a deep dive into how npm and webpack work, see how ineffic ...

Introducing Whackage

We love React Native. Sometimes, though, it doesn't feel like it reciprocates your love. One such time is when working with codebases that span across ...

By
Jani Eväkallio

Jani Eväkallio

Flexible Charting in React with Victory (and Intro ...

Victory: React charts tailored to your data Charting directly with d3 can be difficult, but other libraries are often too simplistic. Enter Victory: R ...

Check out more of Alex's blog posts