写个人项目是最爽的,再稀烂的代码都是自己的孩子,一把屎一把尿写出来的,总能认得。但是阅读本文的你,多半是给别人写码,面向老板编程的。你的码保不齐日后要别人维护。为了写出放心的码,提高搬砖效率,统一编码规范是必然的选择。
有观众可能要问了,我们不是有lint工具吗?
HTML
基本
doctype
每个页面开头,使用简单的<!DOCTYPE html>
来启用标准模式。
charset
无特殊情况时,统一使用UTF-8
lang
推荐在html元素上使用lang
属性
viewport
建议指定页面的viewport属性,保证移动端的友好展示
|
|
title
head
中必须要有title
标签。
IE兼容模式
如不是特殊需要,通过edge mode通知IE使用最新的兼容模式。
CSS和JavaScript引入
引入CSS和JavaScript时不需要指明
type
,因为text/css
和text/javascript
分别是他们的默认值。12345678910111213<!-- bad --><head><link type="text/css" rel="stylesheet" href="index.css"><script type="text/javascript" src="index.js"></script></head><!-- good --><head><link rel="stylesheet" href="index.css"><script src="index.js"></script></head>CSS在
<head></head>
中引入,基础JS脚本在<head></head>
引入,其余在<body>
结束标签前引入
缩进
必须使用两个空格表示一个缩进层级,禁止使用tab
|
|
换行
单行不能超过120个字符
标签名称和标签属性统一使用小写
|
|
综上,下面是一个建议的html脚手架
|
|
标签
非自闭合标签必须有开始和结束标签,自动闭合标签不建议在结尾处使用斜线
/
123456<!-- bad --><div class="foo" /><img src="foo.png" /><!-- good --><div class="foo"></div><img src="foo.png">建议使用语义化标签
1234567891011<!-- good --><header></header><section><nav>Navbar</nav><article><time>2017</time><figure></figure></article><aside></aside></section><footer></footer>避免标签嵌套层级过深,尤其是无语义的嵌套
123456789<!-- bad --><div class="foo"><div class="bar"><div class="container"><div class="content"></div></div></div></div>
命名
标签名
必须使用小写字母加连字符的命名方式
|
|
class
属性
使用小写字母加连字符,需要在Javascript中使用时,以J_
开头,接大驼峰命名
|
|
id
属性
同上。建议使用class
属性关联CSS。
属性
使用双引号包裹
|
|
Boolean属性
不要为Boolean属性指定值。
一个元素中 Boolean 属性的存在表示取值true,不存在则表示取值false。
|
|
自定义属性
必须以data-
为前缀,保证可读
|
|
顺序
保证可读性,一致的属性顺序可以提高压缩率。按照出现频率,依次是:
class
id
data-*
- …
少用style
属性
建议使用class
来控制样式,可以提高可维护性和可读性。
不在属性值中使用JavaScript语句
|
|
多媒体
img
的src
属性禁止留空- 为
img
标签添加alt
属性以声明替代文本 - 在多媒体标签内部提供指示浏览器不支持该标签的说明,如
object
、audio
、video
|
|
CSS
基本
推荐使用两个空格缩进
12345678/* bad */.example {color: #fff;}/* good */.example {color: #000;}单行不能超过120个字符,除非不可分割,如URL
声明块左花括号前推荐添加空格
123456789/* bad */.example{width: 100px;}/* good */.example {height: 15px;}声明块右花括号推荐单独成行
12345678/* bad */.example {width: 100px;}/* good */.example {height: 15px;}声明语句
:
后需要有空格,前无空格123456789/* bad */.example {left:15px;}/* good */.example {top: 15px;}声明语句必须以分号结尾
123456789/* bad */.example {left:15px}/* good */.example {top: 15px;}
注释
文档注释
声明在文件头部,表示文件作用
代码注释
传达代码上下文和目标,应该容易被人类理解。不要简单重复类名等冗余信息。
命名
同HTML规范,小写字母加短划线-
。在JavaScript中出现的类名用J_
开头,后接大驼峰命名,这类的class
不能出现在CSS文件中。
值
文本内容必须使用双引号包裹
12345678910/* bad */html[lang|=zh] q:before {font-family: 'Microsoft YaHei', sans-serif;content: '“';}/* good */html[lang|="zh"] q:before {font-family: "Microsoft YaHei", sans-serif;content: "“";}“0”值后不要使用单位。
123456789/* bad */.example {margin: 0px;}/* good */.example {margin: 0;}长度数值是0 - 1间的小数时,忽略整数部分的
0
123456789/* bad */panel {opacity: 0.8}/* good */panel {opacity: .8}颜色值必须使用小写的十六进制表示,禁止使用颜色名和
rgb()
,带有透明度时可以使用rgba()
1234567891011/* bad */.success {box-shadow: 0 0 2px rgba(0,128,0,.3);border-color: rgb(0, 128, 0);}/* good */.success {box-shadow: 0 0 2px rgba(0, 128, 0, .3);border-color: #008000;}可以缩写时,颜色值必须缩写
123456789/* bad */.success {background-color: #aaccaa;}/* good */.success {background-color: #aca;}url()
函数中的路径禁止带引号,绝对路径时可以省去协议名123.logo {background: url(//assets/logo.png);}
选择器
一个rule包含多个选择器时,每个选择器必须独占一行
1234567891011/* bad */.post, .page, .comment {line-height: 1.5;}/* good */.post,.page,.comment {line-height: 1.5;}属性选择器中的值必须用双引号包裹
123p[lang|="zh"] {font-size: 12px;}选择器层级不要超过5级,靠后的选择器尽量精确
123456789/* bad */.main .top .left .mod-a .content .detail {padding-left: 15px;}/* good */.content .detail {padding-left: 15px;}
属性
建议相关的属性说明放在一组,并按下面顺序排列
- 定位(position、left、right、top、bottom、z-index)
- 盒子模型(display、float、width、height、margin、padding、border、border-radius)
- 排印(font、color、background、line-height、text-align)1234567891011121314151617181920212223.mod-example {/* 定位 */position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: 100;/* 盒模型 */display: block;float: right;width: 100px;height: 100px;margin: 15px auto;padding: 10px 15px;border: 1px solid #ccc;/* 排印 */font: normal 13px "Helvetica Neue", sans-serif;line-height: 1.5;color: #333;background-color: #f5f5f5;text-align: center;}
可以缩写时,建议缩写属性,如
font
,margin
等1234567891011/* good */.post {font: 12px/1.5 arial, sans-serif;}/* bad */.post {font-family: arial, sans-serif;font-size: 12px;line-height: 1.5;}尽量不使用
!important
声明
字体
font-family
中必须使用字体族的英文名称,其中如有空格等特殊字符,必须使用双引号包裹。123h1 {font-family: "Microsoft YaHei";}font-family
按效果从优到通用顺序编写123h1 {font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft YaHei", sans-serif;}需要在Windows平台下显示的内容,
font-size
禁止小于12px,否则会模糊不清ling-height
建议使用数值123.text {line-height: 1.5;}建议减少使用自定义中文字体,通常体积很大,很影响页面加载
响应式
媒体查询必须放在尽可能相关的规则附近,不得单独编排
1234567891011121314151617181920212223242526/* bad *//* header styles *//* main styles *//* footer styles */@media (...) {/* header styles *//* main styles *//* footer styles */}/* good *//* header styles */@media (...) {/* header styles */}/* main styles */@media (...) {/* main styles */}/* footer styles */@media (...) {/* footer styles */}媒体查询有多个条件分隔时,每个条件必须另起一行
1234567@media(-webkit-min-device-pixel-ratio: 2), /* Webkit-based browsers */(min--moz-device-pixel-ratio: 2), /* Older Firefox browsers (prior to Firefox 16) */(min-resolution: 2dppx), /* The standard way */(min-resolution: 192dpi) { /* dppx fallback *//* Retina-specific stuff here */}媒体查询针对每一个种屏幕(大、中、小)的建议单独组织为一个文件
12345678910111213141516/* base.css */.element {}.element-avatar {}.element-selected {}/* base-media-small.css */@media (min-width: 480px) {.element {}.element-avatar {}.element-selected {}}
其他
- 禁止使用JavaScript