css设计模式

CSS设计模式

OOCSS

面向对象CSS

• 原则一：容器与内容分离

• 原则二：结构（基础对象）与皮肤分离

• 原则三：面向设计开发（自己加的）

• Vue中的组件：面向对象css（OOCSS）

• OOCSS应用：Grid栅格系统，布局组件等

BEM

BEM-官网

• 快（Block），元素（Element __），修饰符（Modifier --）：BEM

  • 作用：命名规范、让页面结构清晰
  • 进阶版的OOCSS

    <div class="menu">
        <div class="menu__tab menu__tab--style1">tab1</div>
        <div class="menu__tab menu__tab--style1">tab2</div>
        <div class="menu__tab menu__tab--style1">tab3</div>
        <div class="menu__tab menu__tab--style1">tab4</div>
    </div>

menu是Block
menu__tab是Element
menu__tab--style1是Modifier

Modifier不能单独存在

Modifier只能作用于Block或者Element

SMACSS

参考网站GitHub-SMACSS中文翻译

• 分类：Base、Layout、Modules、State、Theme

• 好处：易维护、易复用、易扩展...

• 命名规范：.l-header .is-hidden .theme-nav

Base 中可以放一些基础样式，比如对浏览器的默认样式进行重置，可以参考 normalize
Layout 放一些布局方式 用l开头
Modules 放可复用模块
State 管理模块不同状态的样式 用is开头
Theme 不同的皮肤样式 用theme开头

ITCSS

参考网站 awesome-itcss

是一种分层的思想

• 七层

• 与SMACSS区别：层次分得更细

• 设置(settings) –预处理程序变量和方法（无实际CSS输出）
• 工具(tools) – Mixins和函数（无实际CSS输出）
• 常规(generic) – CSS重置，其中可能包括Eric Meyer的重置， Normalize.css或您自己的一批代码
• 元素(elements) –没有类的单个HTML元素选择器
• 对象(object) -通常遵循OOCSS方法的页面结构类
• 组件(components) –用于设置任何页面元素和所有页面元素样式的美学类（通常与对象类的结构结合使用）
• Trumps –最重要的样式，用于覆盖三角形中的任何其他内容

下层继承了上面层的所有内容
层次越在上面权重越低，复用性越高

ACSS

一个样式属性一个类

• 好处：极强的复用性，维护成本低

• 坏处：破坏了CSS命名的语义化

参考博客

通过CSS设计模式搭建自己系统的CSS架构