CSS工程化

目的

• 提供一致，合理的开发基础
• 应对变化
• 提升效率

CSS reset和normalize.css

• CSS reset设置HTML标签的默认样式，使其在各个浏览器表现基本一致，让默认样式归零。
• normalize.css置HTML标签的默认样式，使其在各个浏览器表现基本一致，保留默认样式。

CSS模块

• 可复用的CSS代码段
• 与模块在HTML中的位置无关
• （一般）与使用的HTML标签无关

CSS模块原则

• 面向对象（OOCSS）
  • 结构和皮肤的分离
    举个栗子： .btn（结构） .btn-info（皮肤） .btn-danger（皮肤）
  • 容器和内容的分离
• 单一职责（SRP）
  • 尽可能的拆分成可独立复用的组件
  • 使用组合方式使用多个组件
  • 比如将布局和其他样式拆分
    举个栗子：

/* bad example */
.error-massage{
      display:block;
      padding:10px;
      border-top:1px solid #f00;
      border-bottom:1px solid #f00;
      background-color:#fee;
      color:#f00;
      font-weight:bold;
}
.success-massage{
      display:block;
      padding:10px;
      border-top:1px solid #f00;
      border-bottom:1px solid #f00;
      background-color:#efe;
      color:#0f0;
      font-weight:bold;
}
/* better example */
.box{
      display:block;
      padding:10px;
}
.massage{
      border-top:1px solid #f00;
      border-bottom:1px solid #f00;
      font-weight:bold;
}
.massage-error{
      background-color:#fee;
  color:#f00;
}
.massage-success{
      background-color:#efe;
      color:#0f0;
}

• 开闭原则
  • 对扩展开发
  • 对修改封闭
    举个栗子：

.box{
      display:block;
      padding:10px;
}  
/* bad example */
.content .box{
      padding:20px;
}
/* better example */
.box-large{
      padding:20px;
}

• DRY（Don't Repeat Yourself）
  举个栗子：

/* bad example */
selector{
      border-top:1px solid #eee;
      border-left:1px solid #eee;
      border-bottom:1px solid #eee;
}
/* better example */
selector{
      border:1px solid #eee;
      border-right:none;
}

命名Naming

• 基于功能
  • 它是用来做什么的
  • .btn/.list/.form/.external-link
• 基于内容
  • 元素里面放置什么内容
  • .news/.help/.user-info
• 基于视觉
  • 看起来是什么样
  • .nowrap

命名原则

• 优先使用基于功能的命名
  样式与功能无关
• 中小型网站可以基于内容命名
• 大型网站可以使用基于视觉命名
  不要使用太具体的样式

命名规范

BEM

• Block
• Element
• Modifer
  举个栗子

 
 

 
 
      HTML
      CSS
      JavaScript
 
 

        HTML
 
   

      HTML
      CSS
      JavaScript
  

编写简洁易维护的CSS代码

CSS预处理器

• less
• Sass
• Stylus
• PostCSS