css架构｜Object Oriented CSS（OOCSS）

CSS架构

why:

随着Web项目的增长，在项目之初如果不对代码的结构预先考虑，那么后期对项目的管理就会变得困难，于是，就出现了比如OOCSS、SMACSS、BEM等等的设计理念

OOCSS:

what:

Object Oriented CSS (OOCSS)是由Nicole Sullivan在2008年提出的额，目标是通过应用Java和Ruby等变成语言普及的面向对象设计原则，是动态CSS更易于管理，其主要有两个规则：

• Separate structure and skin
• Separate container and content

how:

• Separate structure and skin（结构和皮肤分离）

  • structure-结构：是指用户不可见的食物，例如元素的大小、定位的说明，比如height、width、margins、padding、overfolw...
  • skin：皮肤：元素的视觉属性，比如colors、fonts、shadows、gradients...

  举个例子：

  .button-1 {
      width: 150px;
      height: 50px;
      background: #FFF;
      border-radius: 5px;
  }
  
  .button-2 {
      width: 150px;
      height: 50px;
      background: #000;
      border-radius: 5px;
  }
  
  我们就可以根据上述的规则拆分为：
  .button {
    	width: 150px;
      height: 50px;
      border-radius: 5px;
  }
  
  .skin1 {
    background: #FFF;
  }
  
  .skin2 {
      background: #000;
  }
  

• Separate container and content（容器和内容的分离）

  内容指的是位于其他元素中的元素，我们不应该将一般规则限定于特定的容器

  举个例子：

  #sidebar {
      padding: 2px;
      left: 0;
      margin: 3px;
      position: absolute;
      width: 140px;
  }
  
  
  #sidebar .list {
      margin: 3px;
  }
  
  
  #sidebar .list .list-header {
      font-size: 16px;
      color: red;
  }
  
  
  #sidebar .list .list-body {
      font-size: 12px;
      color: #FFF;
      background-color: red;
  }
  
  根据规则二可以分离为：
  .sidebar {
      padding: 2px;
      left: 0;
      margin: 3px;
      position: absolute;
      width: 140px;
  }
  
  .list {
      margin: 3px;
  }
  
  .list-header {
      font-size: 16px;
      color: red
  }
  
  .list-body {
      font-size: 12px;
      color: #FFF;
      background-color: red;
  }
  

OOCSS的好处：

• 速度
• 可扩展性
• 效率
• 可维护性
• 可读性
• 与其他概念的相关性

OOCSS的坏处：

• 增加元素类数量
• 不太适用小项目
• 需要学习成本

BEM: