手机美高梅游戏网址本文将详细介绍css modules,

时间:2020-01-05 02:17来源:美高梅游戏网站
CSS Module产生背景 1. 手动分模块 前面的话 css modules是一种流行的模块化和组合CSS的系统。 vue-loader提供了与cssmodules的集成,作为scope CSS的替代方案。本文将详细介绍css modules   在软件工

CSS Module产生背景

1. 手动分模块

前面的话

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

 

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

刀耕火种的时代了

引入

  最开始使用Vue的时候,提倡并大量使用的是scoped这种技术

<style scoped>
  @media (min-width: 250px) {
    .list-container:hover {
      background: orange;
    }
  }
</style>

  这个可选 scoped 属性会自动添加一个唯一的属性 (比如 data-v-21e5b78) 为组件内 CSS 指定作用域,编译的时候 .list-container:hover 会被编译成类似 .list-container[data-v-21e5b78]:hover

  但是,它并不能完全避免冲突

用户名不得为空

  以上面的代码为例,使用scoped之后,它在元素上添加了一个唯一的属性'data-v-0467f817',CSS样式被编译如下

.errShow[data-v-0467f817] {
    font-size: 12px;
    color: red;
}

  但是,如果用户也定义了一个errShow类名,会影响到所有定义为errShow类名的组件的显示

  而CSS modules则做的更彻底,它不是添加属性,而是直接改变类名

用户名不得为空

  这样,大大降低了冲突的可能性,只要不是用户直接给span标签设置样式,基本上不会影响组件的显示

 

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

2. css预处理CSS预处理器最大的好处就是可以支持模块引入,用js的方式来编写CSS,编译之后,终究还是一个文件,因此不可避免的会出现冲突样式

模块化

  CSS Modules既不是官方标准,也不是浏览器的特性,而是在构建步骤中对CSS类名选择器限定作用域的一种方式(通过hash实现类似于命名空间的方法)。类名是动态生成的,唯一的,并准确对应到源文件中的各个类的样式

  实际上,CSS Modules只是CSS模块化的一种方式。为什么我们需要CSS模块化呢?

  CSS的规则都是全局的,任何一个组件的样式规则,都对整个页面有效。于是,亟待解决的就是样式冲突(污染)的问题。一般地,为了解决冲突,会把class命名写长一点,降低冲突几率;加上父元素的选择器,来限制范围等

  CSS模块化就是来解决这个问题的,一般地,分为三类

  1、命名约定类

  该类CSS模块化方案主要用来规范CSS命名,最常见的是BEM,当然还有OOCSS等,在构建工具出现之前,大多数都是在CSS命名上做文章

  2、CSS in JS

  彻底抛弃CSS,用javascript来写CSS规则,常见的有styled-components

  3、使用JS来管理样式

  使用JS编译原生的CSS文件,使其具备模块化的能力,最常见的就是CSS Modules

  随着构建工具的兴起,越来越多的人开始使用后两者方案,书写CSS时,不用再特意地关心样式冲突问题。只需要使用约定的格式编写代码即可

 

CSS Module解决的问题

插个题外话:sass vs scssSass 是以严格的缩进式语法规则来书写,不带大括号({})和分号(;),而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似

写法

  下面来介绍CSS modules的写法

  在style标签中添加module属性,表示打开CSS-loader的模块模式

<style module>
.red {color: red;}</style>

  在模板中使用动态类绑定:class,并在类名前面加上'$style.'

<template>
  <p :class="$style.red">
    This should be red
  </p>
</template>

  如果类名包含中划线,则使用中括号语法

<h4 :class="$style['header-tit']">类别推荐</h4>

  也可以使用数组或对象语法

    <p :class="{ [$style.red]: isRed }">
      Am I red?
    </p>
    <p :class="[$style.red, $style.bold]">
      Red and bold
    </p>

  更复杂的对象语法

    <ul 
    :class="{
        [$style.panelBox]:true,
        [$style.transitionByPanelBox]:needTransition
      }"

  更复杂的数组语法

    <li
      :class="[
        $style['aside-item'],
        {[$style['aside-item_active']]:(i === index)}
      ]"

 

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

3. BEM:BEM就是为了解决命名冲突以及更好的语义化而生的

配置

  css-loader关于CSS modules的默认配置如下

{
  modules: true,
  importLoaders: 1,
  localIdentName: '[hash:base64]'
}

  可以使用vue-loader的cssModules选项为css-loader进行自定义的配置

module: {
  rules: [
    {
      test: '.vue$',
      loader: 'vue-loader',
      options: {
        cssModules: {
          localIdentName: '[path][name]---[local]---[hash:base64:5]',
          camelCase: true
        }
      }
    }
  ]
}

 

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

BEM名词解释:-Block:逻辑和页面功能都独立的页面组件,是一个可复用单元,特点如下:可以随意嵌套组合可以放在任意页面的任何位置,不影响功能和外观可复用,界面可以有任意多个相同Block的实例-Element:Block的组成部分,依赖Block存在-Modifier[可选] 是一个元素的状态显示,例如active、current、selected,只能定义Block和Element的外观及行为,

keyframes

  使用CSS modules处理动画animation的关键帧keyframes,有一个非常重要的细节——动画名称必须先写

animation: move 1s;

  上面代码会被正确解析为

animation: p_vDKHdm1YxIlQZ4rG_08_1 1s;

  如果动画名称写在后面

animation: 1s move;

  代码会被解析为

animation: 1s :local(move);

 

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

- Block完全独立,可以嵌套,一个header是一个Block,header下的搜索框也可以是一个Block 不可能出现Block__Element-father__Element-son_Modifer这种类名的写法,BEM只有三级- Modifier可以加在Block和Element上面- Modifier作为一个额外的类名加载Block和Element上面,只是为了改变状态,需要保留原本的class

综合来说就是一下几点:

示例:

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

form input type="text" / input type="submit" //form

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

解释: form是一个Block, form--theme-xmas, form--simple是Modifier 依附在form这个Block上,用来改变不同样式form__input 是Element,在Block下的元素form__submit也是Element, form__submit--disabled 是Modifier 依附在form__submit这个Element上,用来表示不可提交状态

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

4.CSS Modules

编辑:美高梅游戏网站 本文来源:手机美高梅游戏网址本文将详细介绍css modules,

关键词:

  • 上一篇:没有了
  • 下一篇:没有了