1. 目的
1.1. 提供一致、合理的开发基础
1.2. 应对变化
1.3. 提升效率
2. 命名原则
2.1. 基于功能
2.1.1. 它是用来干什么的
2.1.2. .button/.form/.list/.tab-list/.nav
2.1.3. 优先使用
2.1.4. 样式与内容无关
2.2. 基于内容
2.2.1. 元素里面放的是什么
2.2.2. .news/.user-info/.help/.contact-me
2.2.3. 中小型网站可以给予内容去命名
2.3. 基于视觉
2.3.1. 看起来是什么样？
2.3.2. .round-image/.nowrap
2.3.3. 大型网站可以基于视觉去命名
2.3.4. 不要使用太具体的样式
2.4. 现在比较火的命名方式
2.4.1. BEM
2.4.1.1. Block
2.4.1.1.1. .block
2.4.1.2. Element
2.4.1.2.1. .block__element
2.4.1.3. Modifier(修饰)
2.4.1.3.1. .block__element--modifer
2.4.1.3.2. eg. tab__item--active
3. 文件结构
3.1. css
3.1.1. basic
3.1.1.1. css reset
3.1.1.1.1. 设置HTML标签的默认样式
3.1.1.1.2. 使其在各个浏览器表现基本一致
3.1.1.1.3. 让默认样式归零
3.1.1.2. normalize.css
3.1.1.2.1. 设置HTML标签的默认样式
3.1.1.2.2. 使其在各个浏览器表现基本一致
3.1.1.2.3. 保留标签的默认样式
3.1.2. moudles
3.1.2.1. 可复用的css代码段
3.1.2.2. 与模块在HTML中的位置无关
3.1.2.3. （一般）与使用的HTML标签无关
3.1.2.4. 抽取css模块原则
3.1.2.4.1. 面向对象
3.1.2.4.2. 单一职责
3.1.2.4.3. 开闭原则
3.1.2.4.4. DRY
3.1.3. pages