前端HTML/CSS书写规范

发布 : 2017-04-22 分类 : WEB 浏览 :

最近收集来自google、twitter、 腾讯、 淘宝等互联网公司对前端 HTML 、CSS 、 Javascript 等一些规范。总结于下,有部分删减。希望大家在书写规范上起到一定作用。规范没有绝对,有不足之处敬请补充!

为何规范?

  1. 规范不是一种约束,而是一种约定,强调团队的一致性
  2. 加强团队的合作性,提高协作效率
  3. 形成一种团队文化,积累知识
  4. 规范最终是为项目服务的,我们所做的一切都是为了优化项目和流程提高我们的工作效率

HTML 规范

  • 分离的标记、样式和脚本
    结构、表现、行为分离

  • 在可能情况下验证你的标记
    使用编辑器验证你的标记是否正确,一般编辑器都自带有这个功能。

  • 技术不支持的时候使用备胎
    如canvas

  • 编码格式
    使用UTF-8

  • 语义性
    对于HTML5而言,例如header、footer、nav、section等跟div能实现的功能基本类似,但是语义性上有着天壤之别。

  • TODO待定项
    尚未实现的或待定的内容一定要标识强调出来,利用TODO辨识,而非其他诸如@@来强调。 在todo项中如果有必要列明联系人,比如负责人。在TODO后追加一个冒号作为行动内容,例 如 TODO:增加HTML5模板

  • 多媒体后备:为多媒体提供备选内容
    典型就是为img添加alt内容。

  • HTML 的模块化

1
2
3
4
5
6
7
<div id="module-1" class="module">
<h3>TITLE</h3>
<p class="module-item">
some text
</p>
</div>
<!-- #module .module end -->

CSS 规范

一、CSS文件

  • 注释
1
2
3
4
5
6
 /*
@name: 文件的名称
@description: 简要的描述这个css 文件功能
@require: 依赖文件,没有就不用写
@author: 作者 最好附带联系方式(邮箱)
*/
  • 文件编码级
    编码必须使用utf-8(无BOM)

二、 CSS书写顺序

不去完全按照某个书写顺序来写。但我们应该养成良好的习惯,让看代码的人更易理解。易读对于团队协作来说是非常重要的:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
1. 框架为先,细节次之。
比如写一个浮动容器的样式,我们应该先让这个容器的框架被渲染出来,让大家看到基本的网站框架。然后再再去渲染容器里面的内容。最终呈现给用户. 通常像 color font padding 之类的,写在后面。

.selector{float:left;width:300px;height:200px;font-size:14px;color:#f36;}

2. 有因才有果。

比如想使用"图片替换文字"技术,通常要使用的text-indent。如果我们使用标签的是

span:<span>这个文字将被图片替换</span>,那么正确写法:

.thepic{display:block;text-indent:-9999em;}
我们应该是先将 span 变成"块级元素",再将文字 indent。而不是先 indent 再变成块级 的。
又如我们,如果想让一个 span 使用 margin, 那么我们应该这样写:
span{display:block;margin-bottom:10px;}

而非margin-bottom先行,因为没有 display 之前,行内元素是没有 margin 的。
  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等)

三、 CSS书写规范

  • 模块注释
1
2
3
4
5
6
7
8
9
10
11
12
13
/* 区域模块-1    分模块的写上注释 */
.classname, .ued{
background:#f60 url(xxx/orange.png) no-repeat 0 0;
}
.ued>ul li>a{
font-size:10px;
}

/*区域模块-2 分模块的写上注释 */
.classname{
width:950px;
margin:0 auto;
}
  • 避免内联样式

  • 避免使用低效选择器,参考这里

  • 不要随意使用id

    id在JS是唯一的,不能多次使用,而使用class类选择器却可以重复使用,另外id的优先级优先与class,所以id应该按需使用,而不能滥用。

  • 使用有效的CSS, 除非是bugs处理或专属语法(浏览器私有前缀)

  • 使用短ID或类命名,但确保他们不要太过隐晦,或直白(如#blue-button)

  • 大型项目使用前缀,如#xyz-help, .xyz-column

  • 选择器尽可能简单,如#example,而不是ul #example

1
2
3
4
5
6
7
8
9
10
// 反对
border-width: 1px;
border-style: solid;
border-color: #ccc;

// 赞
border:1px solid #ccc;

color :#99ccff; // 反对
color :#9cf; // 赞
  • 使用缩写

  • url()中不使用引号,0后面不跟单位

1
2
margin: 0px auto;   // 反对
margin: 0 auto // 赞
  • 去掉小数点 0
1
2
opacity: 0.8;  // 反对
opacity : .8; // 赞
  • 每个声明最后都要有分号(即使是最后一个)

  • 避免浏览器hacks

  • 浏览器前浏览器私有写法在前,标准写法在后。

1
2
3
-moz-box-shadow: 1px 2px 3px #ddd;
-webkit-box-shadow: 1px 2px 3px #ddd;
box-shadow: 1px 2px 3px #ddd;
  • 注释
1
根据需要解释代码,这个就不多说了,团队开发这个非常重要,尽管很多时候大家不愿意遵守,但确实重要!!!

四、CSS样式表文件命名

  • 主要的 master.css

  • 模块 module.css

  • 基本共用 base.css

  • 布局、版面 layout.css

  • 主题 themes.css

  • 专栏 columns.css

  • 文字 font.css

  • 表单 forms.css

  • 补丁 mend.css

  • 打印 print.css

本文转自 c_k 的博客,由 阿星 排版及美化,转载请注明出处!

本文作者 : Richex
原文链接 : https://blog.richex.cn/130.html
版权声明 : 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处!

欢迎打赏

微信扫一扫, 向我投食

微信扫一扫, 向我投食

支付宝扫一扫, 向我投食

支付宝扫一扫, 向我投食

留下足迹