A-A+

html+css怎么编写规范和标准

2015年07月07日 htmlcss 暂无评论 阅读 81 次

前端HTML/CSS书写规范

为何规范?**

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

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


HTML 规范

  • 分离的标记、样式和脚本

    结构、表现、行为分离

  • 在可能情况下验证你的标记

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

  • 技术不支持的时候使用备胎,如canvas
  • 编码格式:使用UTF-8
  • 语义性

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

  • TODO待定项

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

  • 多媒体后备:为多媒体提供备选内容

    典型就是为img添加alt内容。

  • HTML 的模块化

    <div id="module-1" class="module">
    <h3>TITLE</h3>
    <p class="module-item">
    some text
    </p>
    </div> <!-- #module .module end -->`


CSS 规范

一、CSS文件

  • 注释

    /*
    @name: 文件的名称
    @description: 简要的描述这个css 文件功能
    @require: 依赖文件,没有就不用写
    @author: 作者 最好附带联系方式(邮箱)
    */

  • 文件编码级

    编码必须使用utf-8(无BOM)

二、 CSS书写顺序

不去完全按照某个书写顺序来写。但我们应该养成良好的习惯,让看代码的人更易理解。易读对于团队协作来说是非常重要的:**
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 分模块的写上注释 */
    .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
  • 使用缩写

    // 反对
    border-width: 1px;
    border-style: solid;
    border-color: #ccc;
    border:1px solid #ccc // 赞 color :#99ccff; // 反对 color :#9cf; // 赞

  • url()中不使用引号,0后面不跟单位margin: 0px auto; // 反对margin :0 auto // 赞
  • 去掉小数点 0

    opacity : 0.8; // 反对
    opacity : .8; // 赞

  • 每个声明最后都要有分号(即使是最后一个)
  • 避免浏览器hacks
  • 浏览器前浏览器私有写法在前,标准写法在后。

    -moz-box-shadow: 1px 2px 3px #ddd;
    -webkit-box-shadow: 1px 2px 3px #ddd;
    box-shadow: 1px 2px 3px #ddd;

  • 注释

    根据需要解释代码,这个就不多说了,团队开发这个非常重要,尽管很多时候大家不愿意遵守,但确实重要!!!

CSS样式表文件命名

  • 主要的 master.css
  • 模块 module.css
  • 基本共用 base.css
  • 布局、版面 layout.css
  • 主题 themes.css
  • 专栏 columns.css
  • 文字 font.css
  • 表单 forms.css
  • 补丁 mend.css
  • 打印 print.css

part2:

CSS学起来并不难,但在大型项目中,就变得难以管理,特别是不同的人在CSS书写风格上稍有不同,团队上就更加难以沟通,为此总结了一些如何实现高效整洁的CSS代码原则:

1.使用Reset但并非全局Reset

不同浏览器元素的默认属性有所不同,使用Reset可重置浏览器元素的一些默认属性,以达到浏览器的兼容。但需要注意的是,请不要使用全局Reset:

*{ margin:0; padding:0; }

这不仅仅因为它是缓慢和低效率的方法,而且还会导致一些不必要的元素也重置了外边距和内边距。在此建议参考YUI Reset和Eric Meyer的做法。我跟Eric Meyer的观点相同,Reset并不是一成不变的,具体还需要根据项目的不同需求做适当的修改,以达到浏览器的兼容和操作上的便利性。我使用的 Reset如下:

