Quick Start to CSS in JS

What is CSS in JS

In concept, CSS in JS is similar to JSX. Simply put, it means writing CSS-related styles in a JS environment. By leveraging the dynamism of JS itself, it can achieve very flexible styling capabilities. This article will not provide basic introductions. If you lack prior knowledge of CSS in JS, you can read some related articles in the community:

• Embracing CSS in JS
• CSS-in-JS: A Controversial Technical Solution
• In-depth Analysis of CSS-in-JS

If there are better learning materials, feel free to submit a PR.

Common Writing Styles

Let's take a look at the four common ways of writing styles in the world of CSS in JS. We will not evaluate these writing styles, but by understanding some mainstream solutions, you will have a better sense for the subsequent introductions.

Method 1: styled

styled was pioneered by styled-components, and the syntax is as follows:

Subsequently, emotion also followed suit with @emotion/styled, so most mainstream CSS in JS libraries support this syntax. We have tested that switching between styled-component and @emotion/react using the styled syntax has no impact on the styles, and the performance difference is negligible.

However, it is worth noting that some syntax supported by styled-components (e.g., component selectors) require configuration of a Babel plugin in @emotion/react to be supported. Therefore, the package size of styled-components is significantly larger compared to @emotion/react.

Method 2: css with className

The second usage method was proposed by emotion, with the core being the css method.

It is worth mentioning that the css object not only supports CSS strings, but also supports the object-oriented approach to writing CSS.

If you want to achieve the same dynamic effect as styled, you need to place the css within a function to execute and achieve dynamism.

Method 3: Using css props in React

In @emotion/react, an additional method is provided for using css props in React. This is the third method and is also the recommended approach by emotion for use in React.

In addition, there are many other creative approaches in other CSS in JS libraries, such as stitches. However, due to space limitations, they will not be listed one by one.

By now, you should have a basic understanding of how to write CSS in JS. The next article will provide a detailed analysis of the strengths and weaknesses of various writing styles, and offer a selection of antd-style.

Engineering Support

After four or five years of development, most IDEs now have good support for CSS in JS. Therefore, when writing, the experience is basically the same as writing regular CSS.

VS Code

For VS Code users, you need to install the vscode-styled-components plugin, which provides automatic prompts. This plugin works for both styled-component and emotion.

Webstorm

Webstorm provides default support for CSS in JS. If you are a Webstorm user, you don't need to do anything; all intelligent prompts and code completions for CSS in JS are ready to use out of the box.

Ant Design Token VSCode Plugin

Community member shezhangzhang has developed a VSCode plugin for the Ant Design V5 Token system, which provides token prompts directly in VSCode.

Project link: shezhangzhang/antd-design-token