css设计模式

oocsss设计模式

面向对象模式，不影响源代码，可扩充修正，类似class extends

• 当需求变更，改变其中一个div颜色，不能影响到其他div
  • 原则1：容器与内容分离
  • 原则2：结构（基础对象）与皮肤分离(比如换肤，不影响原先基础代码，但是在新对象可覆盖和可扩展)

<div class='a b'>a</div>
<div class='a'>a</div>
<div class='a'>a</div>
<div class='a'>a</div>

.a{
    color:red
}
.b{
    color:blue
}

• metadata样式复用，如果加上了容器的限制，就不方便复用了

ooCss应用：vue组件，grid栅格系统，布局组件

BEM设计模式

块(block)+元素(element__)+修饰符(modifier--):命名规范，让结构清晰，是类oocss模式

SMACSS设计模式

ITCSS

分七层

ACSS

好维护，破坏CSS语义化

• ft12 =>font-size:12px
• ft14 =>font-size:14px