首页  思维导图  详情

模块化

2020-04-16 11:08:58   0  举报





AI智能生成

CSS 模块化

CSS

前端

模块化

作者其他创作

大纲/内容

JS 模块化

见 es6 脑图中的 modules

CSS 模块化

CSS 发展

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

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 打包

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]', } } } ] } };

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