前端开发者如何编写高质量代码

本篇文章只写了关于html和css的部分内容目的是能让大家感受到编写高质量代码需要的改变及重要性，内容大多来自笔者最近读的《编写高质量代码-web前端开发修炼之道》，感兴趣的小伙伴也可以去看看

web标准的核心理念就是将结构(HTML),样式(CSS),和行为(javascript)分离，这就是写出高质量代码的开始。在这基础上还要做到精简、重用、有序。

高质量的HTML

HTML的标签除了div 和 span 只是分别作为块级元素和行内元素区域分割符，大多数是有语义的。

搜索引擎看不到视觉效果，看到的只是代码，只能通过标签来判断内容的语义

先确定HTML，确定语义标签，再来选用合适的CSS

选用语义合适的标签，去样式后网页依然具有非常好的可读性

当页面内标签无法满足设计需要时，才会添加div 和 span 等无语义标签来辅助实现

表单

表单域要用 fieldset 标签包起来，并用 legend 标签说明表单的用途。fieldset默认有边框样式，legend也有默认样式，因此可将 fieldset 的 border 设为 none ，legend 的 display 设为 none ，以兼顾语义和设计。input 标签对应说明文本要用 label 标签，通过input设置 ID ，在 label 中设置 for 让两者关联起来。

表格

尽管我们在CSS布局中不推荐使用table来布局，但在二维数据展示的方面它是最好的选择

表格标题要用caption ，表头用 thead 包围，护体用 tbody ，尾部用 tfoot ，表头用 th ，一般单元格用 td 。

其他语义化标签的问题

• 尽可能少地使用无语义标签
• 既可以用 p也可以用 div的地方，尽量用 p
• 不要使用纯样式标签，如 b， font， u等，改用CSS设置

高质量的CSS

怪异模式

浏览器为确保向后兼容，发明了标准模式和怪异模式两种解析网页的方法。

怪异模式目的是为了兼容老式的浏览器下的代码，解析方式不符合标准，因此应避免触发怪异模式。

这与DTD有关，只要文档类型定义格式正确，浏览器就会使用标准模式

组织CSS

组织CSS可以按多种角度去划分，不同角度的组织方法也有自己的道理和优缺点

推荐一种组织方法

网站内所有样式按职能分成三大类
1. base.css
2. common.css
3. page.css
三者按层叠结构共同完成一个网页的最终表现

base

位于三者最底层，提供 CSSreset 功能和 通用原子类 。是页面样式所依赖的最底层，相对稳定，基本不需要维护。

1 CSSreset,
通过重新定义标签样式，将浏览器的默认样式覆盖掉，最常见的用法是
“*{margin:0;padding:0;}”，这样存在性能问题，“ * ”是通配符，表示所有标签，包括大量生僻标签和淘汰标签,最好的方式是将常用的标签显式罗列

2 通用原子类,
一系列常用的基本类，包括：文字，定位，长宽，边距。大多数通用原子类都只包含一句CSS，命名尽量简短，方便记忆调用。

common

位于中间，提供组件级CSS类。

我们将大量需要重复的模块视为一个组件，从页面里尽可能多的将组件提取出来，放在 common层里

common 层是网站级的，不同的网站有不同的 common ，一个网站只有一个common ，最好由一人负责统一管理。

如何划分CSS模块

1.模块与模块之间尽量不要包含相同的部分，如果有相同的部分，应将他们提取出来，拆分成一个独立的模块

2.模块应在保证数量尽可能少的原则下，做到尽可能简单，以提高重用性

page

位于最高层，提供页面级样式，非高度重用的模块，我们可以放在page层，如果网站不会过于庞大，最好把所有的page层代码放在一个page.css里，配上注释，分块书写，便于维护

page应当越精简越好，能用base和common解决就尽量不用page层。page因可能由多人开发，应避免命名冲突的问题，可以通过命名规则，如class名加开发者自定义前缀来解决

CSS命名

结合骆驼命名法和划线命名法进行命名

骆驼命名法区分不同单词，划线用于表明从属关系

挂多个class会让html标签看起来臃肿，但带来的好处不容忽视

这样大大减少了类的数量，提高可维护性

另一方面使类的职责单一，弹性更强，增加类的重用性，提高开发效率

低权重原则

CSS的选择符是有权重的，当不同选择符的样式设置有冲突时，会采用权重高的选择符设置样式。

1. html 权重 1
2. class 权重 10
3. ID 权重 100

如果CSS选择符权重相同，选择最后定义的选择符定义的样式

使用子选择器会增加css选择符的权重，选择符权重越高，样式越不易被覆盖，越容易对其他选择符产生影响，因此尽量不要使用子选择器，保证样式容易被覆盖，提高可维护性，css选择符需保证权重尽可能低。

多添加class并没有太大坏处，反而比使用子选择器更利于维护

id 和 class

因为使用id作为挂钩，不能重用，所以一般情况下尽量使用class，少用id。