
While many developers still use CSS to style their React apps, writing styles in JavaScript has become an increasingly popular practice as it gives all of the conveniences of CSS preprocessors without the need to learn a new language.
Most CSS-in-JS libraries involve creating a JavaScript object of styles. As an example, this is what a style object looks like using my preferred library, Aphrodite.
const styles = StyleSheet.create({ container: { position: 'relative', width: 40, height: 50, }, )}
Variables
Many best practices from SASS/LESS workflows still apply when using JavaScript styles. Colors fonts, and other constants can be stored as variables, which can be used like so:
// colors const YELLOW = '#FFF83C'; // fonts const BOLD = 700; const TIMES_NEW_ROMAN = '"Times New Roman", Georgia, Serif'; // shared constants const border = `1px solid ${YELLOW}`; const styles = StyleSheet.create({ textBox: { color: YELLOW, fontFamily: TIMES_NEW_ROMAN, fontWeight: BOLD, border, }, )}
New ES6 language features come are handy for sharing styles cleanly. In the above example, border
is referenced with the object literal shorthand notation.
Use JS objects in place of mixins
The spread operator (…) is particularly useful when defining a commonly-used sequence of styles (in this example the rules needed to add an ellipsis to overflowing text).
const textEllipsis = { whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden', width: '100%', }; const styles = StyleSheet.create({ textBox: { ...textEllipsis, backgroundColor: 'gray', }, )}
Create helper functions for more complex motifs
More complicated sequences of rules can be abstracted behind helper functions. For example, when styling placeholder text, I use a function that returns an object of styles:
const getPlaceholderStyles = obj => ({ '::-webkit-input-placeholder': obj, '::-moz-placeholder': obj, ':-ms-input-placeholder': obj, ':-moz-placeholder': obj, ':placeholder': obj, }); const styles = StyleSheet.create({ input: getPlaceholderStyles({ color: RED }), )}
Be consistent about naming schemes
One of biggest advantages of writing styles in JavaScript is that classNames are scoped to each component by default. This means that conventions like BEM are unnecessary. Still, it is helpful to be consistent with a naming scheme for classNames. For example, I use container
for the outermost className of each React component.
Check out cool JS libraries
There are lots of helpful libraries for creating JavaScript styles. One that I particularly like is called color
and handles common color manipulations:
Cut through the noise of traditional React error reporting with LogRocket
LogRocket is a React analytics solution that shields you from the hundreds of false-positive errors alerts to just a few truly important items. LogRocket tells you the most impactful bugs and UX issues actually impacting users in your React applications.

Focus on the React bugs that matter — try LogRocket today.
import Color from 'color'; const styles = StyleSheet.create({ button: { backgroundColor: RED, ':hover': { backgroundColor: new Color(RED).lighten(0.2).string(), }, }, )}
Helpful Resources
color
library: https://github.com/qix-/color- A comparison of css-in-js libraries: https://github.com/MicheleBertoli/css-in-js
- The original talk by vjeux (creator of React Native) outlining the benefits of JavaScript styles: https://speakerdeck.com/vjeux/react-css-in-js
- Aphrodite CSS-in-JS library: https://github.com/Khan/aphrodite