大家好，这里是修真院前端小课堂，今天给大家分享的是

《开发过程中应该遵守哪些编码规范和 class 命名规范？》

1. 背景介绍

规范，一个优秀的公司必然有一个优秀的团队，一个优秀的团队必然要有一个好的规范来约束和执行。国内基本各大互联网公司的前端都有自己的开发规范，但总的宗旨基本都是：代码简、易维护、性能高。对于一个大型项目经常会多人协作，这时必须要有一个好的规范才能顺利便捷地进行下去。

总而言之：不管有多少人共同参与同一项目，一定要确保每一行代码都像是同一个人编写的。

2. 知识剖析

基本准则

符合 web 标准，语义化 html, 结构表现行为分离，兼容性优良。页面性能方面，代码要求简洁明了有序，尽可能的减小服务器负载，保证最快的解析速度.

html 规范

页面的第一行添加标准模式声明！DOCTYPEhtml

代码缩进：tab 键设置四个空格（通常在软件右下角设置相应空格大小）

html 中除了开头的 DOC 和 'UTF-8' 或者 head 里特殊情况可以大写外，其他都为小写，css 类都为小写

建议为 html 根元素指定 lang 属性，从而为文档设置正确的语言 lang="zh-CN"

不同 doctype 在不同浏览器下会触发不同的渲染模式

非特殊情况下样式文件必须外链至… 之间；非特殊情况下 JavaScript 文件必须外链至页面底部

尽可能减少 div 嵌套.

在页面中尽量避免使用 style 属性，即 style="…"; 写在相应的样式文件中

对于属性的定义，确保全部使用双引号，绝不要使用单引号

背景图片请尽可能使用 sprite 技术，减小 http 请求

给区块代码及重要功能 (比如循环) 加上注释，方便后台添加功能

不要使用 @import, 与 <link> 标签相比，@import 指令要慢很多，不光增加了额外的请求次数，还会导致不可预料的问题。

css 规范 CSS 书写顺序

显示属性：display/list-style/position/float/clear…

自身属性（盒模型)：width/height/margin/padding/border

行高：line-height

文本属性：color/font/text-decoration/text-align/text-indent/vertical-align/white-space/content…

其他：cursor/z-index/zoom/overflow

CSS3 属性：transform/transition/animation/box-shadow/border-radius

如果使用 CSS3 的属性，如果有必要加入浏览器前缀，则按照 - webkit-/-moz-/-ms-/-o-/std 的顺序进行添加，标准属性写在最后

排版规范

如果是在 html 中写内联的 css，则必须写成单行

每一条规则的大括号 {前后加空格

属性名冒号之前不加空格，冒号之后加空格

每一个属性值后必须添加分号；并且分号后空格

多个 selector 共用一个样式集，则多个 selector 必须写成多行形式

规则书写规范

使用单引号，不允许使用双引号

每个声明结束都应该带一个分号，不管是不是最后一个声明

除 16 进制颜色和字体设置外，CSS 文件中的所有的代码都应该小写

除了重置浏览器默认样式外，禁止直接为 htmltag 添加 css 样式设置

每一条规则应该确保选择器唯一，禁止直接为全局.nav/.header/.body 等类设置属性

class 命名

规则命名中，一律采用小写加中划线的方式，不允许使用大写字母或_

命名避免使用中文拼音，应该采用更简明有语义的英文单词进行组合 +

不允许通过 1、2、3 等序号进行命名；避免 class 与 id 重名

class 用于标识某一个类型的对象，命名必须言简意赅

尽可能提高代码模块的复用，样式尽量用组合的方式

规则名称中不应该包含颜色（red/blue）、定位（left/right）等与具体显示效果相关的信息。应该用意义命名，而不是样式显示结果命名

3. 常见问题

问题 1:class 命名有什么常用方式？

4. 解决方案

在实际编程中，命名问题一直是很麻烦的问题，要想代码可读性高，维护方便，就必须规范命名。这里介绍几种命名方法

原子类命名规则

将复用性高的单条属性直接命名成类

.ml5{margin-left:5px;}

模块命名规则

按照职能划分命名规则

例如，模块是 nav，便可以命名 nav-tittle、nav-left

BEM

BEM 思想是由于项目开发中，每个组件都是唯一无二的，其名字也是独一无二的，组件内部元素的名字都加上组件名，并用元素的名字作为选择器，自然组件内的样式就不会与组件外的样式冲突了。这是通过组件名的唯一性来保证选择器的唯一性，从而保证样式不会污染到组件外。

BEM 的命名规矩很容易记：block-name__element-name–modifier-name，也就是模块名 + 元素名 + 修饰器名

5. 编码实战

6. 扩展思考

问题一：原子类的优劣？

原子类在网上争议非常大，原子类简单方便，但是不宜维护，控制困难。原子类其实不是一种工具，而是一种编写 CSS 的思想，即：抽出高度复用的样式模块，独立成一个原子类，为对应的模块添加。但是不宜过度使用，负责就和直接添加 style 没有区别了，在涉及数值方面我的建议时不要使用原子类，否则修改起来超级麻烦，可以使用 less、sass 等代替.