记录–记一次前端CSS升级

目前平台前端使用的是原生CSS+BEM命名，在多人协作的模式下，容易出现样式冲突。为了减少这一类的问题，提升研效，我调研了业界上主流的7种CSS解决方案，并将最终升级方案落地到了工程中。

样式冲突的原因

目前遇到的样式冲突的原因，其实根本原因还是css样式混乱使用导致的：

1. 多人协作，样式互相污染，这是项目中的主要问题。用开发规范来限定、用CR流程来保障，并不可靠
2. 引用大量第三方组件库，组件库对CSS的使用不规范。比如bee.css中使用了大量！important，破坏了项目中的样式优先级；rsuit是前端非常强大的表格组件库，他的css文件中也有直接覆盖底层样式的写法label{ marign:2px }
3. 直接使用组件库引入的css文件，比如import material-icons.css，如果引用顺序靠后，这些文件可能会覆盖开发人员手写的样式。
4. ...

调研方案

CSS作为前端三剑客之一，几乎是所有前端同学最先学习的样式表语言。在生产环境的项目工程中，很少见到直接原生使用CSS的。但目前业界还没有通用的CSS工程化方案。这篇文章先简单介绍下7种在React/Next.js中较为流行使用CSS的方式，并说说他们的优缺点。

原生 CSS

这是一种用选择器来划分css作用域的方式。

• 缺点：

1. 作用域问题 CSS样式之间会层叠覆盖，需要用大量的classname来指定选择器，来限定CSS的作用域范围。频繁的命名给开发人员增加不少心智负担，而且容易搞错搞重复。

// pure css example .card { 	/* styles */ } .card__header { 	/* styles */ } .card--focus { 	/* styles */ }

// css with !important .card { 	color: blue !important; } .card { 	color: red; }

2. 打包体积大 使用大量冗长的原生CSS，可能会导致 打出来的包变大。包越大，项目自然跑的就越慢。

CSS MODULES

这是一种在原生CSS的基础上，通过modules（也可以理解为文件）来划分CSS的作用域。

首先先建一些以.module.css结尾的文件，这些文件里的样式可以只针对某个组件（某个module）生效。这种做法在Next.js尤为常见，因为CSS modules在Next.js是可以开箱即用的。

下面是一个例子，在Home.module.css和other.module.css对同样的类名书写样式，也不会产生冲突。

@file Home.module.css .page { 	color: bule; }

@file other.module.css .page { 	color: yellow; }

// 只会生效这里import的样式 import styles from '../styles/Home.module.css'; export default function Home(){ 	return ( 		// 蓝色 		<div className={styles.page}> 			<h1> Home Page </h1> 		<div> 	) }

.page { 	composes: className from "./shared.css" }

• 缺点：

1. 不够“程序化” CSS modules在原生CSS的基础上增加了以modules（文件）划分的作用域，解决了作用域问题，但仍逃不过在单个module内以原生的方式书写CSS。原生的CSS只能纯纯的枚举出每一条样式，如果能在书写CSS的时候也支持一些程序特性岂不是更好？比如最常用的循环、遍历、函数、继承...

CSS PREPROCESSOR 预处理器

Sass、Less、Stylus... 这些预处理器就是为了解决CSS不够“程序化”而诞生的。他们允许你用一种不一样的语法来写CSS，之后再经过编译转化成原生CSS。

这里是一个例子：

// 只需一键安装sass $ npm install sass // 然后把原本的css后缀文件改成scss
 // 就可以直接使用sass的方式来编写css啦，比如变量名、循环、... @ file Home.module.scss  $ primary-color: red; $ font-stack：Helvetica  body { 	font: 100% $font-stack; 	color: $primary-color; }

import styles from '../styles/Home.module.css';  export default function Home(){ 	const [color, serColor] = useState('orange'); 	return ( 		<div className={styles.page}> 			<style jsx>{` 				h1 { 					// 取的是组件state，可以随state变化！ 					color: ${color}; 				} 			`}</style> 			<h1> Home Page </h1> 		<div> 	) }

// 配置好tailwind之后 export default function Home(){ 	return ( 		// 在这里写上tailwind的原子类classname，而不需要写样式 		<div className="text-5xl font-bold"> 		<h1> Home Page </h1> 		<div> 	) }

// 想使用这一类框架，只用一键安装上 $ npm install bootstrap  // 引入框架的样式文件 import 'bootstrap/dist/css/bootstrap.css'  export default function Home(){ 	return ( 		// 想要使用的样式都在bootstrap中用各种classname封装好啦，直接调用boostrap的预留classname，搞定 		<div className="alert alert-primary"> 		<h1> Home Page </h1> 		<div> 	) }