小课堂【萌新】

【CSS】开发过程中应该遵守哪些编码规范和CLASS命名规范？

分享人：计翔于

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

1.背景介绍

团队开发过程中，如果编码不规范，很容易造成出现bug之后难以维护等问题 所以一个具有普适性的编码规范具有很重要的意义. 黄金原则：不管有多少人共同参与同一项目，一定要确保每一行代码都像是同一个人编写的。

2.知识剖析

HTML规范

一.DOCTYPE的声明: 每个HTML开头使用！doctype来启用标准模式声明，在此建议使用HTML5的声明模式
二.字符集和编码字符: 在每个页面的head中设置字符集，一般都是使用"UTF-8"
三.语法: 使用四个空格的缩进 在属性上使用双引号 不要忽略可选的关闭标签
四.引入css样式以及js脚本: 需要采用外链的形式引入css样式/js脚本，方便管理和修改。

五.正确的标签嵌套
除了固定的嵌套规则（如ul包含li，ol包含li等），一般遵循以下规则：
1.块级元素与块级元素平级、内联元素与内联元素平级
2.块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素
3.有几个特殊的块级元素只能包含内联元素，不能再包含块级元素 h1~h6、p、dt。
4.块级元素不能放在标签p里面。
5.li标签可以包含div标签，因为li和div标签都是装在内容的容器。

六.属性顺序
HTML属性应该按照特定的顺序出现保证可读性
除了固定的嵌套规则（如ul包含li，ol包含li等），一般遵循以下规则：
1.class
2.id、name.
3.data-*
4.src，for，tpye，href等
5.title，alt
6.role，aria-*

七.逻辑顺序
尽量让自己的网站按照先后顺序 比如先写页头，在写页体，最后写页脚

CSS书写规范

一.声明顺序
1.positioning 定位
2.因为可使一个元素脱离文档流，覆盖盒模型相关的样式
3.Box model盒模型
4.Typographic 排版
5.Visual 外观
二.媒体查询
尽量将媒体查询的位置靠近他们的相关的规则。不要把他们放在一个独立 文件当中，也不要写在最底下，以免容易忘记

三.class的命名

不但要自己能看懂代码，也要别人能轻松读懂自己的代码。
1.规则命名中，一律采用小写加中划线的方式，不允许使用大写字母或_
2.命名避免使用中文拼音，应该采用更简明有语义的英文单词进行组合+
3.不允许通过1、2、3等序号进行命名；避免class与id重名
4.class用于标识某一个类型的对象，命名必须言简意赅
5.尽可能提高代码模块的复用，样式尽量用组合的方式
6.规则名称中不应该包含颜色（red/blue）、定位（left/right）等与具体显示效果相关的信息。 应该用意义命名，而不是样式显示结果命名
四.属性简写
坚持限制属性取值简写的使用，过度使用属性简写往往会导致更混乱的代码。 常见的属性简写滥用包括： padding，margin，font，background等

3.常见问题

class命名有什么常用的方式？

4.解决方案

原子类命名
这个关键在于拼凑组合.ft{folat：right；}

模块命名
按照职能划分命名规则 nav模块，可以命名为nav-tittle、nav-left

BEM命名
BEM的优点是独一无二 ，不用担心自己的样式被覆盖 缺点就是class名太长了，修改更新不方便

5.编码实战

demo

6.扩展思考

在实际写代码的时候到底该如何选择命名方式？ 可以记住常见的class关键词，在此基础上特殊化class 也可以参考github上的热门项目

7.参考文献

参考一：推酷
参考二：豆瓣

8.更多讨论

常用的class关键词有哪些?

鸣谢

感谢大家观看

By 计翔于