Tips for styling React apps in JavaScript

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:

LogRocket: Full visibility into your production React apps

Debugging React applications can be difficult, especially when users experience issues that are hard to reproduce. If you’re interested in monitoring and tracking Redux state, automatically surfacing JavaScript errors, and tracking slow network requests and component load time, try LogRocket.

LogRocket combines session replay, product analytics, and error tracking – empowering software teams to create the ideal web and mobile product experience. What does that mean for you?

Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay problems as if they happened in your own browser to quickly understand what went wrong.

No more noisy alerting. Smart error tracking lets you triage and categorize issues, then learns from this. Get notified of impactful user issues, not false positives. Less alerts, way more useful signal.

The LogRocket Redux middleware package adds an extra layer of visibility into your user sessions. LogRocket logs all actions and state from your Redux stores.

Modernize how you debug your React apps — start monitoring for free.

import Color from 'color';
const styles = StyleSheet.create({
  button: {
    backgroundColor: RED,
    ':hover': {
      backgroundColor: new Color(RED).lighten(0.2).string(),
    },
  },
)}