5 things you can do in CSS-in-JS that you didn’t know about
Tags: webdev, css, javascript, react
Published: 2019-07-08 17:31:15

---
title: 5 things you can do in CSS-in-JS that you didn’t know about
published: true
tags: web-development,css,javascript,react
canonical_url: https://blog.logrocket.com/5-things-you-can-do-in-css-in-js-that-you-didnt-know-about-c422fb67ceb6
---

![](https://cdn-images-1.medium.com/max/1024/1*GtHPLcQKLCdD_VuY7vvtTw.png)

In addition to traditional CSS, you also have inline styles and CSS-in-JS as options for styling a React application.

With inline styles, you pass a JavaScript object to the style attribute:
```jsx
const myStyle = {
  fontSize: 24,
  lineHeight: '1.3em',
  fontWeight: 'bold',
};

<span style={myStyle}>Hello World!</p>
```
However, not all CSS features are supported.

On the other hand, CSS-in-JS is a technique where JavaScript is used to style components. When this JavaScript is parsed, CSS is generated (usually as a `<style>` element) and attached into the DOM.

This functionality is implemented by third-party libraries. For example, here’s the previous example implemented with [Aphrodite](https://github.com/Khan/aphrodite):
```jsx
import { StyleSheet, css } from 'aphrodite';
const styles = StyleSheet.create({
    myStyle: {
        fontSize: 24,
        lineHeight: '1.3em',
        fontWeight: 'bold',
    }
});

<span className={css(styles.myStyle)}>Hello World!</p>
```
Other libraries I can recommend are:

- [Emotion](https://emotion.sh)
- [JSS](http://cssinjs.org)
- [Radium](https://formidable.com/open-source/radium/)
- [Styled-components](https://www.styled-components.com)

I’m not completely in favor of CSS-in-JS, but I have to say that some of these libraries add support for features you might find helpful in certain situations.

In this post, I’ll talk about five things you can do in CSS-in-JS with the above libraries that I bet you didn’t know about.

[![LogRocket Free Trial Banner](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2017/03/f760c-1gpjapknnuyhu8esa3z0jga.png?resize=1200%2C280&ssl=1)](https://logrocket.com/signup/)

### 1. You can refer to other styled components

Libraries like [styled-components](https://www.styled-components.com/) and [emotion](https://emotion.sh/) allow you to use [tagged template literals](https://medium.freecodecamp.org/es6-tagged-template-literals-48a70ef3ed4d) to create React components from styles:
```jsx
import styled from 'styled-components';
// Create a component that renders a <p> element with blue text
const BlueText = styled.p`
  color: blue;
`;

<BlueText>My blue text</BlueText>
```
But they also allow you to target other styled components (like if you were using CSS selectors):
```jsx
const ImportantText = styled.div`
   font-weight: bold;
`;

const Text = styled.div`
  color: gray;
  ${ImportantText} {
    font-style: italic;
  }
`;

render(
  <div>
    <Text>
      Text in gray
      <ImportantText>Important text in gray, bold and italic</ImportantText>
    </Text>
    <ImportantText>Important text bold</ImportantText>
  </div>
);
```
This is useful when it is combined pseudo-classes, for example, to change the color of a component on hover:
```jsx
const Text = styled.div`
  color: gray;

  &:hover ${ImportantText} {
    color: red;
  }
`;
```
### 2. You can extend the features of some libraries with JSS (or other libraries)

Let’s say you’ve used Aphrodite to style your application and now you need to support themes.

The problem is that Aphrodite doesn’t support theming in an easy way. At least not as easy as [Emotion](https://emotion.sh/docs/theming) does.

However, there are two projects that bridge the core of JSS with Aphrodite and styled-components, [aphrodite-jss](https://github.com/cssinjs/aphrodite-jss) and [styled-jss](https://github.com/cssinjs/styled-jss).

This way, you can keep the good parts of Aphrodite (or styled-components) and use all the features and [plugins](http://cssinjs.org/plugins) of JSS, from [rule caching](http://cssinjs.org/jss-cache) to [rule isolation](http://cssinjs.org/jss-isolate), and for themes, the [theming](https://github.com/cssinjs/theming) package, which provides the following high-order components:

- ThemeProvider, which passes a theme object down the react tree by context.
- withTheme, which allows you to receive a theme object and its updates as a property.

For example:
```jsx
const blackTheme = {
  color: 'black',
};

const App = () => (
  <ThemeProvider theme={blackTheme}>
    <MyComponent />
  </ThemeProvider>
);
```
In the particular case of Aphrodite and themes, as another example, you can also use [react-with-styles](https://github.com/airbnb/react-with-styles), which interfaces with [Aphrodite](https://github.com/airbnb/react-with-styles-interface-aphrodite) and [JSS](https://github.com/oliviertassinari/react-with-styles-interface-jss), among other, to access theme information when defining styles.

### 3. Chain multiple animations with keyframes

Unlike inline styles, CSS-in-JS allows you to define animations using keyframes. For example, this is how it’s done with styled-components:
```jsx
const heightAnimation = keyframes`
  0% { height: 0;  }
  100% { height: 200; }
`;

const myComponent = styled.div`
  display: inline-block;
  width: 200;
  position: relative;
  animation-name: ${heightAnimation};
  animation-duration: 1.5s;
  animation-timing-function: ease;
`;
```
But what not many people know is that you can chain multiple animations by using more than one keyframes objects in the animation property.

Here’s the above example modified to combine two animations:
```jsx
const heightAnimation = keyframes`
  0% { height: 0; }
  100% { height: 200; }
`;

const rotateAnimation = keyframes`
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
`;

const myComponent = styled.div`
  display: inline-block;
  width: 200;
  position: relative;
  animation: ${props => css`
    ${heightAnimation} 1.5s ease infinite,
    ${rotateAnimation} 1.5s linear infinite
  `}
`;
```
Radium is another library that supports multiple [animations](https://github.com/FormidableLabs/radium/tree/master/docs/api#keyframes) by passing an array of keyframes objects as the value of the animationName property:
```jsx
const heightAnimation = Radium.keyframes(
  {
    0% { height: 0; }
    100% { height: 200; }
  },
  'myHeightAnimation',
);

const rotateAnimation = Radium.keyframes(
  {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  },
  'myRotateAnimation',
);

const styles = {
  myStyle: {
    animationName: [heightAnimation, rotateAnimation],
    animationDuration: '1.5s, 1s',
    animationIterationCount: 'infinite, infinite',
    animationTimingFunction: 'ease, linear',
    display: inline-block;
    width: 200;
    position: relative;
  },
};
```
### 4. Declare global styles

Everything in CSS is global, and one of the purposes of using CSS-in-JS is to eliminate global style definitions.

However, there may be valid uses of global styles, for example, when you want to apply the same font styles to every element in your page.

Of course, you can always use traditional CSS, importing it via Webpack or declaring it in the index.html file.

But if you’re serious about using JavaScript for all your styles, some libraries actually allow you to define global styles via helper components or extensions/plugins.

In Radium, you can use the [Style](https://github.com/FormidableLabs/radium/tree/master/docs/api#style-component) component to render a styled element with global styles.

For example:
```jsx
<Style
  rules={{
    body: {
      fontFamily: 'Arial, Helvetica, sans-serif'
    }
  }}
/>
```
Will return:
```jsx
<style>
body {
  font-family: 'Arial, Helvetica, sans-serif';
}
</style>
```
JSS uses a [plugin](http://cssinjs.org/jss-global) to write global styles:
```jsx
const styles = {
  '@global': {
    body: {
      fontFamily: 'Arial, Helvetica, sans-serif'
    }
  }
}
```
And in Aphrodite, you can use a [third-party extension](https://github.com/xymostech/aphrodite-globals) to do this:
```jsx
import {injectGlobalStyles} from "aphrodite-globals";

injectGlobalStyles({
    "body": {
          fontFamily: 'Arial, Helvetica, sans-serif',
    }
});
```
Or [aphrodite-jss](https://github.com/cssinjs/aphrodite-jss) to use the global JSS plugin.

### 5. Test component with styles in unit tests

Some libraries contain utilities for testing components with styles.

Aphrodite provides undocumented (at least at the time of writing this) object, [StyleSheetTestUtils](https://github.com/Khan/aphrodite/blob/62ee2f0a39f10be75322dc0f77d1346e9731ffbf/src/exports.js#L98), which is only available for non-production environments (`process.env.NODE\_ENV !== 'production'`) and has three methods:

- suppressStyleInjection, which prevent styles from being injected into the DOM and it’s useful when you want to test the output of Aphrodite components when you have no DOM.
- clearBufferAndResumeStyleInjection, which does the opposite of suppressStyleInjection and should be paired with it.
- getBufferedStyles, which returns a string of buffered styles which have not been flushed.

Here’s an example of how they are used:
```jsx
import { StyleSheetTestUtils, css } from 'aphrodite';
//...

beforeEach(() => {
  StyleSheetTestUtils.suppressStyleInjection();
});

afterEach(() => {
  StyleSheetTestUtils.clearBufferAndResumeStyleInjection();
});

test('my test', () => {
  const sheet = StyleSheet.create({
    background: {
      backgroundColor: 'blue'
    },
  });
  css(sheet.background);
  // buffer will contain something like [ ".background_k554e1{background-color:blue !important;}" ]
  const buffer = StyleSheetTestUtils.getBufferedStyles();
  // ...
});
```
Radium is another example. It has a [TestMode](https://github.com/FormidableLabs/radium/tree/master/docs/api#testmode) object for controlling internal state and behavior during tests with the methods clearState, enable and disable.

[Here](https://github.com/FormidableLabs/radium/blob/da33b8f13cadda9b421c0a6c567fca7361c4e924/src/ __tests__ /media-query-test.js), you can find an example of how it is used.

### Conclusion

CSS-in-JS is a technique for styling applications with JavaScript, and you can do interesting things with the libraries that implement it.

In this post, I have shown you five things that probably you didn’t know you can do with some of these libraries. Of course, not all libraries are created equal and some things only apply to specific libraries.

On this [page](https://css-in-js-playground.com), you can find a playground where you can test and compare many CSS-in-JS libraries.

On the other hand, there are other libraries that are taking the concept of CSS, JavaScript, and types a little bit further.

One of these libraries is [stylable](https://github.com/wix/stylable), a component-based library with a preprocessor that converts Stylable’s CSS into minimal and cross-browser vanilla CSS.

[Here’s a great presentation](https://css-tricks.com/css-in-js-ftw-wtf/) about this library and CSS-in-JS in general. Totally recommended.
* * *
## Plug: [LogRocket](https://logrocket.com/signup/), a DVR for web apps
 
![LogRocket Dashboard Free Trial Banner](https://i2.wp.com/blog.logrocket.com/wp-content/uploads/2017/03/1d0cd-1s_rmyo6nbrasp-xtvbaxfg.png?resize=1200%2C677&ssl=1)
 
[LogRocket](https://logrocket.com/signup/) is a frontend logging tool that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.
 
In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.
 
[Try it for free](https://logrocket.com/signup/).
* * *
The post [5 things you can do in CSS-in-JS that you didn't know about](https://blog.logrocket.com/5-things-you-can-do-in-css-in-js-that-you-didnt-know-about-c422fb67ceb6/) appeared first on [LogRocket Blog](https://blog.logrocket.com).