面试题-React(十五)：React中的CSS编写方案及推荐

在React开发中，如何组织和编写CSS是一个常见的问题，React官方并没有一种固定的CSS编写方式，所以在目前的React开发中可能存在各种各样不同的编写CSS风格。本文将介绍React中几种常用的CSS编写方案，分析其优缺点，并推荐一种适用于大多数场景的方案。

一、常用的CSS编写方案

在React中，有几种常用的CSS编写方案，主要包括：

1. 普通CSS文件：
将CSS代码写在普通的.css文件中，通过import语句引入到组件中。

2. CSS模块(CSS Modules)：
使用CSS模块，将CSS代码与组件关联，避免全局污染，确保样式只作用于特定组件。

3. CSS-in-JS：
使用CSS-in-JS库，将CSS代码直接写在JavaScript文件中，使得样式和组件紧密结合。

4. CSS预处理器：
使用诸如Sass、Less等CSS预处理器，增强CSS的可编程性和复用性。

二、各种方案的示例及优缺点分析

1. 普通CSS文件：

示例代码：

/* styles.css */
.myComponent {
  background-color: #f5f5f5;
  padding: 10px;
}
1
2
3
4
5

// MyComponent.js
import React from 'react';
import './styles.css';

class MyComponent extends React.Component {
  render() {
    return 
Hello, CSS!
;
  }
}

export default MyComponent;
1
2
3
4
5
6
7
8
9
10
11

优点：

• 维护传统的CSS代码结构，适合开发者熟悉CSS的情况。
• 可以利用浏览器的缓存机制，减少重复请求。

缺点：

• 容易出现全局样式冲突，难以维护。
• CSS选择器嵌套深，可读性差。

2. CSS模块(CSS Modules)：

示例代码：

/* styles.module.css */
.myComponent {
  background-color: #f5f5f5;
  padding: 10px;
}
1
2
3
4
5

// MyComponent.js
import React from 'react';
import styles from './styles.module.css';

class MyComponent extends React.Component {
  render() {
    return 
Hello, CSS Modules!
;
  }
}

export default MyComponent;
1
2
3
4
5
6
7
8
9
10
11

优点：

• 避免全局样式冲突，提高可维护性。
• 可以直接在组件中引用CSS类名，减少命名冲突的可能性。

缺点：

• 语法相对繁琐，需要使用styles.module.css等特定命名规则。
• 对于复杂的样式，仍然需要额外的CSS文件。

3. CSS-in-JS：

示例代码：

import React from 'react';
import styled from 'styled-components';

const StyledDiv = styled.div`
  background-color: #f5f5f5;
  padding: 10px;
`;

class MyComponent extends React.Component {
  render() {
    return Hello, Styled Components!;
  }
}

export default MyComponent;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

优点：

• 样式和组件高度耦合，易于维护。
• 可以根据组件的props动态生成样式，提高灵活性。

缺点：

• 学习曲线较陡，需要适应在JavaScript中编写CSS。
• 可能导致bundle体积增加。

4. CSS预处理器：

示例代码：

/* styles.scss */
$primary-color: #f5f5f5;

.myComponent {
  background-color: $primary-color;
  padding: 10px;
}
1
2
3
4
5
6
7

// MyComponent.js
import React from 'react';
import './styles.scss';

class MyComponent extends React.Component {
  render() {
    return 
Hello, Sass!
;
  }
}

export default MyComponent;
1
2
3
4
5
6
7
8
9
10
11

优点：

• 增加了变量、嵌套、混合等功能，提高了CSS的可编程性。
• 可以使用现代的语法，减少重复代码。

缺点：

• 需要额外的编译步骤，增加了开发环境的复杂性。
• 可能需要学习新的语法和概念。

三、推荐的方案

在众多的CSS编写方案中，CSS模块是一个适用于大多数场景的推荐方案。它兼具了普通CSS文件和CSS-in-JS的优点，通过在组件中引入局部作用域的CSS类名，避免了全局样式冲突问题，又保持了CSS的可读性。此外，CSS模块允许使用现代的CSS语法，使得样式编写更加灵活，同时也不需要引入额外的JavaScript库。