为什么要写这篇文？

我们都知道css通过选择器可以填写键值对的格式来修改html元素的样式。一般我们都会用标签，id, class的选择器。其中class是最多的。起码我个人开发时便是这样。我们也知道class是可以加在一个或者多个的html元素上，并且也允许一个css文件中，存在两个class名字一样的样式，比如以下的代码。（图1）

图1

这样是可以生效的。那么，我们可以联想一下。当我们和别人合作时，一个人负责了一个部分的页面，你负责一个部分的页面，你们不约而同起了一个名字一摸一样的class, 但又是写了不一样的样式。那么，当html文件引入这两个css文件时，就会出现一些css全局污染的错误。当项目变得特别巨大时，就会很麻烦去fix这个bug，也有可能为了修这一个bug又引发了新的bug。那么这个时候，我们应该怎么让我们前端的同学们愉快地放心地去写css，并完成一个可维护的项目呢。以下就列举出本人的一些经验。

第一个：scoped 属性

html5给我们带来了很多很强势的功能，让我们更好地实现我们想实现的想法。其中scoped属性则可以让我们更好地控制css的样式。让其变成局部的，我们可以这样写。（图二）

图二

但是呢，根据这个同学的博客和本人测试，在chrome下是无效的。只有在firefox下才有效。这就困难到我们了，我们开发网页，其中一个要求就是无论在哪个浏览器，都能很好地展示出我们的作品。不方，解决的办法总比问题多。

第二个：css in js

不知道为何，我个人是很推崇这个方式。也许很多人觉得css html js 应该分开独立的三份，各司其职。但是，我觉得有时候为了改一点东西，我得三个文件去改。。而且当项目大的时候，更是头疼，看着那么多文件，脑袋都炸了。如果能放到一起，岂不是很容易维护。扯远了，css in js 就像react的jsx语法一样。用js来写css。在react中呢，你可以顶一个一个对象，里面有很多你需要的样式。然后利用react的style，传对应的style对象进去。就类似这样（图3）

图3

那么这样，我们都不需要为某个dom来取一个class的名字，怎么会还存在css全局污染的问题呢？对吧！对于css in js, 有兴趣的同学可以自行去谷歌一些相关的资料来学习，这里就不太继续丰富下去。其实我上面说的，已经可以让你大概了解这是什么。

第三个：CSS Modules

我们现在的网页开发，已经是一个组件化，模块化的时代。为什么要组件化，模块化呢？首先，我们的网页其实就是可以分成好几个组件，一个网页是由好几个部分组合组成，就像造楼房一样。那么我们就可以利用拆解的思想去将一个页面去分成几个部分。而这个部分就是组件。这样有利于让整个页面结构尤其清晰，也会让你开发有所方向，能一个一个组件来，而不会一股脑写一堆，其实你什么都只做了一点。css modules 就是一个把css也模块化的技术。它很简单，真的。具体的你可以看一下阮一峰老师的教程，传送门。我一般在写react项目时，如果项目比较大时，是优先使用css modules的，因为这样可以很好解决css全局污染的问题，让你可以更容易地起了类名，又不用怕和别的模块的css类名冲突，更专注于编码。再者就是方便维护了，哪个模块有问题，哪个模块的所有的代码都在一处，你很容易找到事故发生地方，极大地提高效率。