大家好，我是IT修真院上海分院第9期的学员黄麒二，一枚正直纯洁善良的前端程序员，今天给大家分享一下，修真院官网WEB任务12，深度思考中的知识点——开发过程中应该遵守哪些编码规范和class命名规范？

1) 背景介绍

真正阅读程序的是人，而不是计算机，所以所写代码具有良好的可读性，是优秀程序员必备的素质之一。在大型的系统开发中，往往需要很多人的通力配合，例如，开源软件Linux 之所以能够为全球顶尖程序员共享、协作开发，也得益于规范化和标准化的编码规范。规范应该尽量一致；即使有例外，也只能是少数情况，而不能是很多例外。好的代码规范能够提高代码的可读性便于协作沟通，好的模式能够在上层设计上避免不必要的 bug 出现。

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书写顺序

1.位置属性(position, top, right, z-index, display, float等)

2.大小(width, height, padding, margin)

3.文字系列(font, line-height, letter-spacing, color- text-align等)

4.背景(background, border等)

5.其他(animation, transition等)

排版规范

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

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

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

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

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

规则书写规范

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

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

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

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

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

class命名

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

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

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

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

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

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

布局类：header, footer, container, main, content, aside, page, section

包裹类：wrap, inner

区块类：region, block, box

结构类：hd, bd, ft, top, bottom, left, right, middle, col, row, grid, span

列表类：list, item, field

主次类：primary, secondary, sub, minor

状态类：active, current, checked, hover, fail, success, warn, error, on, off

导航类：nav, prev, next, breadcrumb, forward, back, indicator, paging, first, last

交互类：tips, alert, modal, pop, panel, tabs, accordion, slide, scroll, overlay,

分割类：group, seperate, divider

等分类：full, half, third, quarter

表格类：table, tr, td, cell, row

图片类：img, thumbnail, original, album, gallery

论坛类：forum, bbs, topic, post

方向类：up, down, left, right

其他语义类：btn, close, ok, cancel, switch; link, title, info, intro, more, icon; form, label, search, contact, phone, date, email, user; view, loading...

3) 常见问题

class命名有什么常用方式？

4) 解决方案

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

原子类命名规则

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

.ml5{margin-left:5px;}

模块命名规则

按照职能划分命名规则

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

BEM

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

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

5)  编码实战

#sass语法格式style.sass

通过 tab 键控制缩进的一种语法规则，而且这种缩进要求非常严格

6)  拓展思考

问题：原子类的优劣？

原子类简单方便，但是不宜维护，控制困难。原子类其实不是一种工具，而是一种编写CSS的思想，即：抽出高度复用的样式模块，独立成一个原子类，为对应的模块添加。但是不宜过度使用，否则就和直接添加style没有区别了,在组件开发中其实不推荐使用原子类，因为这会降低组件的可复用性。可复用性的最理想状态就是组件不仅仅在不同的页面中表现一致，在跨项目的情况下，也能够运行良好。

7)  参考文献

参考一：CSS命名规范-BEM

参考二：HTML+CSS日常编码规范

8)   更多讨论

Q1：提问人：导航栏一般怎么命名的？

A1：回答人（可以是分享人，也可以是其他学员）：一般用nav或者navbar。

Q2：提问人：box-sizing 在css书写顺序中的位置？

A2：回答人（可以是分享人，也可以是其他学员）：这个是属于盒子宽度大小，放在前面，属于第一类。

9)   鸣谢

感谢黄诚翰、陈杰超师兄，此教程是在他们之前技术分享的基础上完善而成。

今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~