React Inline Styles and the Future of CSS

February 29, 2016
Alex LandeAlex Lande

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: https://github.com/FormidableLabs/radium
Find the code: https://github.com/FormidableLabs/radium

Related Posts

The Myth About Code Comments

February 28, 2024
Where to use them, when to use them, how to structure them, and how much detail should they have? These are the wrong questions: instead we should be asking ourselves, “should I even be writing a comment at all?”
Brian Walters

Iterables in JS

July 12, 2022
A perhaps less well-known addition of the ES2015 spec is the addition of the iteration protocols. These protocols allow us JS developers to make use of iterables — a very powerful language feature that you’re likely already using in your day-to-day development, but maybe haven’t given too much thought to!
Grant Sander

The Case for Consistent Documentation

April 21, 2021
Words can't begin to express the anxiety I felt leaving my first job last spring. As I put in my notice, a question kept nagging me: how could I wrap up two years in two weeks?
Erika Smith