Everything you need to know about CSS-in-JS

Think in component terms – you no longer need to maintain a bunch of stylesheets. Css-in-js abstracts CSS models to the component level rather than the document level (modularity).

Example of the React component:

import React, { Component } from 'react'
import styled from 'styled-components'

const Wrapper = styled.div` background: black `
const Title = styled.h1` background: white `
class App extends Component {
    render() {
        return (
          <Wrapper>
            <Title>Hello Styled Components!</Title>
          </Wrapper>)}}export default App
Copy the code

As you have probably heard things like CSS-In-JS, Styled Components,Radium, and Aphrodite, you may also think, What does this have to do with me? I am very happy to write CSS-in-CSS(pure.css files).

Let me talk about why this is relevant to you, and hopefully at least get the concept, why it’s relevant to you. That being said, feel free to use CSS-in-CSS. You are not obligated to use CSS-in-JS. Whatever suits you best, makes you feel good, and always provides the best solution!

Css-in-js is a delicate and controversial topic. I advocate keeping an open mind and considering if it makes sense to you. Ask yourself, “Will it improve my workflow?” In the end, the only thing that matters is using tools that make you happier and more productive.

I’ve always found it difficult to maintain a huge style sheet folder. I want to try something different. I’ve seen a lot of people ask if they have any new style ideas. Css-in-js is by far the best concept.

Let’s look at CSS-in-JS:

CSS for small and medium-sized projects

1. What is CSS-in-JS?

JSS is a more powerful abstraction than CSS. It uses JavaScript as the language to describe styles in a declarative and maintainable way. It is a high-performance JS-to-CSS compiler that works both at run time and on the server side. This core library is low-level and framework-independent. It is about 6KB (shrink and compress) and can be extended through the plug-in API. – source

Keep in mind that inline styles are completely different from CSS-in-JS, as shown below:

1.1 How do inline styles work?

In the browser, this will be attached to the DOM node as follows:

<span style="color: green">inline style</span>
Copy the code

1.2 How does CSS-in-JS Work?

In the browser, this will be attached to the DOM node as follows:

<style>
.jss-xxx-green{
  color: green
}
</style>

<span class='jss-xxx-green'>inline style</span>
Copy the code

1.3 Differences:

See subtle differences? Css-in-js appends a

Not all CSS functions can use JavaScript event handlers. Many pseudo-selectors (e.g. : disabled, : before, : nth-Child) are impossible and do not support styling HTML and body tags, etc.

With CSS-in-JS, you can easily get all the functionality of CSS. With the actual CSS generated, you can use every media query and pseudo-selector you can think of. Some libraries (such as JSS, style components) even add support for nested clean, non-CSS native features!

Why don’t we just use CSS-in-CSS and get it done?

While this has long been the case, the challenge is that modern networks are written in components, not pages.

CSS has never actually implemented a component-based approach. Css-in-js solves this problem.

2. UseCSS-in-JSWhat are the benefits?

  • Componentized thinking. You no longer have to maintain a bunch of stylesheets. Css-in-js abstracts CSS models to the component level rather than the document level (modularity).
  • CSS-in-JSLeverage the full capabilities of the JavaScript ecosystem to enhance CSS.
  • True rule isolation. Range selectors are not enough. CSS has attributes that automatically inherit from parent elements if not explicitly defined. Thank youjss-isolatePlug-ins, JSS rules do not inherit attributes.
  • Range selector. CSS has only one global namespace. It is impossible to avoid selector conflicts in nontrivial applications. Naming conventions (e.gBEM) may be helpful in a project, but not when integrating third-party code. JSS is generated by default when JSS compiles the JSON representation to CSSA unique class name.
  • The prefix is automatically added. CSS rules are automatically displayedproviderIs a prefix, so you don’t have to consider it.
  • Code sharing. Easily share constants and functions between JS and CSS.
  • Only the styles currently used on the screen are in the DOM (React-JSS).
  • Eliminate unused code
  • CSS unit testing

3. What are the disadvantages of using CSS-in-JS?

  • The learning curve
  • New rely on
  • Make it harder for new teammates to fit into the codebase. People unfamiliar with the front end must learn more.
  • Challenge the status quo (not necessarily a scam).

The advantages clearly outweigh the pros and cons – let’s give JS-in-JS a chance!

4. Most popularCSS-in-JSlibrary

Quick “Hello World” examples of all the popular CSS-in-JS libraries. Choose your favorite one according to the syntax.

  • Styled Components
  • JSS-React
  • Glamorous
  • Radium (Caveat: Uses Inline Styles)
  • Aphrodite
  • Styletron

These are very simple examples that show the core functionality. All libraries contain more features such as themes, dynamic items, server-side rendering, and more.

Conclusions and Resources

I believe CSS-in-JS should have a chance. Hope you found this article helpful, and thanks for reading!

For further reading, please go to:

  • CSS in JS: Benefits, Drawbacks, and Tooling
  • awesome-css-in-js