模块化

模块化

JS 模块化

见 es6 脑图中的 modules

CSS 模块化

CSS 发展

手写源生 CSS使用预处理器 Sass/Less使用后处理器 PostCSS使用 css modules使用 css in js

CSS 模块化定义

A CSS Module is a CSS file in which all class names and animation names are scoped locally by default.在 CSS 模块中所有类名与动画名默认都是有“本地作用域”的。

CSS 模块化实现方式

BEM 命名规范

BEM 的意思就是 块（block）、元素（element）、修饰符（modifier）。是由 Yandex 团队提出的一种前端命名方法论。这种巧妙的命名方法让你的 css 类对其他开发者来说更加透明而且更有意义。BEM 的命名规范如下：/* 块即是通常所说的 Web 应用开发中的组件或模块。每个块在逻辑上和功能上都是相互独立的。 */.block {}/* 元素是块中的组成部分。元素不能离开块来使用。BEM 不推荐在元素中嵌套其他元素。 */.block__element {}/* 修饰符用来定义块或元素的外观和行为。同样的块在应用不同的修饰符之后，会有不同的外观 */.block--modifier {}通过 bem 的命名方式，可以让我们的 css 代码层次结构清晰。通过严格的命名可以从一定程度上解决命名冲突的问题，但毕竟只是一个命名约束，不按规范写照样能运行。

CSS Modules

CSS Modules 指的是我们像 import js 文件一样去引入我们的 css 代码，代码中的每一个类名都是引入对象的一个属性。并且 CSS Modules 在打包的时候会自动将类名转换成 hash 值，完全杜绝 css 类名冲突的问题。

使用方式

1、定义 css 文件

.className { color: green;}/* 编写全局样式 */:global(.className) { color: red;}/* 样式复用 */.otherClassName { composes: className; color: yellow;}.otherClassName { composes: className from \"./style.css\";}

2、在 js 模块中导入 css 文件

import styles from \"./style.css\";element.innerHTML = '<div class=\"' + styles.className + '\">';

3、配置 css-loader 打包

4、最终打包出来的 css 类名就是由一长串 hash 值生成

._2DHwuiHWMnKTOYG45T0x34 { color: red;}._10B-buq6_BEOTOl9urIjf8 { background-color: blue;}

CSS In JS

CSS in JS，意思就是使用 js 语言写 css，完全不需要些单独的 css 文件，所有的 css 代码全部放在组件内部，以实现 css 的模块化。CSS in JS 其实是一种编写思想，目前已经有超过 40 多种方案的实现，最出名的是 styled-components。

import React from \"react\";import styled from \"styled-components\";// 创建一个带样式的 h1 标签const Title = styled.h1` font-size: 1.5em; text-align: center; color: palevioletred;`;

参考文章

https://zhuanlan.zhihu.com/p/100133524