• CSS Modules 简讲 快速理解


    CSS Modules

    首先它是做什么用的

    一句话,解决了样式局部作用域和模块依赖

    如何使用

    1. 引入样式文件 import style from './App.css'
    2. 元素上使用 <h1 class={style.title}> Hello World </ h1>

    实现原理

    1. 构建工具会将类名style.title进行编译,编译成一个哈希字符串。
    2. 同时css文件内也会被进行同样的编译
    3. 这样直观类名就变成了一个独一无二的类名了,只对该组件有效

    功能细讲

    1. 全局作用 :global(.title)  
      • 在css中这样声明不会被编译成哈希字符串。
      • 而其他页面就正常定义类名即可。
      • 比如,react 就是 className='title'。
    2. 组合 composes
      • 在这个css里面可以让一个选择器继承另一个选择器的规则
      • 比如 定义样式 .appA .appB
      • 那么在 .appB 中编译 composes:appA 即可使appB继承appA的样式
      • 同时也可以引入其他文件里面的规则
      • composes: 类名 from '路径'   即可
    3. 支持引入变量,比较复杂,这个就不讲在这里了,想学的可以去阮一峰大神的文档
  • 相关阅读:
    fiddler 使用
    IO多路复用
    scrapy下载 大文件处理

    session见解
    自定义分页
    COOKIE
    ORM之老师管理
    ORM之学生管理
    ORM之班级管理
  • 原文地址:https://www.cnblogs.com/lrqcx/p/12821588.html
Copyright © 2020-2023  润新知