Styles

Inline styles. No problem.

Only use React inline styles instead of CSS classes. After doing our research, and especially after finding Vjeux's slideshare on the topic, we were convinced that inline styles were the way to go for styling our React components.

We perceived many benefits in choosing not to use traditional CSS with HTML classes and obscure selectors :

Style encapsulation

We don't fear of breaking the other side of the application anymore when we change one single style rule. Moreover, unused styles don't bloat the application : we are sure that every style rule is actually used somewhere in the application (especially when using a linter rule that forbids unused variables).

It's just Javascript !

Inline styles are very hard to get started with. Look at all the things we didn't need to do.

We didn't need to compare, chose, and learn how to use Yet Another CSS Preprocessor (YACSSP, for insiders). If we need to share styles, use variables, or even compute a style dynamically, we can : it is just Javascript !

We didn't need to install plugins on our IDE's to enable styles syntax highlighting and easier refactoring. Because it's just Javascript. Our favorite javascript editors handle it natively, enabling us to move around and refactor style objects like the rest of the code. For example, for visual consistency, multiple components shared text and background colors. With inline styles, we were able to factorize those colors in a theme.js file, and import this file in the components where we needed it.

We didn't need to add any validator/linter such as CSSComb to our build pipeline : our already existing tools (ESLint, namely) did the job perfectly. Because it's just... (okay, you get it now).

Inline styles conventions

Because most styles are actually constants, we declare them in standalone objects outside of the render() method. We didn't use a single big object with all necessary styles in separate keys, because this prevents our linter from detecting an unused style. Instead, we declare each style in a global constant :

DO :

// Do
// Prefix with STYLE_ makes it easier with autocompletion
const STYLE_FOO = {
  width: 40,
};
const STYLE_BAR = {
  height: 23,
};

// Somewhere in the component's render method :
    <div style={STYLE_FOO}>Do this. Really. It's nice.</div>

DON'T :

// Don't because the linter can't know if you use both style.foo and style.bar
const componentStyle = {
  foo: {
    width: 40,
  },
  bar: {
    height: 23,
  }
}

// Somewhere in the component's render method :
    <div style={componentStyle.foo}>Don't do this. Really. It's bad.</div>

We can hear you scream...

...that inline styles declared in JavaScript don't allow to lint the CSS rules. When that dumb intern writes backGroundcolor: 'coral' again, nothing, nowhere, will catch the error.

Guess what... it's just Javascript, and we have a perfect tool to check that the properties in an object are correctly named : Flow. So we created a Flow type definition for inline styles, and we open sourced it. Your argument is invalid.

Still think there are better options for styling React components ? We'd like to hear from you in the comments section below !