美文网首页
CSS Modules

CSS Modules

作者: rangel | 来源:发表于2020-10-20 21:34 被阅读0次

1. 什么是CSS Modules?

Official definition[https://github.com/css-modules/css-modules]:
A CSS Module is a CSS file in which all class names and animation names are scoped locally by default.,顾名思义,所有的类名和动画名都有一个默认的限定的作用域的CSS文件。

Background:
我们都知道,CSS(层叠样式表)不是一门编程语言,但是为了让它能更方便程序员的开发,相继出现了很多的东西,Less, Sass, 到后来的 PostCSS,再到最近的 CSS in JS 都是为了让他想一门编程语言。但CSS module仅仅只是加入局部作用域和模块依赖,很容易学,因为它的规则少,同时又非常有用,可以保证某个组件的样式,不会影响到其他组件。

2. CSS Modules 如何保证局部作用域的?

产生局部作用域的唯一方法,就是使用一个独一无二的class的名字,不会与其他选择器重名。这就是 CSS Modules 的做法。
让我们来看一个Demo: https://github.com/ruanyf/css-modules-demos/tree/master/demo01

JS file

import React from 'react';
import style from './App.css';

export default () => {
  return (
    <h1 className={style.title}>
      Hello World
    </h1>
  );
};

Question: 为什么可以通过 style.title 拿到CSS文件中的title对应的CSS属性
Answer: When importing the CSS Module from a JS Module, it exports an object with all mappings from local names to global names.

CSS file

.title {
  color: red;
}

After compile

image.png

我们可以看到,这个时候经过编译的className 已经是一个哈希值了,而这个哈希值也会是一个全局的哈希值,不会和任何的className重名。

3. 为什么会编译成一个独一无二的哈希值?

CSS Modules提供了很多的插件,支持不同的构建工具, 其中支持最好的并且最常用的是 css-loader

webpack-config.js

var webpack = require('webpack');

module.exports = {
  entry: __dirname + '/index.js',
  output: {
    publicPath: '/',
    filename: './bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets: ['es2015', 'stage-0', 'react']
        }
      },
      {
        test: /\.css$/,
        loader: "style-loader!css-loader?modules"
      },
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      compress: { warnings: false }
    })
  ]
};

可以看到在css-loader后面加上modules这个参数,表明开启CSS Modules 这个功能
同时,我们也可以配置css-loader`的参数, 来对CSS Module进行配置和扩展https://webpack.js.org/loaders/css-loader/

4. CSS Module基本用法

  1. scoped CSS
  2. global CSS
  3. compose other classname
  4. composition from other files
  5. CSS module also support using variables, but need to add postcss-loader and postcss-modules-values
    Demo show time

5. 为什么要使用CSS Modules?

  1. No more conflicts
  2. Explicit dependencies(显示的依赖关系)

6. 在React中使用CSS Modules

https://github.com/gajus/react-css-modules

相关文章

  • CSS文章整理

    CSS Module CSS Modules 详解及 React 中实践CSS Modules 用法教程

  • CSS 的进化

    CSS 的进化: CSS Evolution: From CSS, SASS, BEM, CSS Modules ...

  • CSS Modules

    CSS Modules CSS Modules是一个流行的,用于模块化和组合 CSS 的系统。vue-loader...

  • #4 react-css-modules

    CSS Modules 在React中写样式有多种方式,比较常见的有 CSS modules,这种方法将css样式...

  • React CSS Modules(译文)

    原文地址:react-css-modules阅读本文前建议了解 CSS Modules 的知识。墙裂推荐阅读 Ca...

  • CSS Modules

    待续

  • CSS Modules

    原文地址 前段时间在阅读 ant-design-pro 的源码时,发现了一种没见过的 CSS 书写方法,它能有效地...

  • CSS Modules

    调研:http://www.ruanyifeng.com/blog/2016/06/css_modules.htm...

  • CSS Modules

    1. 什么是CSS Modules? Official definition[https://github.com...

  • CSS Modules

    CSS模块化的解决方案有很多,但主要有两类。 Inline Style。这种方案彻底抛弃CSS,使用JavsScr...

网友评论

      本文标题:CSS Modules

      本文链接:https://www.haomeiwen.com/subject/zmxjmktx.html