写点什么

CSS 的设计模式(三)ITCSS

用户头像
Augus
关注
发布于: 1 小时前
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~~~

用户头像

Augus

关注

爱瞎搞的软件开发工程师 2021.06.10 加入

某摸鱼集团

评论

发布
暂无评论
CSS的设计模式(三)ITCSS