• Why I Write CSS in JavaScript
  • By Max Stoiber
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: Ivocin
  • Proofreader: MacTavish Lee, Mirosalva

For three years, I have designed Web applications without using.css files. Instead, I wrote all my CSS in JavaScript.

I know what you’re thinking: “Why would anyone write CSS in JavaScript? !” In this article I will answer that question.

What does CSS-in-JS look like?

Developers have created different styles of CSS-in-JS. The most popular, by far, is a library I co-developed called Styled – Components, which has over 20,000 stars on GitHub.

Here’s an example of how it works with React:

import styled from 'styled-components'const Title = styled.h1` color: palevioletred; font-size: 18px; ` const App = () => ( <Title>Hello World! </Title> )Copy the code

This will render a light mauve

in the DOM with a font size of 18px:

Why do I like CSS-in-JS?

It was mainly CSS-in-JS that boosted my confidence. I can add, change, and remove CSS without any unintended consequences. My changes to the component style don’t affect anything else. If I delete a component, I also delete its CSS. No longer just add and subtract stylesheets! ✨

Confidence: Add, change, and remove CSS without any unintended consequences, and avoid useless code.

Easy maintenance: No more need to look for CSS that affects components.

My team, in particular, got a lot of confidence from it. I can’t expect all team members, especially junior members, to have an encyclopedic understanding of CSS. On top of that, deadlines can affect quality.

Using CSS-in-JS, we automatically avoid common pitfalls of CSS, such as class name conflicts and weight wars. This keeps our codebase clean and our development faster. 😍

Improved teamwork: Regardless of experience level, common CSS pits are avoided in order to keep the codebase clean and develop faster.

For performance, the CSS-in-JS library keeps track of the components I use on the page, injecting only their styles into the DOM. Although my.js package is slightly larger, my users download as little valid CSS content as possible and avoid additional network requests for.css files.

This results in a slightly longer interaction time, but a much faster first effective drawing! 🏎 💨

High performance: Only send key CSS to the user for quick first draw.

I can also easily style components based on different states (Variant =”primary” vs Variant =”secondary”) or global themes. When I change the context dynamically, the component automatically applies the correct style. 💅

Dynamic styling: Sets component styles based on global themes or different states.

Css-in-js also provides all the important features of a CSS preprocessor. Auto-prefixing is supported by all libraries, and JavaScript natively provides most of the other functionality, such as mixins (functions) and variables.

I know what you’re thinking: “Max, you could also get these benefits with other tools or rigorous processes or lots of training. What makes CSS-in-JS special?”

Css-in-js combines all of these benefits into a nice package and enforces them. It led me to the key to success: it’s easy to do the right thing and hard (or impossible) to do the wrong thing.

Who is using CSS-in-JS?

Thousands of companies use CSS-in-JS in production, including Reddit, Patreon, Target, Atlassian, Vogue, GitHub, Coinbase, and more. (including this website)

Is CSS-in-JS right for you?

If you use JavaScript frameworks to build Web applications that contain components, CSS-in-JS might be a good fit. Especially if everyone on your team understands basic JavaScript.

If you’re not sure how to get started, I would suggest you try CSS-in-JS and see for yourself just how good it is! ✌ ️

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.