大部分html页面都可以由这种结构嵌套或者累加而成。
@ postcss和cssmodule是什么?
postcss是什么?
根据官网的解释,它是一种javascript编写的工具,用来转化css的。可以认为它是处理css的插件集合,需要配合诸如webpack、gulp等编译工具才能展现它强大的能力。
目前社区提供了非常多的插件,比较有名的如下:
autoprefixer 可以为css的属性配置兼容性的前缀,不需要手动添加postcss-preset-env 允许你使用更加现代的css特性stylelint 检查css语法错误cssnano css的压缩器等等postcss的原理
如果大家了解babel的原理,那就应该听说过AST即抽象语法树。编译器将字符串进行词法分析、语法分析,再做转换,最终达到预期的结果。postcss也是同样的原理,这个包已经为使用者提供了解析的方法parse,并且也提供了很多转化的API,利用这些就可以自己开发一款postcss插件了。
css Module是什么?
先前呢,大家使用css选择器,它是对整个页面是有效的,也就是全局的,当你每次迭代需求的时候,需要考虑每次添加新的css是否会影响到其他地方,所以大家有时选择为样式表添加命名空间。css Module为大家提供了另外一种开发方式,它可以使css具有局部作用域。
用法如下:
用法是如此的简单,基本一看就会,css-loader为大家提供了css Module的开关,只要为css-loader添加参数选项modules就可以开启。注意:它必须放在less或者sass的loader之前。
那它如何做到局部作用域的呢?
打开element面板可以发现,它把class变成了md5戳,对应每个组件,保持唯一。
vue的scoped
由此大家联想到vue的scoped,它也解决了css局部作用域的问题!
它在dom上生成了一个data属性,并且给class选择器添加了属性选择器,类似于之前的md5戳。不过由于添加了属性选择器,使得选择器的优先级变高了,想在组件外面覆盖css属性就变得不那么容易了!
喜欢偶的回答就关注偶吧,有问题可以发表评论,大家一起学习,共同成长!
@ css和style有什么区别?
css是外部样式style是行内样式
两都的区别css对于后期的修改比较灵活。
有效执行顺序,如果内部写了style样式的话,style为最终执行样式,意思就是style的优先级高于css。
css的流行也在于它很好的做到了结构和样式分离,使得开发者能就通过改变CSS样式来达到改变页面效果的目的。
而Style是内嵌入页面的,维护起来不方便。所以一般的采用引入方式。
@ css优先级覆盖代码?
行内样式优先级最高,接着是内联样式,最后是外联样式。