/** 清除内外边距 **/
body, h1, h2, h3, h4, h5, h6, hr, p,
blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
th, td, /* table elements 表格元素 */
img/* img elements 图片元素 */{
  border:medium none;
  margin: 0;
  padding: 0;
}
/** 设置默认字体 **/
body,button, input, select, textarea {
  font: 12px/1.5 '宋体',tahoma, Srial, helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
em{font-style:normal;}
/** 重置列表元素 **/
ul, ol { list-style: none; }
/** 重置超链接元素 **/
a { text-decoration: none; color:#333;}
a:hover { text-decoration: underline; color:#F40; }
/** 重置图片元素 **/
img{ border:0px;}
/** 重置表格元素 **/
table { border-collapse: collapse; border-spacing: 0; }

2.良好的命名习惯

无疑乱七八糟或者无语义命名的代码,谁看了都会抓狂。就像这样的代码:

.aaabb{margin:2px;color:red;}

我想即使是初学者,也不至于会在实际项目中如此命名一个class,但有没有想过这样的代码同样是很有问题的:

<h1>My name is <span class="red blod">NowaMagic</span></h1>

问题在于如果你需要把所有原本红色的字体改成蓝色,那修改后就样式就会变成:

.red{color:bule;}

这样的命名就会很让人费解,同样的命名为.leftBar的侧边栏如果需要修改成右侧边栏也会很麻烦。所以,请不要使用元素的特性(颜色, 位置,大小等)来命名一个class或id,您可以选择意义的命名 如:#navigation{...},.sidebar{...},.postwrap{...}

这样,无论你如何修改定义这些class或id的样式,都不影响它跟HTML元素间的联系。
另外还有一种情况,一些固定的样式,定义后就不会修改的了,那你命名时就不用担忧刚刚说的那种情况,如:

.alignleft{float:left;margin-right:20px;}
.alignright{float:right;text-align:right;margin-left:20px;}
.clear{clear:both;text-indent:-9999px;}

那么对于这样一个段落
<p class="alignleft">我是一个段落!</p>

如果需要把这个段落由原先的左对齐修改为右对齐,那么只需要修改它的className就为alignright就可以了。

3.代码缩写

CSS代码缩写可以提高你写代码的速度,精简你的代码量。在CSS里面有不少可以缩写的属性,包括margin,padding,border,font,background和颜色值等,如果您学会了代码缩写,原本这样的代码:

li{
font-family:Arial, Helvetica, sans-serif;
font-size: 1.2em;
line-height: 1.4em;
padding-top:5px;
padding-bottom:10px;
padding-left:5px;
}

就可以缩写为:

li{
font: 1.2em/1.4em Arial, Helvetica, sans-serif;
padding:5px 0 10px 5px;
}

如果您想更了解这些属性要怎么缩写,可以参考《常用CSS缩写语法总结》或者下载CSS-Shorthand-Cheat-Sheet.pdf 。

利用CSS继承

如果页面中父元素的多个子元素使用相同的样式,那最好把他们相同的样式定义在其父元素上,让它们继承这些CSS样式。这样你可以很好的维护你的代码,并且还可以减少代码量。那么本来这样的代码:

#container li{ font-family:Georgia, serif; }
#container p{ font-family:Georgia, serif; }
#container h1{font-family:Georgia, serif; }

就可以简写成:
#container{ font-family:Georgia, serif; }

使用多重选择器

你可以合并多个CSS选择器为一个,如果他们有共同的样式的话。这样做不但代码简洁且可为你节省时间和空间。如:

h1{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
h2{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

可以合并为
h1, h2, h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

    1. 适当的代码注释

代码注释可以让别人更容易读懂你的代码,且合理的组织代码注释,可使得结构更加清晰。你可以选择做的样式表的开始添加目录:
/*------------------------------------
1. Reset
2. Header
3. Content
4. SideBar
5. Footer
----------------------------------- */

如此你代码的结构就一目了然,你可以容易的查找和修改代码。

而对于代码的主内容,也应适当的加以划分,甚至在有必要的地方在对代码加以注释说明,这样也有利于团队开发:

/*** Header ***/
#header{ height:145px; position:relative; }
#header h1{ width:324px; margin:45px 0 0 20px; float:left; height:72px;}

/*** Content ***/
#content{ background:#fff; width:650px; float:left; min-height:600px; overflow:hidden;}
#content h1{color:#F00}/* 设置字体颜色 */
#content .posts{ overflow:hidden; }
#content .recent{ margin-bottom:20px; border-bottom:1px solid #f3f3f3; position:relative; overflow:hidden; }

/*** Footer ***/
#footer{ clear:both; padding:50px 5px 0; overflow:hidden;}
#footer h4{ color:#b99d7f; font-family:Arial, Helvetica, sans-serif; font-size:1.1em; }

给你的CSS代码排序

如果代码中的属性都能按照字母排序,那查找修改的时候就能更加快速:

/*** 样式属性按字母排序 ***/
div{
background-color:#3399cc;
color:#666;
font:1.2em/1.4em Arial, Helvetica, sans-serif;
height:300px;
margin:10px 5px;
padding:5px 0 10px 5px;
width:30%;
z-index:10;
}

保持CSS的可读性

书写可读的CSS将会使得更容易查找和修改样式。对于以下两种情况,哪种可读性更高,我想不言而明。

/*** 每个样式属性写一行 ***/

div{
background-color:#3399cc;
color:#666;
font: 1.2em/1.4em Arial, Helvetica, sans-serif;
height:300px;
margin:10px 5px;
padding:5px 0 10px 5px;
width:30%;
z-index:10;
}

/*** 所有的样式属性写在同一行 ***/
div{ background-color:#3399cc; color:#666; font: 1.2em/1.4em Arial, Helvetica, sans-serif; height:300px; margin:10px 5px; padding:5px 0 10px 5px; width:30%; z-index:10; }

当对于一些样式属性较少的选择器,我会写到一行:

/*** 选择器属性少的写在同一行 ***/
div{ background-color:#3399cc; color:#666;}

对于这个规则并非硬性规定,但无论您采用哪种写法,我的建议是始终保持代码一致。属性多的分行写,属性少于3个可以写一行。

选择更优的样式属性值

CSS中有些属性采用不同的属性值,虽然达到的效果差不多,当性能上却存在着差异,如: 区别在于border:0把border设为0px,虽然在页面上看不见,但按border默认值理解,浏览器依然对border-width/border-color进行了渲染,即已经占用了内存值。 而border:none把border设为“none”即没有,浏览器解析“none”时将不作出渲染动作,即不会消耗内存值。所以建议使用border:none; 同样的,display:none隐藏对象浏览器不作渲染,不占用内存。而visibility:hidden则会。 使用<link>代替@import 首先,@import不属于XHTML标签,也不是Web标准的一部分,它对于较早期的浏览器兼容也不高,并且对于网站的性能有某些负面的影响。具体可以参考《高性能网站设计:不要使用@import》。所以,请避免使用@import

使用外部样式表

这个原则始终是一个很好的设计实践。不单可以更易于维护修改,更重要的是使用外部文件可以提高页面速度,因为CSS文件都能在浏览器中产生 缓存。内置在HTML文档中的CSS则会在每次请求中随HTML文档重新下载。所以,在实际应用中,没有必要把CSS代码内置在HTML文档中:

<style type="text/css" >
#container{ .. }
#sidebar{ .. }
</style>

<li style="font-family:Arial, helvetica, sans-serif; color:#666; " >

而是使用<link>导入外部样式表:

<link rel="stylesheet" type="text/css" href="css/styles.css" />

避免使用CSS表达式(Expression)

CSS表达式是动态设置CSS属性的强大(但危险)方法。Internet Explorer从第5个版本开始支持CSS表达式。下面的例子中,使用CSS表达式可以实现隔一个小时切换一次背景颜色:
background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

如上所示,expression中使用了JavaScript表达式。CSS属性根据JavaScript表达式的计算结果来设置。

表达式的问题就在于它的计算频率要比我们想象的多。不仅仅是在页面显示和缩放时,就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS表达式增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。

如果必须使用CSS表达式,一定要记住它们要计算成千上万次并且可能会对你页面的性能产生影响。所以,在非不得已,请避免使用CSS表达式。

代码压缩

当你决定把网站项目部署到网络上,那你就要考虑对CSS进行压缩,出去注释和空格,以使得网页加载得更快。压缩您的代码,可以采用一些工具,如YUI Compressor 利用它可精简CSS代码,减少文件大小,以获得更高的加载速度。

标签:

给我留言

Copyright © web前端技术开发个人博客 保留所有权利  京ICP备14060653号 Theme  Ality

用户登录