前端规范
1 前⾔
HTML 作为描述⽹页结构的超⽂本标记语⾔，⼀直有着⼴泛的应⽤。本⽂档的⽬标是使 HTML 代码风格保持⼀致，容易被理解和被维护。
2 代码风格
2.1 缩进与换⾏
[强制] 使⽤4个空格做为⼀个缩进层级，不允许使⽤2个空格或tab字符。
解释：
对于⾮ HTML 标签之间的缩进，⽐如 script 或 style 标签内容缩进，与 script 或 style 标签的缩进同级。
⽰例：
first
second
[建议] 每⾏不得超过120个字符。
2.2 命名
[强制] class必须单词全字母⼩写，单词间以-分隔。
[强制] class必须代表相应模块或部件的内容或功能，不得以样式信息进⾏命名。
⽰例：
[强制] 元素id必须保证页⾯唯⼀。
解释：
同⼀个页⾯中，不同的元素包含相同的id，不符合id的属性含义。并且使⽤
[建议] id建议单词全字母⼩写，单词间以-分隔。同项⽬必须保持风格⼀致。
[建议] id、class命名，在避免冲突并描述清楚的前提下尽可能短。
⽰例：
[强制] 禁⽌为了hook 脚本，创建⽆样式信息的class。
解释：
不允许class只⽤于让 JavaScript 选择某些元素，class应该具有明确的语义和样式。否则容易导致 CSS class 泛滥。
使⽤id、属性选择作为 hook 是更好的⽅式。
[强制] 同⼀页⾯，应避免使⽤相同的name与id。
解释：
IE 浏览器会混淆元素的id和name属性，ElementById可能获得不期望的元素。所以在对元素的id与name属性的命名需要⾮常⼩⼼。
2.3 标签
[强制] 标签名必须使⽤⼩写字母。
[强制] 对于⽆需⾃闭合的标签，不允许⾃闭合。
解释：
常见⽆需⾃闭合标签有input、br、img、hr等。
[强制] 对HTML5中规定允许省略的闭合标签，不允许省略闭合标签。
[强制] 标签使⽤必须符合标签嵌套规则。
解释：
⽐如div不得置于p中，tbody必须置于table中。
[建议] HTML 标签的使⽤应该遵循标签的语义。
解释：
下⾯是常见标签语义
p - 段落
h1,h2,h3,h4,h5,h6 - 层级标题
strong,em - 强调
ins - 插⼊
del - 删除
abbr - 缩写
code - 代码标识
cite - 引述来源作品的标题
q - 引⽤
blockquote - ⼀段或长篇引⽤
ul - ⽆序列表
ol - 有序列表
dl,dt,dd - 定义列表
[建议] 在 CSS 可以实现相同需求的情况下不得使⽤表格进⾏布局。
解释：
在兼容性允许的情况下应尽量保持语义正确性。对⽹格对齐和拉伸性有严格要求的场景允许例外，如多列复杂表单。
[建议] 标签的使⽤应尽量简洁，减少不必要的标签。
2.4 属性
[强制] 属性名必须使⽤⼩写字母。
[强制] 属性值必须⽤双引号包围。
解释：
不允许使⽤单引号，不允许不使⽤引号。
[建议] 布尔类型的属性，建议不添加属性值。
html5开发示例⽰例：
[建议] ⾃定义属性建议以xxx-为前缀，推荐使⽤data-。
解释：使⽤前缀有助于区分⾃定义属性和标准定义的属性。
3 通⽤
3.1 DOCTYPE
[强制] 使⽤HTML5的doctype来启⽤标准模式，建议使⽤⼤写的DOCTYPE。
[建议] 启⽤ IE Edge 模式。
⽰例：
[建议] 在html标签上设置正确的lang属性。
解释：
有助于提⾼页⾯的可访问性，如：让语⾳合成⼯具确定其所应该采⽤的发⾳，令翻译⼯具确定其翻译语⾔等。
⽰例：
3.2 编码
[强制] 页⾯必须使⽤精简形式，明确指定字符编码。指定字符编码的meta必须是head的第⼀个直接⼦元素。
解释：见HTML5 Charset能⽤吗⼀⽂。
⽰例：
...... ......
[建议] HTML⽂件使⽤⽆BOM的UTF-8编码。
解释：UTF-8编码具有更⼴泛的适应性。BOM` 在使⽤程序或⼯具处理⽂件时可能造成不必要的⼲扰。
3.3 CSS 和 JavaScript 引⼊
[强制] 引⼊CSS时必须指明rel='stylesheet'。
[建议] 引⼊CSS和JavaScript时⽆须指明type属性。
解释：text/css和text/javascript是type的默认值。
[建议] 展现定义放置于外部CSS中，⾏为定义放置于外部JavaScript中。
解释：结构-样式-⾏为的代码分离，对于提⾼代码的可阅读性和维护性都有好处。
[建议] 在head中引⼊页⾯需要的所有CSS资源。
解释：在页⾯渲染的过程中，新的CSS可能导致元素的样式重新计算和绘制，页⾯闪烁。[建议] JavaScript应当放在页⾯末尾，或采⽤异步加载。
解释：将script放在页⾯中间将阻断页⾯的渲染。
4 head
4.1 title
[强制] 页⾯必须包含title标签声明标题。
[强制] title必须作为head的直接⼦元素，并紧随charset声明之后。
解释：title中如果包含 ASCII 之外的字符，浏览器需要知道字符编码类型才能进⾏解码，否则可能导致乱码。
4.2 favicon
[强制] 保证favicon可访问。
解释：在未指定 favicon 时，⼤多数浏览器会请求 Web Server 根⽬录下的favicon.ico。为了保证favicon 可访问，避免 404，必须遵循以下两种⽅法之⼀：
1. 在 Web Server 根⽬录放置favicon.ico⽂件。
2. 使⽤link指定 favicon。
⽰例：
4.3 viewport
[建议] 若页⾯欲对移动设备友好，需指定页⾯的viewport。
解释：viewport meta tag 可以设置可视区域的宽度和初始缩放⼤⼩，避免在移动设备上出现页⾯展⽰不
正常。
⽐如，在页⾯宽度⼩于980px时，若需 iOS 设备友好，应当设置 viewport 的width值来适应你的页⾯宽度。同时因为不同移动设备分辨率不同，在设置时，应当使⽤device-width和device-height 变量。
另外，为了使 viewport 正常⼯作，在页⾯内容样式布局设计上也要做相应调整，如避免绝对定位等。
5 图⽚
[强制] 禁⽌img的src取值为空。延迟加载的图⽚也要增加默认的src。
解释：src取值为空，会导致部分浏览器重新加载⼀次当前页⾯，参
考：developer.yahoo/performance/rules.html#emptysrc
[建议] 避免为img添加不必要的title属性。
解释：多余的title影响看图体验，并且增加了页⾯尺⼨。
[建议] 为重要图⽚添加alt属性。
解释：可以提⾼图⽚加载失败时的⽤户体验。
[建议] 添加width和height属性，以避免页⾯抖动。
[建议] 有下载需求的图⽚采⽤img标签实现，⽆下载需求的图⽚采⽤ CSS 背景图实现。
解释：
1. 产品 logo、⽤户头像、⽤户产⽣的图⽚等有潜在下载需求的图⽚，以img形式实现，·
2. ⽆下载需求的图⽚，⽐如：icon、背景、代码使⽤的图⽚等，尽可能采⽤ CSS 背景图实
现。
6 表单
6.1 控件标题
[强制] 有⽂本标题的控件必须使⽤label标签将其与其标题相关联。
有两种⽅式：
1. 将控件置于label内。
2. label的for属性指向控件的id。
推荐使⽤第⼀种，减少不必要的id。如果 DOM 结构不允许直接嵌套，则应使⽤第⼆种。
6.2 按钮
[强制] 使⽤button元素时必须指明type属性值。
解释：button元素的默认type为submit，如果被置于form元素中，点击后将导致表单提交。为显⽰区分其作⽤⽅便理解，必须给出type属性。
[建议] 尽量不要使⽤按钮类元素的name属性。
解释：由于浏览器兼容性问题，使⽤按钮的name属性会带来许多难以发现的问题。具体情况可参考此⽂。
7 模板中的 HTML
[建议] 模板代码的缩进优先保证 HTML 代码的缩进规则。
⽰例：
{if $display == true}
{foreach $item_list as $item}
{$item.name}
{/foreach}
{/if}{if $display == true}
{foreach $item_list as $item}
{$item.name}
{/foreach}
{/if}
[建议] 模板代码应以保证 HTML 单个标签语法的正确性为基本原则。
⽰例：
{ $pe_name }
{ $pe_name }
[建议] 在循环处理模板数据构造表格时，若要求每⾏输出固定的个数，建议先将数据分组，之后再循环输出。
⽰例：
{foreach $item_list as $item_group} {foreach $item_group as $item} {/foreach} {/foreach}
{ $item.name }
{foreach $item_list as $item} {if $item@iteration is div by 5} {/if} {/foreach}
{ $item.name }
8 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等)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。