Style Scheme - SlhwSR

Choosing the appropriate css solution for component-based development is particularly important.

Usually, the following rules are followed:

Local CSS can be written without polluting the native components of other components.
Dynamic CSS can be written to obtain the current state of the component and generate different CSS styles based on the changes in the state.
Support for all CSS features: pseudo-classes, animations, media queries, etc.
Writing should be concise and convenient, preferably in line with consistent CSS style characteristics.

In this regard, using css in vue is more concise:

Write styles using the style tag.
The scoped attribute determines whether the written styles are locally effective.
The lang attribute sets the preprocessor.
Use inline style to set and change CSS based on the latest state.

In react, introducing CSS is not as convenient and concise as in Vue. There are many ways to introduce css in react, each with its own advantages and disadvantages.

2. Methods#

The common ways to introduce CSS are as follows:

Use directly in the component.
Import .css files in the component.
Import .module.css files in the component.
CSS in JS.

Use directly in the component#

Write css styles directly in the component and import them through the style attribute, as shown below:

import React, { Component } from "react";

const div1 = {
  width: "300px",
  margin: "30px auto",
  backgroundColor: "#44014C",  //camel case
  minHeight: "200px",
  boxSizing: "border-box"
};

class Test extends Component {
  constructor(props, context) {
    super(props);
  }
 
  render() {
    return (
     <div>
       <div style={div1}>123</div>
       <div style={{backgroundColor:"red"}}>
     </div>
    );
  }
}

export default Test;

As can be seen above, css properties need to be converted to camel case.

Advantages of this approach:

Inline styles, no conflicts between styles.
Can dynamically obtain the state of the current component.

Disadvantages:

The writing requires the use of camel case.
Some styles have no prompts.
A large number of styles can lead to messy code.
Some styles cannot be written (such as pseudo-classes/pseudo-elements).

Import .css files in the component#

Write css in a separate css file and then import it directly into the component.

App.css file:

.title {
  color: red;
  font-size: 20px;
}

.desc {
  color: green;
  text-decoration: underline;
}

Import in the component:

import React, { PureComponent } from 'react';

import Home from './Home';

import './App.css';

export default class App extends PureComponent {
  render() {
    return (
      <div className="app">
        <h2 className="title">I am the title of App</h2>
        <p className="desc">I am a paragraph description in App</p >
        <Home/>
      </div>
    )
  }
}

The disadvantage of this approach is that the styles take effect globally and can affect each other.

Import .module.css files in the component#

Import the css file as a module, and all the css in this module only applies to the current component. It does not affect the descendant components of the current component.

This approach is a solution provided by webpack. You only need to set modules:true in the webpack configuration file.

import React, { PureComponent } from 'react';

import Home from './Home';

import './App.module.css';

export default class App extends PureComponent {
  render() {
    return (
      <div className="app">
        <h2 className="title">I am the title of App</h2>
        <p className="desc">I am a paragraph description in App</p >
        <Home/>
      </div>
    )
  }
}

This approach can solve the problem of local scope, but it also has some drawbacks:

The class names used cannot use hyphens (.xxx-xx), which are not recognized in JavaScript.
All class names must be written in the form of {style.className}.
It is not convenient to dynamically modify certain styles, and inline styles still need to be used.

CSS in JS#

CSS-in-JS refers to a pattern where CSS is generated by JavaScript instead of being defined in an external file.

This feature is not part of React, but is provided by third-party libraries, such as:

styled-components
emotion
glamorous

Let's take a look at the basic usage of styled-components.

Essentially, it creates a component through function calls:

This component will be automatically assigned a unique class.
styled-components will add related styles to this class.

Basic usage is as follows:

Create a style.js file to store the style components:

export const SelfLink = styled.div`
  height: 50px;
  border: 1px solid red;
  color: yellow;
`;

export const SelfButton = styled.div`
  height: 150px;
  width: 150px;
  color: ${props => props.color};
  background-image: url(${props => props.src});
  background-size: 150px 150px;
`;

Importing the style components is also very simple:

import React, { Component } from "react";

import { SelfLink, SelfButton } from "./style";

class Test extends Component {
  constructor(props, context) {
    super(props);
  }  
 
  render() {
    return (
     <div>
       <SelfLink title="People's Republic of China">app.js</SelfLink>
       <SelfButton color="palevioletred" style={{ color: "pink" }} src={fist}>
          SelfButton
        </SelfButton>
     </div>
    );
  }
}

export default Test;

3. Differences#

From the four ways of introducing styles above, we can see that:

Writing css directly in the component is convenient and allows for easy modification of style properties based on the state. However, writing a large amount of inline styles can lead to messy code.
Importing .css files in the component follows our usual coding habits, but the styles are globally effective and can cascade between styles.
Importing .module.css files can solve the problem of local scope, but it is not convenient to dynamically modify styles and still requires the use of inline styles.
CSS in JS can meet the needs of most scenarios and can be used similar to preprocessors for style nesting, definition, and state modification.

As for which approach to use in react to introduce css, there is no absolute answer. You can choose the appropriate approach based on your own situation.