CSS设计模式

xzero
102 阅读3分钟

前期设计不重视，后期维护累秃头。为了解决css维护痛点，我总结了几个css的设计模式，在后面我还会写关于这些css模式的应用。

一.OOCSS

OO就是面向对象，OOCSS就是以面向对象的方式去维护CSS。在面向对象中，如果我们希望扩展一个类，那么会采取继承的方式去扩展，而不需要去修改所有用到原有类的代码，通过这样的方式就使得代码的维护变得容易。在CSS中我们也有类似的方法，那就是新写一个css样式，通过同名覆盖来修改代码。 OOCSS有两大原则： 1)容器和内容分离。比如有一个class 为son的span标签，分别被包含在class名不同的div中，写css样式的时候使用 divclass son这样的选择器来写css样式，这样写的后果就会导致，同样的样式因为选择器的差异而需要写两份。OOCSS则要求我们将容器和内容的样式分开来写，而不要使用组合选择器 2)结构和样式分离。这个比较好理解，就是不使用标签内嵌样式，将HTML结构和样式分开来写

二.BEM

BEM是Block(块) element(元素 __) Modifier(修饰器 --)的缩写，这是一种具有分层结构的设计模式，子元素的类命名要加上父元素的类名字，通过父元素的类名__子类名的形式形成子类名字。Modifier则是对元素当前状态的描述,比如有一个列表元素，通过--active来标注选中的元素

三.SMACSS

这是一种分类管理css代码的设计模式， SMACSS设计模式严格限定了类的命名和css存放的目录。SMACSS将SMACSS分为五类，分别是:

  1. base,存放重置默认样式，定制适用于全局的针对标签的样式定制等基础样式代码。比如取消a标签的下划线等css代码就存放在base中.
  2. Layout,存放布局相关的css样式，比如grid,flex,三栏布局等代码就放在这一层
  3. modules ,存放公共组件的css代码，组件就是可以复用于多个页面的公共HTML结构，比如用于存放文章的DIV标签，由于网站中可能会有很多文章，为了减少工作量，我们将这种需要重复编写的HTML代码抽取出来，这种被抽取出来的代码就是组件
  4. State,用于描述状态的css样式，比如当鼠标移动到某个元素(:hover)，某个元素被选中(--active)时的样式等等都放在这个文件下
  5. Theme,用于存放网站的皮肤样式

四.ITCSS

ITCSS和SMACSS也是一种分类管理css代码的设计模式，它的分类要比SMACSS要更细，它分为七层：

  1. settings:存放定义变量的css文件
  2. tools,存放css复用代码，也就是类似函数的代码，比如实现省略号的代码，清楚浮动的代码等等
  3. Generic,存放重置默认样式的代码
  4. Base,存放适用于全局的对标签样式进行特殊定制的css代码，比如取消a标签的下划线
  5. Objects
  6. Componnents,存放公共组件的样式代码
  7. Trumps,存放优先级最高的css代码，比如使用!important的css代码

五.ACSS

在ACSS中一个类对应一个属性，比如.mb-20{margin-bottom:20px} 优点：易扩展，易维护 缺点：破坏了css的语义化，比如.mb-20 会使得阅读代码的人对这个块的作用产生疑问，没有其它命名模式来得直观

avatar
文章
阅读
粉丝