DEV Community

Cover image for Styled-Components : Efficiently write CSS in JS File.
Ankur Kumar
Ankur Kumar

Posted on

Styled-Components : Efficiently write CSS in JS File.

Building web apps with React is not just about composing components together and making sure that the logic works correctly. That arguably is the most important part, where at least it's the biggest reason for using React. But building react apps is also about styling those apps.

We want to make sure that our web applications look good and styling is also an important part of building components.

Styled-components is a CSS-in-JS styling library that uses tagged template literals in JavaScript and CSS rules to provide pre-styled components where the styling is scoped to that react component only.

code snippet

The button as a JavaScript variable and the styles defined in backticks are plain old CSS styles. We can also see the nested style property with plain CSS styles.
This is how styled-components renders CSS in JavaScript.

Styling React components

There are primarly two ways to style a React component.

Inline Styling

const style = {
  color: 'blue',
};

function App() {
  return <div style={style}>Hello World!</div>;
}
Enter fullscreen mode Exit fullscreen mode

Inline styling has one of the highest specificity value which will override any other CSS rule. This method is highly discouraged, as it is neither sustainable nor scalable.

External Styling

There’s this more traditional way of using CSS in external CSS files, which is then passed as a string to the className prop

return (
  <div className="red-text"> some text </span>
)
Enter fullscreen mode Exit fullscreen mode

As the component tree grows, CSS files begin to get bulky, clumsy, and complex. One great alternative solution to this is the usage of SASS. Although SASS helps, you’ll eventually deal with the same issue due to the sheer number of SCSS files a project can have.

Finally, CSS-in-JS is a technique where JavaScript is used to style components. When this JavaScript is parsed by the browser, CSS is generated as a style element and attached inside <head></head> of the HTML document.

Why should you use Styled-Components

  • You have freedom to build custom pre-styled components. You no longer need to keep switching between a JS file and a CSS file but you can build your styled react components in one go.
const Button = styled.button`
  display: inline-block;
  color: palevioletred;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
  display: block;
`;

return (
  <div>
    <Button>Normal Button</Button>
  </div>
);
Enter fullscreen mode Exit fullscreen mode
  • No class name bugs. styled-components generates unique class names for your styles. You never have to worry about duplication, overlap or misspellings.

  • Use Power of Sass. When using styled-components you can easily use SASS like features like nesting.

  • Easier deletion of CSS. It can be hard to know whether a class name is used somewhere in your codebase. styled-components makes it obvious, as every bit of styling is tied to a specific component. If the component is unused (which tooling can detect) and gets deleted, all its styles get deleted with it.

  • Simple dynamic styling. Adapting the styling of a component based on its props or a global theme is simple and intuitive without having to manually manage dozens of classes.

  • Automatic vendor prefixing. Write your CSS to the current standard and let styled-components handle the rest.
    You get all of these benefits while still writing the CSS you know and love, just bound to individual components.

  • Painless maintenance. You never have to hunt across different files to find the styling affecting your component, so maintenance is a piece of cake no matter how big your codebase is.

  • Automatic critical CSS. Styled-Components keeps track of which components are rendered on a page and injects their styles and nothing else, fully automatically. Combined with code splitting, this means your users load the least amount of code necessary.

Will it cost you performance ?

If you are not using native CSS inline styles, there is always a possibility of having some performance overhead with any open source library you choose to use for styling. However, the little performance overhead you get is the price you pay for the power and flexibility you get from styled-components.
The good thing is that styled-components is focused on improving the library’s performance on every new release. It keeps getting better.

Conclusion

Styled-components has a rapidly increasing community, with over 33,000 members on GitHub, which is highly encouraging and testifies to the project's long-term viability. It just keep getting better.

Happy coding!

Top comments (4)

Collapse
 
gdenn profile image
Dennis Groß (he/him)

Nice post. Have you ever tried Tailwind?

I am asking because I am also coming from the styled components and NextJS module styles corner. But seriously Tailwind blew me away.

I makes it very easy to follow a consistent layout and the bundle size of the resulting css is extremely low.

Collapse
 
darkwiiplayer profile image
𒎏Wii 🏳️‍⚧️

But seriously Tailwind blew me away

Was that pun intended? xD

Collapse
 
gdenn profile image
Dennis Groß (he/him)

actually not :D

Collapse
 
darkwiiplayer profile image
𒎏Wii 🏳️‍⚧️

Kinda similar to how I do things, except I just translate javascript objects into CSS:

const button = text =>
   html.button(text, {style: {display: 'inline-block', fontSize: CSS.em(e)}})
Enter fullscreen mode Exit fullscreen mode

But that difference mostly comes down to personal preference.