zoukankan      html  css  js  c++  java
  • css modules是什么?

    什么是CSS Modules?

    官方的介绍是:

    所有的 class 的名称和动画的名称默认属于本地作用域的 CSS 文件。所以 CSS Modules 不是一个官方的规范,也不是浏览器的一种机制,它是一种构建步骤中的一个进程。(构建通常需要 webpack 或者 browserify 的帮助)。通过构建工具的帮助,可以将 class 的名字或者选择器的名字作用域化。(类似命名空间化)。

    通过构建工具来使指定class达到scope的过程。

    css modules优势

    • 解决全局命名冲突问题 css modules只关心组件本身 命名唯一

    • 模块化 可以使用composes来引入自身模块中的样式以及另一个模块的样式

    • 解决嵌套层次过深的问题 使用扁平化的类名

    为什么引入CSS Modules?

    1)、全局样式冲突

    webpack进行打包时,将所有js文件导入到入口App.js文件中,样式也会统一加载到入口中,根据css的layout规则,后面的样式会覆盖掉前面的样式声明,造成全局样式的覆盖问题。

    2)、嵌套层次过深的选择器

    为了解决全局样式的冲突问题,不得不引入一些特地命名namespace来区分,但是往往有些namespace命名得不够清晰,就会造成要想下一个样式不会覆盖,就要再加一个新的命名空间来进行区分,最终可能一个元素的显示样式嵌套特别深。

    嵌套特别深会造成的问题:

    - 根据CSS选择器的解析规则可以知道,层级越深,比较的次数也就越多,影响整个页面的渲染

    - 增加了不必要的字节开销

    - 语义混乱 可扩展性不好,约束越多,扩展性越差

    3)、无法共享变量

    复杂组件要使用 JS 和 CSS 来共同处理样式。

  • 相关阅读:
    图片优化工具
    Mac显示和隐藏文件的命令
    C中调用LUA回调(LUA注册表)
    电信猫拨号再加路由器
    VMware NAT模式网络配置
    spring mvc 数据绑定
    银行存款余额调节表实例
    加强银行余额调节表在财务管理中的作用
    c语言typedef的用法-解惑阿!很多天书般的东西解释的不错(转)
    c语言指针详解(转载)
  • 原文地址:https://www.cnblogs.com/ypppt/p/12887613.html
Copyright © 2011-2022 走看看