HTML/CSS 代码规范整理

大小写

所有的代码都用小写字母:适用于元素名、属性、属性值(除了文本和 CDATA )、 选择器、特性、特性值(除了字符串)

<!-- 不推荐 -->
<A HREF="/">Home</A>
<!-- 推荐 -->
<img src="image.png" alt="image">

行尾空格

删除行尾白空格,行尾空格没必要存在

<!-- 不推荐 -->
<p>What? 
<!-- 推荐 -->
<p>Yes please

文档类型

尽量使用HTML5标准

HTML5是目前所有HTML文档类型中的首选:

(推荐用HTML文本文档格式,即 text/html 不要用 XHTML、XHTML格式,即 application/xhtml+xml , 有俩浏览器完全不支持,还比HTML用更多的存储空间)

多媒体后备方案

为多媒体提供备选内容

对于多媒体,如图像、视频,通过 canvas 读取的动画元素,确保提供备选方案。 对于图像使用有意义的备选文案( alt ) 对于视频和音频使用有效的副本和文案说明

提供备选内容是很重要的,原因:给盲人用户以一些提示性的文字,用 @alt 告诉他这图像是关于什么的,给可能没理解视频或音频的内容的用户以提示

(图像的 alt 属性会产生冗余,如果使用图像只是为了不能立即用CSS而装饰的 ,就不需要用备选文案了,可以写 alt="" )

<!-- 不推荐 -->
<img src="spreadsheet.png">
<!-- 推荐 -->
<img src="spreadsheet.png" alt="电子表格截图">

type属性

在样式表和脚本的标签中忽略 type 属性
HTML5默认 type 为 text/css 和 text/javascript 类型,所以没必要指定。即便是老浏览器也是支持的

<!-- 不推荐 -->
<link rel="stylesheet" href="style.css"
  type="text/css">
<!-- 推荐 -->
<link rel="stylesheet" href="style.css">
<!-- 不推荐 -->
<script src="javascript.js"
  type="text/javascript"></script>
<!-- 推荐 -->
<script src="javascript.js"></script>

id和class的命名

为id和class取通用且有意义的名字

应该从id和class的名字上就能看出这元素是干嘛用的,而不是表象或模糊不清的命名

应该优先虑以这元素具体目来进行命名,这样他就最容易理解,减少更新

通用名称可以加在兄弟元素都不特殊或没有个别意义的元素上,可以起名类似“helpers”这样的泛

使用功能性或通用的名字会减少不必要的文档或模板修改

/* 不推荐: 无意义 不易理解 */
#yee-1901 {}
/* 不推荐: 表达不具体 */
.button-green {}
.clear {}
/* 推荐: 明确详细 */
#gallery {}
#login {}
.video {}
/* 推荐: 通用 */
.aux {}
.alt {}

id和class命名风格

非必要的情况下,id和class的名称应尽量简短
简要传达id或class是关于什么的

通过这种方式,似的代码易懂且高效

/* 不推荐 */
#navigation {}
.atr {}
/* 推荐 */
#nav {}
.author {}

属性缩写

写属性值的时候尽量使用缩写
CSS很多属性都支持缩写shorthand (例如 “margin”、“padding”、“background”、“font”、“border”、“color” 等) 尽量使用缩写,甚至只设置一个值

使用缩写可以提高代码的效率和方便理解

/* 不推荐 */
border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;
/* 推荐 */
border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;

**0和单位**

省略0后面的单位
非必要的情况下 0 后面不用加单位

margin: 0;
padding: 0;

**0开头的小数**

省略0开头小数点前面的0
值或长度在-1与1之间的小数,小数前的 0 可以忽略不写

font-size: .8em;

十六进制

十六进制尽可能使用3个字符
加颜色值时候会用到它,使用3个字符的十六进制更短与简洁

/* 不推荐 */
color: #eebbcc;
/* 推荐 */
color: #ebc;

id和class命名的定界符

id和class名字有多单词组合的用短破折号“-”分开
别在选择器名字里用短破折号“-”以外的连接词(包括啥也没有), 以增进对名字的理解和查找

/* 不推荐:“demo”和“image”中间没加“-” */
.demoimage {}  
/* 不推荐:用下划线“_”是屌丝的风格 */
.error_status {}
/* 推荐 */
#video-id {}
.ads-sample {}

声明顺序

依字母顺序进行声明
都按字母顺序声明,很容易记住和维护

忽略浏览器的特定前缀排序,但多浏览器特定的某个CSS属性前缀应相对保持排序(例如-moz前缀在-webkit前面)

background: fuchsia;
border: 1px solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;
text-align: center;
text-indent: 2em;

代码块内容缩进

缩进所有代码块(“{}”之间)内容
缩进所有代码块的内容,它能够提高层次结构的清晰度

@media screen, projection {

  html {
    background: #fff;
    color: #444;
  }

}

声明完结

所有声明都要用“;”结尾
考虑到一致性和拓展性,请在每个声明尾部都加上分号

/* 不推荐 */
.test {
  display: block;
  height: 100px
}
/* 推荐 */
.test {
  display: block;
  height: 100px;
}

属性名完结

在属性名冒号结束后加一个空字符。
出于一致性的原因,在属性名和值之间加一个空格(可不是属性名和冒号之间噢)。

/* 不推荐 */
h3 {
  font-weight:bold;
}
/* 推荐 */
h3 {
  font-weight: bold;
}

选择器和声明分行

将选择器和声明隔行
每个选择器和声明都要独立新行

/* 不推荐 */
a:focus, a:active {
  position: relative; top: 1px;
}
/* 推荐 */
h1,
h2,
h3 {
  font-weight: normal;
  line-height: 1.2;
}

规则分行

每个规则独立一行
两个规则之间隔行

html {
  background: #fff;
}

body {
  margin: auto;
  width: 50%;
}

全局复位样式

使用全局复位样式来删除所有HTML元素的默认的样式非常不好的一种做法,不仅缓慢和效率低

/* 不推荐 */
* {
    margin: 0;
    padding: 0;
}
/* 推荐 */
body,
ul,
h1,
h2,
p {
      margin: 0;
      padding: 0;
}

不要使用IE HACK

IE Hack可能有时候作用是蛮大的,紧急时候能帮你解决大问题,但建议使用条件样式来写易于维护

/* 不推荐 */
.eml {
    _postion: relative;
    _top: 10px;
}
/* 推荐 */
<!--[if lte IE 6]> 
    <link rel="stylesheet" type="text/css" href="styles/ie-styles.css" />
<![endif]-->

然后把样式写到ie-styles.css文件中

.eml {
    postion: relative;
    top: 10px;
}

使用有义的类名和id名

/* 不推荐 */
<div class="box">
    <div class="leftBox">sidebar</div>
    <div class="mainBox">main content</div>
</div>
/* 推荐 */
<div class="container">
    <div class="aside">sidebar</div>
    <div class="content">main content</div>
</div>

压缩CSS代码

如果你的项目调试完成,只差上传到服务器上时,那么在上传你的文件之前,最好使用相关的压缩工具压缩你的CSS代码,以减少文件大小,提高网页的加载时间

编写一致的CSS

当你在同时开发多个Web项目中时,你应该尽量编写一些相同的CSS代码,让所有项目能使用到这样同的CSS代码,这样将减少你的工作量,提高你的开发效率