什么是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 来共同处理样式。

css modules是什么?的更多相关文章

  1. 在Angular1.X中使用CSS Modules

    在Angular1.5中,增加了一个Component方法,并且定义了组件的若干生命周期hook,在代码规范中也是推崇组件化开发,但是很遗憾的是,CSS模块化组件化的问题并没有得到解决,大部分项目的打 ...

  2. CSS modules 与 React中实践

    最近一直在学习React,看上去蛮简单的内容,其实学习曲线还是比较高的. 目前学到css绑定的问题,看到有一篇好的文章,就转过来了. CSS 模块化的解决方案有很多,但主要有两类.一类是彻底抛弃 CS ...

  3. 在React中使用CSS Modules设置样式

    最近,一直在看React...那真的是一个一直在学的过程啊,从配置环境webpack,到基础知识jsx,babel,es6,没有一个不是之前没有接触的.其实,我内心是兴奋的啊,毕竟,活着就是要接触一些 ...

  4. Webpack 2 视频教程 012 - 理解Webpack 中的 CSS 作用域与 CSS Modules

    原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...

  5. 在vue中使用css modules替代scroped

    前面的话 css modules是一种流行的模块化和组合CSS的系统. vue-loader提供了与css modules的集成,作为scope CSS的替代方案.本文将详细介绍css modules ...

  6. css模块化及CSS Modules使用详解

    什么是css模块化? 为了理解css模块化思想,我们首先了解下,什么是模块化,在百度百科上的解释是,在系统的结构中,模块是可组合.分解和更换的单元.模块化是一种处理复杂系统分解成为更好的可管理模块的方 ...

  7. CSS Modules In Webpack

    1)从形式上看,CSS Modules 是将CSS中的选择器转换为变量,然后在DOM中引用变量来引入样式. 2)从效果上看,CSS Modules 可以将CSS选择器名字转成随机字符串,保证选择器同名 ...

  8. CSS Modules 与 scoped 的不一样

    What ? css 的作用域表现. Css modules 是一个CSS文件,其中所有类名和动画名称默认为局部作用域. 使用JS编译原生的CSS文件,使其具备模块化的能力,该文件需要import使用 ...

  9. CSS Modules入门教程

    为什么引入CSS Modules 或者可以这么说,CSS Modules为我们解决了什么痛点.针对以往我写网页样式的经验,具体来说可以归纳为以下几点: 全局样式冲突 过程是这样的:你现在有两个模块,分 ...

  10. [转] 使用babel-plugin-react-css-modules简化CSS Modules的使用

    在我们的产品中,均使用CSS Modules来作为样式解决方案,大致的代码是这样的: import React from 'react'; import styles from './table.cs ...

随机推荐

  1. java实现 洛谷 P1017 进制转换

    import java.util.Scanner; public class Main { private static Scanner cin; public static void main(St ...

  2. 关于晶体问题TCXO_14.7456MHZ

    如何判断热点的晶体好不好,首先,看偏移,偏移为0的晶体一般就是温补晶体,当然偏移是500或者几百固定的也是温补,但是不是我们首选的温补晶体 因为偏移为0非常省事,这是系统默认的偏移0,因此设置好频率就 ...

  3. zabbix 交换机端口显示端口描述

    ZABBIX 监控系统流量图显示端口描述   进入web 选择配置--主机 选择触发器原型 编辑触发器 随便点开一个触发器 选择触发器原型   逐个点开修改 {#IFDESCR}: ({#IFALIA ...

  4. jenkins 添加用户管理权限

    一.前言 小组开会通知 想把jenkins 构建的权限给开发,这样的话效率会增加.运维也不必每次帮助开发去构建发布. 1.规划 jenkins 四个项目分别对应三个人负责.项目下的只负责 CI.UAT ...

  5. mysql导入超大sql文件

    mysql导入超大sql文件 在网上找了个2017年行政区划的sql文件,需要导入到本地mysql库中,同事使用navicat导入的时候直接卡死了,该SQL文件差不多112MB大小.通过百度.goog ...

  6. Dubbo+Zookeeper集群案例

    一.开源分布式服务框架 1.Dubbo是阿里巴巴公司开源的一个高性能优秀的服务框架,使得应用可通过高性能的 RPC 实现服务的输出和输入功能,可以Spring框架无缝集成.    Dubbo是一款高性 ...

  7. DOM 元素的循环遍历

    ​博客地址:https://ainyi.com/89​ 获取 DOM 元素的几种方式 get 方式: getElementById getElementsByTagName getElementsBy ...

  8. (一)DB、DBMS、SQL之间的关系

    一.概念 DB:数据库(database)相当于一个仓库,用于有组织的采存储数据. DBMS:数据库管理系统(database manage system)数据库是通过DBMS来创建和操作,种类很多( ...

  9. 嵌入式QT开发视频教程-供参考

    免费嵌入式QT开发视频教程 https://pan.baidu.com/s/1bprhJ2Z QT初级到高级编程视频教程--丁林松.rarhttp://www.jisoupan.com/share/2 ...

  10. 我们是如何做go语言系统测试覆盖率收集的?

    工程效能领域,测试覆盖率度量总是绕不开的话题,我们也不例外.在七牛云,我们主要使用go语言构建云服务,在考虑系统测试覆盖率时,最早也是通过围绕原生go test -c -cover的能力来构建.这个方 ...