- 按照 css的插入方式可以分为:
- 静态css即原生css。(一般需要搭配css预处理器一起使用,对各种前端项目进行样式设置,可维护性低。)
- 动态css即css in js :tailwindcss、style-components、emotion、CSS Modules、styled-system等。(可以利用各种前端框架中可用的原生元素,比如组件属性或者状态等,提供完全动态的css,通过生成一个随机类名应用到需要设置样式的元素上,并将一个<style>元素注入到文档头部的方式实现样式,可以很大程度上消除元素样式的特异性层次结构,由于当应用程序状态更改或者组件更新时,会重新进行计算,故会带来一些性能损失。)
- css预处理器(css pre-processor):添加css原本没有的额外功能,例如嵌套、继承选择器、混合(可重用声明包)。(常见的有:Less、Sass、styled-jsx) 👉参考资料一 👉参考资料二 👉参考资料三 👉参考资料四
- less和sass在语法上的一些共性:
- 混入(Mixins):class中的class.
- 参数混入:可以传递参数的class,就像函数一样。
- 嵌套规则:class中嵌套class,从而减少重复代码
- 运算:css中运用数学计算规则。
- 颜色功能:可以编辑颜色。
- 命名空间(namespace):分组样式,从而可以被调用。
- 作用域:局部修改样式。