CSS Module

更新日期: 2019-07-05阅读: 2.1k标签: 模块

css Module产生背景

在软件工程里面模块指的是可组合、分解和更换的单元。下面是一张css树,项目里面总的css文件是由一系列小的单元组成,比如下面的reset.css就是一个单元。模块化的概念不光在css里面,在JS里面也是同样适用的,我们把代码按照一定的规则和逻辑拆分,分解成可组合可更换的单元,这样就实现了一个最大限度的代码复用。在css中,代码复用只是一个小的方面,更重要的是解决局部作用域的概念,也就是为了避免全局的样式污染。

index.css
  ├─ header.css
  │   └─ reset.css
  ├─ content.css
  │   ├─ left.css
  │   │   └─ nav.css
  │   └─ right.css
  ├─ fotter.css
  └─ ...

CSS Module解决的问题

全局污染会带来一系列混乱的问题,比如在项目中已经定义了某一个元素的样式,但是现在有一个需求是这个元素的样式要重新定义,但是全局已经定义了,这个时候我们可以有几种选择:!important(加上一个important优先级)、inline(写一个行内式)或者写一个复杂度选择器。

随着项目的越来越大,越来越难以维护,就容易导致命名的混乱。

为了避免样式名的冲突,我们写的选择器也越来越复杂,然后命名也越来越长。这时如果没有一个样式的命名规范,代码将越来越难以维护。这样下去就容易导致代码的层次结构越来越不清晰。我们想要实现一个代码的复用也会也来越难。从成千上万的代码中找到自己想要复用的样式,这是有一定难度的。而且因为选择器的越来越复杂和命名越来越长导致了代码的压缩也就不彻底了,对于长的class名是无能为力的,因为要保证类名的唯一性。

综合来说就是一下几点:

  • 全局污染
  • 命名混乱
  • 层级结构不清晰
  • 代码难以复用
  • 代码压缩不彻底


CSS Module 原理

主要是围绕AST语法树、vue scoped和react Css module来介绍的。

首先介绍一下AST语法树,因为在webpack里面,我们的css还是js都会解释成AST语法树。它其实就是json的一个数据结构。


AST语法树

{
 nodes: [{
 raws: {
 before: '',
 between: '',
 semicolon: true,
 after: '\r\n'
 },
 type: 'rule',
 source: {
 start: {
 line: 1,
 column: 1
 },
 input: {
 css: '.header {\r\n  display: flex;\r\n  lost-column: 1/1;\r\n}\r\n',
 hasBOM: false,
 file: '../../../xiaokedao'
 },
 end: {
 line: 4,
 column: 1
 }
 },
 selector: '.header',
 lastEach: 14,
 indexes: {},
 nodes: []
 }]
}

Vue scoped

<div data-v-2311c06a class="button-warp"></div>

.button-warp[data-v-2311c06a]{
 display: inline-block;
}

React Css module

<div class="wrapper___2IPqp"></div>

CSS作用域

局部作用域

module: {
 rules: [
 {
   test: /\.css$/,
   use: ExtractTextPlugin.extract({
   fallback: "style-loader",
   use: [
   {
     loader: 'css-loader',
     options: {
     modules: true,
     }
     }
    ],
   })
  }
 ]
}

全局作用域

:global(.main) {
 display: flex;
}

类组合

.header {
 background: #8A469B;
}

.footer {
 composes: header;
}

哈希规则

  • 默认 - [hash:base64]
  • [path][name][local][hash:base64:n]
  • [path][hash:base64:n]
  • [name][hash:base64:n]
  • [local][hash:base64:n]

变量

npm install postcss-modules-values
{
    loader: "postcss-loader",
    "options": {
        plugins: [
            require('postcss-modules-values'),
        ]
    }
}

@value color: #8A469B;
.header {
  background: color;
}
.footer {
  composes: header;
  color: #FFF;
}


链接: https://www.fly63.com/article/detial/4024

ES6模块功能:export和import的加载方式

ES6之前已经出现了js模块加载的方案,最主要的是CommonJS和AMD规范。commonjs主要应用于服务器,实现同步加载,如nodejs。AMD规范应用于浏览器,如requirejs,为异步加载。

Node的https模块_创建HTTPS服务器

Node的https模块:HTTPS服务器使用HTTPS协议,需要证书授权,SSL安全加密后传输,使用443端口

如何让 node 运行 es6 模块文件,及其原理

最新版的 node 支持最新版 ECMAScript 几乎所有特性,但有一个特性却一直到现在都还没有支持,那就是从 ES2015 开始定义的模块化机制。而现在我们很多项目都是用 es6 的模块化规范来写代码的,包括 node 项目

module、export、require、import的使用

module每个文件就是一个模块。文件内定义的变量、函数等等都是在自己的作用域内,都是自身所私有的,对其它文件不可见。在module中有一个属性exports,即:module.exports。它是该模块对外的输出值,是一个对象。

Node.js - 模块系统

模块是Node.js 应用程序的基本组成部分,文件和模块是一一对应的。换言之,一个 Node.js 文件就是一个模块,这个文件可能是JavaScript 代码、JSON 或者编译过的C/C++ 扩展。Node.js 提供了 exports 和 require 两个对象

ES模块基础用法及常见使用问题

ES6中引入了模块(Modules)的概念,相信大家都已经挺熟悉的了,在日常的工作中应该也都有使用。本文会简单介绍一下ES模块的优点、基本用法以及常见问题。

ES6 export 和 export default的区别

ES6中 export 和 export default 与 import使用的区别,使用 react native 代码详解,现在流行的前端框架,angular+ 主要使用 export 导出模块,react native 中使用 export default 导出模块,如今编辑器非常强大,安装插件会自动弹出模块名称,知道其导出怎么使用就可以了

export和export default的区别

export与export default均可用于导出常量、函数、文件、模块;你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式,将其导入,以便能够对其进行使用;

关于export和export default你不知道的事

网上有很多关于export和export default的文章,他们大部门都是只讲了用法,但是没有提到性能,打包等关键的东西。大家应该应该能理解import * from xxx会把文件中export default的内容都打包到文件中,而import {func} from xxx只会把文件中的func导入

最全的前端模块化方案

模块化主要是用来抽离公共代码,隔离作用域,避免变量冲突等。将一个复杂的系统分解为多个模块以方便编码。会讲述以下内容:CommonJS、AMD 及 核心原理实现、CMD 及 核心原理实现

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!