CSS 的设计模式(三)ITCSS
大家好,今天我们要聊的是 CSS 的设计模式中的 ITCSS 和 ACSS,废话不多说,开干。
CSS 的设计模式
ITCSS
ITCSS 和 SMACSS 其实是很像的,只不过 SMACSS 是对 CSS 做了一个分类处理,而 ITCSS 是对 CSS 做了一个分层处理。分层是纵向的,从上往下,层层关联的。
分层:七层
与 SMACSS 区别:层次分得更细
接下来让我们看他的一个分层结构:
我们可以看到最上层是 Settings,然后是 Tools,依次往下,最后是 trumps。
越往上它的复用性越好。
Settings(设置):预处理程序的变量或方法,如
$color: #eee;$font-primary: 14px
Tools(工具): Mixins 和函数
Generic(常规):CSS 重置,其中可能包括Eric Meyer的重置, Normalize.css或您自己的一批代码
Base(元素):没有类的单个 HTML 元素选择器
Objects(对象):通常遵循 OOCSS 方法的页面结构类
Components(组件):用于设置任何页面元素和所有页面元素样式的美学类(通常与对象类的结构结合使用)
Trumps(importent):最重要的样式,用于覆盖三角形中的任何其他内容
位置可以如下图放置:
Generic 这个通过 npm install
安装就好,就不用单独配置了。
其他只需要单独的写在 Vue Component 里面就好了。
ACSS
一个样式属性一个类
好处:极强的复用性、维护成本低
坏处:破坏了 CSS 命名的语义化
案例:tailwindcss。参考链接
好了,今天就到这里,我们下期在见吧。我是 Augus,一个爱瞎搞的软件工程师。END~~~
评论