面试官：你怎么优雅管理 CSS？

面试官灵魂发问：你是如何组织管理你的 CSS 代码的？

答：先写类名， 而后写样式。

卒，享年18.

借由这个面试题目， 咱们来了解 css 管理方式一共有几种。

首先写列个大纲:

• 佛性选手, 复制粘贴一把梭.
• 命名空间
• 命名空间 + BEM 规范
• CSS module
• css in js

方案一. 命名空间 + BEM 规范

原理：强行增长一个最外层的命名空间将底部样式包裹起来。 A.less

.componentA {
   .title {
       color: red;
   }
   .des {
       ...
   }
}
复制代码

B.less

.componentB {
   .title {
       color: red;
   }
   .des {
       ...
   }
}
复制代码

样式名遵循 BEM 规范， 让维护者能够从类名就分辨出 dom 上的嵌套状况。方便维护， 以下代码：

.componentA {
    &__title {
        font-size: 14px;
    }
}
<div class="componentA">
    <h1 class="componentA__title">组件A的title</h1>
</div>
复制代码

该方案适用于组件库的编写。做为一个规范的 BEM ，使用者更容易使用。可是若是在一个庞大的业务中， 若是咱们只用 BEM + 命名空间来控制样式不重叠， 就有点力不从心了。你不可能每开始一个需求， 就查一下目前有多少命名空间。维护变得很困难。

因此， 基于这种方案之下， 又延伸了 2种 CSS 管理方案

• 方案二：CSS in JS
• 方案三：CSS Modules

方案二. CSS in JS

使用 js 语言写 css ，目前比较受欢迎的: styled-components. 语法以下：

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

const Title = styled.h1`
 font-size: 1.5em;
 text-align: center;
 color: palevioletred;
`;
<Title>
 Hello World, this is my first styled component!
</Title>
复制代码

emmm， 仁者见仁， 智者见智。若是喜欢这种方式，能够尝试使用。做者没有采用这种方案， 比较喜欢 js 跟 css 隔离的感受。没有实践没有发言权, 因此就不赘述了.

方案三. CSS Modules

原理：利用 webpack 等构建工具自动将类名转换成局部。 详细配置: webpack.docschina.org/loaders/css… 好比， 配置样式名规则：

{
    loader: 'css-loader',
    options: {
          importLoaders: 2,
          modules: isModules,
          localIdentName: '[name]__[local]__[hash:base64:5]'
    }
}
复制代码

代码以下:

import React from 'react';
import style from './App.css';
export default () => {
 return (
   <h1 className={style.title}>
     Hello World
   </h1>
 );
};
复制代码

在 app.css 中

.title {
   color: red;
}
复制代码

但是这种方法有不少限制, 以下: 不管什么时候构造类名，都必须使用styles对象。 混合CSS模块和全局CSS类是很麻烦的。 对未定义的CSS模块的引用解析为未定义，没有警告。

基于上面的问题, react 有一个插件 react-css-modules . 它可让你直接写 styleName 或者 className 来区分是本地类名仍是全局类名. 且统统解决上面的问题.

<div styleName="lock-item" className="lock-global">
    老师列表
</div>
复制代码

编译后的 CSS，classname 根据配置的规则生成了对应的名字。

能够看到, className 的并不会根据 webpack 的 配置生成对应的类名, styleName 则会. 在书写样式时, 也可方便的使用 :global 和 :local 来区分是全局. :local 是默认注入的, 所以只须要对全局样式标明便可.

.lock-item {
   line-height: 24px;
   margin-bottom: 8px;
}

:global .lock-global {
   color: red;
}
复制代码

在 babel-plugin-react-css-modules 中配置以下:

至此, 咱们总结一下上面的内容:

1. 命名空间方案 编写组件库使用 BEM 规范 + 命名空间方案来. 这样第三方在调用的时候, 有规范可言, 且不会随着打包每次的样式名都发生改变.

2. css in js / css module 方案 大型业务场景中使用 css modules 或者 css in js。毕竟让工具来解决问题才是最完全的解决问题。咱们不可能去 diff 每个地方, 控制你们样式名不冲突.

好, 看完上面的内容, 大概能够回答一下面试官的灵魂发问了. 时间回溯, 重来一遍.

• 面试官：你是如何组织管理你的 CSS 代码的？
• 答：分场景. 一. 在编写公共组件库的时候, 使用 BEM + 命名空间 …… 二. ……
• 面试官: 那 css module 中, 大家如何处理引入的第三方库样式?
• 答: css module 中有能够开启 module 和关闭module的选项. 对于第三方库样式, 关闭 module 选项便可. 配置以下:

• 面试官: 若是有一个场景, 基于 antd 封装了一个本身公司风格的组件样式库. 怎么确保在 antd 样式后加载?
• 答: 由于 css-loader 实际上只是会解析生成对应的类名, 最后咱们还得根据 style-loader 插入 html 中, 那这里能够控制它插入的顺序. 根据文档的配置信息, 控制 css 的插入顺序. 便可控制前后加载顺序.

固然， 除了以上2种方式，还有不少方案。 关于 css 管理方案， 业界一直没有统一。 你们都处于我努力说服你，你努力说服个人场景。 不过，只要能解决问题的， 都是好工具～

• 精读《使用 CSS 属性选择器》
• 精读《请中止 css-in-js 的行为》

借助面试这个场景, 来巩固下知识. 系统地学习下优雅管理 CSS 的各类方式. 但愿对你有帮助~

• 欢迎关注「前端加加」,认真学前端，作个有专业的技术人...