CSS工程化

base页面

• normalize.css对于所有浏览器关于标签的一些定义
  
  • 设置HTML标签的默认样式使其在各个浏览器表现基本一致
  • 让默认样式归零
• mixins.css
• layout.css
• variables.css

modules

• 面向对象原则 ：提取基础样式，不要用父级限制组件的样式
• 单一职责的原则
• 开闭原则：对扩展开放，对修改关闭
  
  • button.css
  • checkbox.css
  • dialog.css
  • form.css
  • input.css
  • modal.css
  • pagination.css
  • radio.css
  • select.css
  • tab.css
  • table.css
  • textarea.css
  • tip.css

pages页面自己的样式

• index.css
• page-a.css
• page-b.ccss

命名规范

• 基于功能 .form/.list/.link
• 基于内容 .news/.help
• 基于视觉 .nowrap/.round-img
  基于视觉和内容，对于复用不合适–小项目可以基于内容，大的网站项目倾向于基于视觉命名

BEM规范

• Block:可以独立出来的组件
• Element:组件里的元素

• Modifier:修饰

  <nav class="tabs tabs-stack">
<a href="tabs_item tabs_item-active"></a>
<a href="tabs_item"></a>
</nav>

CSS预处理

• less
• Sass
• Stylus
• PostCSS