模块化
2020-04-16 11:08:58 0 举报AI智能生成
CSS 模块化
作者其他创作
大纲/内容
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 模块中所有类名与动画名默认都是有“本地作用域”的。
CSS 模块化实现方式
BEM 命名规范
BEM 的意思就是 块（block）、元素（element）、修饰符（modifier）。
是由 Yandex 团队提出的一种前端命名方法论。
这种巧妙的命名方法让你的 css 类对其他开发者来说更加透明而且更有意义。
BEM 的命名规范如下：
/* 块即是通常所说的 Web 应用开发中的组件或模块。每个块在逻辑上和功能上都是相互独立的。 */
.block {
}
/* 元素是块中的组成部分。元素不能离开块来使用。BEM 不推荐在元素中嵌套其他元素。 */
.block__element {
}
/* 修饰符用来定义块或元素的外观和行为。同样的块在应用不同的修饰符之后，会有不同的外观 */
.block--modifier {
}
通过 bem 的命名方式，可以让我们的 css 代码层次结构清晰。
通过严格的命名可以从一定程度上解决命名冲突的问题，但毕竟只是一个命名约束，不按规范写照样能运行。
是由 Yandex 团队提出的一种前端命名方法论。
这种巧妙的命名方法让你的 css 类对其他开发者来说更加透明而且更有意义。
BEM 的命名规范如下：
/* 块即是通常所说的 Web 应用开发中的组件或模块。每个块在逻辑上和功能上都是相互独立的。 */
.block {
}
/* 元素是块中的组成部分。元素不能离开块来使用。BEM 不推荐在元素中嵌套其他元素。 */
.block__element {
}
/* 修饰符用来定义块或元素的外观和行为。同样的块在应用不同的修饰符之后，会有不同的外观 */
.block--modifier {
}
通过 bem 的命名方式，可以让我们的 css 代码层次结构清晰。
通过严格的命名可以从一定程度上解决命名冲突的问题，但毕竟只是一个命名约束，不按规范写照样能运行。
CSS Modules
CSS Modules 指的是我们像 import js 文件一样去引入我们的 css 代码，代码中的每一个类名都是引入对象的一个属性。
并且 CSS Modules 在打包的时候会自动将类名转换成 hash 值，完全杜绝 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";
}
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 + '">';
element.innerHTML = '<div class="' + styles.className + '">';
3、配置 css-loader 打包
CSS Modules 不能直接使用，需要进行打包，通过配置 css-loader 中的 modules 属性即可完成 css modules 的配置。
// webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use:{
loader: 'css-loader',
options: {
modules: {
// 自定义 hash 名称
localIdentName: '[hash:base64]',
}
}
}
]
}
};
// webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use:{
loader: 'css-loader',
options: {
modules: {
// 自定义 hash 名称
localIdentName: '[hash:base64]',
}
}
}
]
}
};
4、最终打包出来的 css 类名
就是由一长串 hash 值生成
就是由一长串 hash 值生成
._2DHwuiHWMnKTOYG45T0x34 {
color: red;
}
._10B-buq6_BEOTOl9urIjf8 {
background-color: blue;
}
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。
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;
`;
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
职业：本科
0 条评论
下一页
