css预处理器和css Modules是干嘛的?

CSS预处理器

1.css和js的区别

js是编程语言,它可以声明变量,编写逻辑.而css实际上只是个"表",表头是选择器,内容是里面的样式.它并不能写逻辑啥的.也就是说,对于css的样式,我们并不能引用、继承、判断等,复用性较低.比较冗余.

2.css预处理器是干嘛的

为css提供了与js相关的功能,比如我可以在css中声明变量,可以引用变量,可以有嵌套关系,可以使用函数等.

3.常见的预处理器有less、sass等

4.以less为例,使用预处理器之后写css的方式有了哪些变化

首先,预处理器需要单独安装,安装完之后再对应的文件中编写样式,比如".less"的文件里,我们可以使用less的语法

比如:变量

@mainColor :blue

.main{
  background-color:@mainColor
}

比如:混合

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

#menu a {
  color: #111;
  .bordered();
}

.post a {
  color: red;
  .bordered();
}

相比于一板一眼的配表格,css的编写也更像是写逻辑代码了,灵活度更高了,复用性更强了.

具体可看less的官网:https://less.bootcss.com

总的而言,css预处理器出现的目的是方便开发者的,让开发者可以用编程的思维去开发css,之后,它负责将开发者写好的东西最终又翻译成css文件去交给浏览器.

css Modules

如果说css预处理器是为了将css变成编程语言去写,那css Modules的目的是css的模块化开发.

1.css Modules干啥了

css的外联的写法是写一个css文件,在里面写上元素的类名和样式,那么html里面的对应类名的元素就会有css文件里面的样式.在这个过程中,选择器和类名是直接对应的.

<div id='a' class='test'>你好</div>

 .test{
            color: red;
        }

那么,这种写法有一些问题,即当页面足够复杂时,类名容易出现重复,特别是当组件式开发时,我容易忘记其他组件有哪些类名导致重复.是一个很小的问题,找到之后改个类名就行,但很麻烦.但是,假如,我能保证每个类名都是唯一的就不会出现这个问题.

所以css Modules的核心作用就是保证类名是唯一的.

2.css Modules如何保证类名唯一

先在一个.less文件里写上样式,通过css Modules的处理封装,导入该文件时会获得一个对象.

  .test{
            color: red;
        }

然后再引入,可得到这个styles对象,然后将其test属性赋值给元素的class

 import styles from './index.less';     

 <div className={styles.test}></div>

这么做的目的是什么呢?

我们先看看styles是什么,那我代码中的一个.less文件举例

我们发现styles包含的属性为.less文件里的所有类选择器名,其值为类名_哈希字符串.其中哈希字符串是唯一的.所以当其赋值给元素的class的时候,元素的类名也就是唯一的.

3.css Modules如何实现模块化

如何理解模块化,以百度词条为例

关键词是"划分"和"多种属性".以这个角度来看.假如单页面开发,即整个页面只有一个.less文件的时候.那么整个项目也就一个styles对象.虽然有多属性,但也没有实现"划分".

所以,css Modules的模块化实际上是脱胎并服务于组件化开发模式的.因为多个组件可以写多个.less文件,那么就可以得到多个styles对象.举个例子,一个页面分为"header、content、footer"三个部分,我们开发的时候就可以分成三个组件.

接下来有多种写样式的方案,

1.比如只写一个公共less文件,三个组件的样式都写在里面,那么就一个styles对象,包含所有样式,那么这种情况用不用css Modules没啥区别.不分模块和整个项目只有一个模块有啥区别?.

2.每个组件单独写一个less文件,三个组件就三个styles,每个组件对应一个模块的话,那么整个页面的样式也就被拆成了三个模块,如此一来,css的样式也就实现了模块化,我修改其中一个模块的样式并不会影响其他模块.

总结下来,css Modules提供了模块的功能,即将一个less文件封装成一个独立的模块,以确保其他less文件并不会跟该less文件出现同名类名.但是其大放异彩还是依赖于整个前端代码的模块化开发的风格.

4.css Modules的其他功能

全局作用域:

有时候css样式需要批量或者全局修改,而它也提供了这种功能.

:global{
   .test{
color:red
   }
}
//:global包裹的类名不会被翻译成hash值

比如外部引入的ui框架的样式修改就可以用这种方式进行.

其他比如继承输入等功能可以自行去搜索一下.