整理来自企业的HTML及CSS规范--ife.baidu.com编码规范

    前言：每个公司都会有自己的编码规范，这样有助于代码的风格保持一致，容易被理解和被维护，以及方便项目之间的沟通交流与合作，以下规范仅做参考。

一、HTML编码规范

    1  代码风格

    1.1缩进与换行

        使用4个空格作为一个缩进层级，不允许使用2个空格或tab字符。

    1.2命名

        class必须单词全字母小写，单词间以-分隔；

        class必须代表相应模块或部件的内容或功能，不得以样式信息进行命名。

        元素id必须保证页面唯一。

        id建议单词全字母小写，单词间以-分隔。同项目必须保持风格一致。

        id、class命名，在避免冲突并描述清楚的前提下尽可能短。

        禁止为了hook脚本，创建无样式信息的class。

        （解释：不允许class只用于让JavaScript选择某些元素，class应该具有明确的语义和样式。否则容易导致CSS class泛滥。使用id、属性选择作为hook是更好的方式。）

        同一页面，应避免使用相同的name与id。

        （解释：IE游览器会混淆元素的id和name属性，document.getElementById可能获得不期望的元素。所以在对元素的id与name属性的命名需要非常小心。一个较好的实践是，为id和name使用不同的命名法。）

    1.3标签

        标签名必须使用小写字母。

        对于无需自闭和的标签，不允许自闭合。

        （解释：常见无需自闭合标签有input、br、img、hr等。）

        标签使用必须符合标签嵌套规则。

        （解释：比如div不得置于p中，tbody必须置于table中。）

        HTML标签的使用应该遵循标签的语义。

        解释：

        下面是常见标签语义：

        ●p--段落

        ●h1,h2,h3,h4,h5,h6--层级标题

        ●strong,em--强调

        ●ins--插入

        ●del--删除

        ●abbr--缩写

        ●abbr--缩写

        ●code--代码标识

        ●cite--引述来源作品的标题

        ●q--引用

        ●blockquote--一段或长篇引用

        ●ul--无序列表

        ●ol--有序列表

        ●dl,dt,dd--定义列表

        在CSS可以实现相同需求的情况下不得使用表格进行布局。

        （解释：在兼容性允许的情况下，应尽量保持语义正确性。对网格对齐和拉伸有严格要求的场景允许例外，如多列复杂表单。）

        标签的使用应尽量简洁，减少不必要的标签。

        1.4属性

            属性名必须使用小写字母。

...

            属性值必须用双引号包围。

            （解释：不允许使用单引号，不允许不使用引号。）

            布尔类型的属性，建议不添加属性值。

            自定义属性建议以xxx-为前缀，推荐使用data-。

            (解释：使用前缀有助于区分自定义属性和标准定义的属性。)

    2  通用

        2.1DOCTYPE

            使用html5的doctype来启用标准模式，建议使用大写的DOCTYPE。

            启用IE Edge 模式。

            在html标签上设置正确的lang属性。

            （解释：有助于提高页面的可访问性，如：让语音合成工具确定其所应该采用的发音，令翻译工具确定其翻译语言等。）

        2.2编码

            页面必须使用精简形式，明确指定字符编码。指定字符编码的meta必须是head的第一个子元素。

    
        
        ......
    
    
    ......
    

            HTML文件使用无BOM的UTF-8编码。           

          (解释：UTF-8编码具有更广泛的适应性。BOM在使用程序或工具处理文件时可能造成不必要的干扰。)

        2.3CSS和JavaScript引入

            引入CSS时必须指明rel="stylesheet"。

            引入CSS和JavaScript时无须指明type属性。

            （解释：text/css和text/javascript是type的默认值。）

            展现定义放置于外部CSS中，行为定义放置于外部JavaScript中。

            （解释：结构-样式-行为的代码分离，对于提高代码的可阅读性和维护性都有好处。）

            在head中引入页面需要的所有CSS资源。

            （解释：在页面渲染的过程中，新的CSS可能导致元素的样式重新计算和绘制，页面闪烁。）

            JavaScript应当放在页面末尾，或采用异步加载。

            （解释：将script放在页面中间将阻断页面的渲染。出于性能方面的考虑，如非必要，请遵守此条建议。）

            建议：移动环境或只针对现代游览器设计的Web应用，如果引用外部资源的URL协议部分与页面相同，建议省略协议前缀。

    3  head

        3.1 title

            页面必须包含title标签声明标题。

            title必须作为head的直接子元素，并紧随charset声明之后。

            （解释：title中如果包含ASCII之外的字符，游览器需要知道字符编码类型才能进行编码，否则可能导致乱码。）

        3.2 favicon

            保证favicon可访问。

         （解释：在未指定favicon时，大多数游览器会请求Web Server根目录下的favicon.ico。为了保证favicon可访问，避免404，必须遵循以下两种方法之一：

            1.在Web Server根目录放置favicon.ico文件。

            2.使用link指定favicon。）

        3.3 viewport

            若页面欲对移动设备友好，需指定页面的viewport。

            （解释：viewport meta tag可以设置可视区域的宽度和初始缩放大小，避免在移动设备上出现页面展示不正常。

                        比如，在页面宽度小于980px时，若需iOS设备友好，应当设置viewport的width值来适应你的页面宽度。同时因为不同移动分辨率不同，在设置时，应当使用device-width和device-height变量。

                        另外，为了使viewport正常工作，在页面内容样式布局设计上也要做相应调整，如避免绝对定位等。）

       4  图片

          禁止img的src取值为空。延迟加载的图片也要增加默认的src。

          （解释：src取值为空，会导致部分游览器重新加载一次当前页面。）

         避免为img添加不必要的title属性。

        （解释：多余的title影响看图体验，并且增加了页面尺寸。）

         为重要图片添加alt属性。

        （解释：可以提高图片加载失败时的用户体验。）

         添加width和height属性，以避免页面抖动。

         有下载需求的图片采用img标签实现，无下载需求的图片采用CSS背景图实现。

        （解释：1.产品logo、用户头像、用户产生的图片等有潜在下载需求的图片，以img形式实现，能方便用户下载。

                      2.无下载需求的图片，比如：icon、背景、代码使用的图片等，尽可能采用CSS背景图实现。）

        5 表单

            5.1 控件标题

                  有文本标题的控件必须使用label标签将其与其标题相关联。

                   （解释：有两种方式：

                                1.将控件置于label内；

                                2. label的for属性指向控件的id。）

                    推荐使用第一种，减少不必要的id。如果DOM结构不允许直接嵌套，则应使用第二种。

我已确认上述条款
用户名：

            5.2按钮

                使用button元素时必须指明type属性值。

                （解释：button元素的默认type为submit，如果被置于form元素中，点击后将导致表单提交。为显示区分其作用方便理解，必须给出type属性。）

提交
取消

                尽量不要使用按钮类元素的name属性。

                （解释：由于游览器的兼容性问题，使用按钮的name属性会带来许多难以发现的问题。）

        5.3可访问性

            负责主要功能的按钮在DOM中的顺序应靠前。

            （解释：负责主要功能的按钮应相对靠前，以提高可访问性。如果在CSS中指定了float:right;则可能导致视觉主按钮在前，而DOM中主按钮靠后的情况。）

    

        提交
        取消
    

            当使用JavaScript进行表单提交时，如果条件准许，应使原生提交功能正常工作。

            （解释：当游览器JS运行错误或关闭JS时，提交功能将无法工作。如果正确指定了form元素的action属性和表单控件的name属性时，提交仍可继续进行。）

            在针对移动设备开发的页面时，根据内容类型指定输入框的type属性。

            （解释：根据内容类型指定输入框类型，能获得能友好的输入体验。）

        6多媒体

            当在现代游览器中使用audio以及video标签来播放音频、视频时，应当注意格式。

            （解释：

                        音频应尽可能覆盖到如下格式：

                        ●MP3

                        ●WAV

                        ●Ogg

                        视频应尽可能覆盖到如下格式：

                        ●MP4

                        ●WebM

                        ●Ogg ）

                        在支持HTML5的游览器中优先使用audio和video标签来定义音视频元素。

                        使用退化到插件的方式来对多游览器进行支持。

            只在必要的时候开启音视频的自动播放。

            在object标签内部提供指示游览器不支持该标签的说明。

        7 多媒体

            模板代码的缩进优先保证HTML代码的缩进规则。

{if $display == true}

    

    {foreach $item_list as $item}
        
{$item.name}
    {foreach}
    

{/if}

            模板代码应以保证HTML单个标签语法的正确性为基本原则。

{$item.type_name}
{$item.type_name}

            在循环处理模板数据构造表格时，若要求每行输出固定的个数，建议先将数据分组，之后再循环输出。

    {foreach $item_list as $item_group}
    
    {foreach $item_group as $item}
    
    {/foreach}
   
   {/foreach}
{$item.name}

二、CSS编码规范

        1 代码规范

        1.1 文件

            CSS文件使用无BOM的UTF-8编码。

            （解释：UTF-8编码具有更广泛的适应性。BOM在使用程序或工具处理文件时可能造成不必要的干扰。）

        1.2 缩进

                使用4个空格作为一个缩进层级。

        1.3 空格

                选择器与{ 之前必须包含空格。

.selector {
}

                属性名与之后的：之间不准许包含空格， : 与属性值之间必须包含空格。

margin: 0;

                列表行属性值 书写在单行时，,  后必须跟一个空格。

font-family:Arial, sans-serif;

        1.4 行长度

               每行不得超过120个字符，除非单行不可分割。

                （解释：常见不可分割的场景为URL超长。）

                对于超长的样式，在样式值的空格处或，后换行，建议按逻辑分组。

        1.5 选择器

              当一个rule包含多个selector时，每个选择器声明必须独占一行。

.post,
.page,
.comment{
    line-height:1.5;
}

            >、+、~选择器的两边各保留一个空格。

main > nav {
    padding: 10px;
}
label + input {
    margin-left: 5px;
}
input:checked ~ button {
    background-color: #69c;
}

        属性选择器中的值必须用双引号包围。

        （解释：不允许使用单引号，不允许不使用引号。）

article[character="juliet"] {
    voice-family: "Vivien Leigh", victoria, female;
}

    1.6属性

        属性定义必须另起一行。

.selector{
    margin: 0;
    padding: 0;
}

        属性定义后必须以分号结尾。

.selector {
    margin: 0;
}

    2 通用

    2.1 选择器

            如无必要，不得为id、class选择器添加类型选择器进行限定。

            （解释：在性能和维护上，都有一定的影响。） 

#error,
.danger-message {
    font-color: #c00;
}

            选择器的嵌套层级应不大于3级，位置靠后的限定条件应尽可能精确。

#username input { }
.comment .avatar { }
 

        2.2 属性缩写

              在可以使用缩写的情况下，尽量使用属性缩写。

.post {
    font: 12px/1.5 arial, sans-serif;
}

            建议使用border/margin/padding等缩写时，应注意隐含值对实际数值的影响，确实需要设置多个方向的值时才使用缩写。

            （解释：border/margin/padding等缩写会同时设置多个属性的值，容易覆盖不需要覆盖的设定。如某些方向需要继承其他声明的值，则应该分开设置。）

/**centering 
**/
article {
    margin: 5px;
    border: 1px solid #999;
}
/*good*/
.page{
    margin-left: auto;
    margin-right: auto;
}
.featured {
    border-color: #69c;
}
/*bad*/
.page {
    margin: 5px auto;
}
.featured {
    border:1px solid #69c;
}

       2.3 属性书写顺序

            同一rule set下的属性在书写时，应按功能进行分组，并以Formatting Model（布局方式、位置） > Box Model（尺寸）> Typographic（文本相关） > Visual （视觉效果）的顺序书写，以提高代码的可读性。

            解释：

                    ●Formatting Model 相关属性包括：position/top/right/bottom/left/float/display/overflow等；

                    ●Box Model相关属性包括：border/margin/padding/width/height等；

                    ●Typographic相关属性包括：font/line-height/text-align/word-wrap等；

                    ●Visual相关属性包括：background/color/transition/list-style等。   

            另外，如果包含content属性，应放在最前面。

.sidebar{
    /*formatting model:positioning schemes/offsers/z-indexes/display/...*/
    position: absolute;
    top: 50px;
    left: 0;
    overflow-x: hidden;

    /*box model: sizes/margins/paddings/borders/...*/
    width: 200px;
    padding: 5px;
    border:1px solid #ddd;

    /*typographic: font/shadows/gradients/...*/
    font-size: 14px;
    line-height: 20px;

    /*visual: colors/shadows/gradients/...*/
    background: #f5f5f5;
    color: #333;
    -webkit-transition: color 1s;
       -mox-transition: color 1s;
            transition: color 1s;
}

        2.4 清除浮动

               当元素需要撑起高度以包含内部的浮动元素时，通过对伪类设置clear或触发BFC的方式进行clearfix。尽量不使用增加空标签的方式。

                （解释：触发BFC的方式很多，常见的有：

                            ●float非none;

                            ●position非static;

                            ●overflow非visible

                    另需注意，对已经触发BFC的元素不需要再进行clearfix。）

        2.5 ！important

                尽量不使用!important声明。

                当需要强制指定样式且不允许任何场景覆盖时，通过标签内联和!important定义样式。

                （解释：必须注意的是，仅在设计上确实不允许任何其他场景覆盖样式时，才使用内联的!important样式。通常在第三方环境的应用中使用这种方案。下面的z-index章节是其中一个特殊场景的典型样例。）

        2.6 z-index

            将z-index进行分层，对文档流外绝对定位元素的视觉层级关系进行管理。

            （解释：同层的多个元素，如多个由用户输入触发的Dialog，在该层级内使用相同的z-index或递增z-index。

                        建议每层包含100个z-index来容纳足够的元素，如果每层元素较多，可以调整这个数值。）

            在可控环境下，期望显示在最上层的元素，z-index指定为999999。

            （解释：可控环境分成两种，一种是自身产品线环境；还有一种是可能会被其他产品线引用，但是不会被外部第三方的产品引用。

                          不建议取值为2147483647.以便于自身产品线被其他产品线引用，但是不会被外部第三方的产品引用。）

            在第三方环境下，期望显示在最上层的元素，通过标签内联和！important，将z-index指定为2147483647。

              （解释：第三方环境对于开发者来说完全不可控。在第三方环境下的元素，为了保证元素不被其页面其他样式定义覆盖，需要采用此做法。）

        3 值与单位

        3.1 文本

              文本内容必须用双引号包围。

            （解释：文本类型的内容可能在选择器、属性值等内容中。）

html[lang|="zh"] q:before {
    font-family: "Microsoft YaHei", sans-serif;
    content: """;
}
html[lang|="zh"] q:after {
    font-family: "Microsoft YaHei", sans-serif;
    content: "";
 }

        3.2 数值

              当数值为0-1之间的小数时，省略整数部分的0。

panel {
    opacity: .8;
}

        3.3 url()

              url()函数中的路径不加引号。

body {
    background:url(bg.png);
}

              url()函数中的绝对路径可省去协议名。

body{
    background: url(//baidu.com/img/bg.png) no-repeat 0 0;
}

        3.4 长度

              长度为0时须省略单位。（也只有长度单位可省）

body {
    padding: 0 5px;
}

       3.5 颜色

            RGB颜色值必须使用十六进制记号形式#rrggbb。不允许使用rgb()。

            （解释：带有alpha的颜色信息可以使用rgba()。使用rgba()时每个逗号后必须保留一个空格。）

.success {
    box-shadow: 0 0 2px rgba(0, 128, 0, .3);
    border-color: #008000;
}

            颜色值可以缩写时，必须使用缩写形式。

.success {
    background-color: #aca;
}

            颜色值不允许使用命名色值。

.success {
    color: #90ee90;
}

            颜色值中的英文字符采用小写。如不用小写也需要保证同一项目内保持大小写一致。

/*good*/
.success {
    background-color: #aca;
    color: #90ee90;
}

        3.6 2D位置

              必须同时给出水平和垂直方向的位置。

              （解释：2D位置初始值为0% 0%，但在只有一个方向的值时，另一个方向的值会被解析为center。为了避免理解上的困扰，应同时给出两个方向的值。）

body {
    background-position: center top;
}

        4  文本编排

        4.1 字体族

              font-family属性中的字体族名称应使用字体的英文Family Name，其中如有空格，须放置在引号中。

              （解释：所谓英文Family Name，为字体文件的一个元数据，常见名称如下：

字体	操作系统	Family Name
宋体 (中易宋体)	Windows	SimSun
黑体 (中易黑体)	Windows	SimHei
微软雅黑	Windows	Microsoft YaHei
微软正黑	Windows	Microsoft JhengHei
华文黑体	Mac/iOS	STHeiti
冬青黑体	Mac/iOS	Hiragino Sans GB
文泉驿正黑	Linux	WenQuanYi Zen Hei
文泉驿微米黑	Linux	WenQuanYi Micro Hei

）

h1 {
    font-family: "Microsoft YaHei";
}

        font-family按【西文字体在前、中文字体在后】、【效果佳（质量高/更能满足需求）的字体在前、效果一般的字体在后】 的顺序编写，最后必须指定一个通用字体族(serif/sans-serif)。

/*Display according to platform*/
.article {
    font-family: Arial, sans-serif;
}
/*Specific for most platforms*/
h1 {
    font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft YaHei", sans-serif;
}

        font-family 不区分大小写，但在同一个项目中，同样的Family Name大小写必须统一。

/*good*/
body {
    font-family: Arial, sans-serif;
}
h1 {
    font-family: Arial, "Microsoft YaHei", sans-serif;
}

        4.2 字号

            需要在Windows平台显示的中文内容，其字号应不小于12px。

            （解释：由于Windows的字体渲染机制，小于12px的文字显示效果极差、难以辨认。）

        4.3 字体风格

            需要在Windows平台显示的中文内容，不要使用除normal外的font-style。其他平台也应慎用。

            （解释：由于中文字体没有italic风格的实现，所有游览器下都会fallback到obilique实现（自动拟合为斜体），小字号下（特别是Windows下会在小字号下使用点阵字体的情况下）显示效果差，造成阅读困难。）

        4.4 字重

              font-weight属性必须使用数值方式描述。

              （解释：CSS的字重分100-900共九档，但目前受字体本身和游览器的限制，实际上支持400和700两档，分别等价于关键词normal和bold。

                            游览器本身使用一系列启发式规则来进行匹配，在<700时一般匹配字体的Regular字重，>700时匹配Bold字重。但已有游览器开始支持=600时匹配Semibold字重，故使用数值增加了灵活性，也更简短。）

h1 {
    font-weight: 700;
}

        4.5 行高

            line-height在定义文本段落时，应使用数值。

            （解释：将line-height设置为数值，游览器会基于当前元素设置的font-size进行再次计算。在不同字号的文本段落组合中，能达到较为舒适的行间间隔效果，避免在每个设置了font-size都需要设置line-height。）

            当line-height用于控制垂直居中时，还是应该设置成与容器高度一致。

.container {
    line-height: 1.5;
}

        5 变换与动画

           强制使用transition时应指定transition-property。

.box {
    transition: color 1s, border-color 1s;
}

        尽可能在游览器能高效实现的属性上添加过渡和动画。

        （解释：在可能的情况下应选择这样四种变换：

transform: translate(npx,npx);
transform: scale(n);
transform: rotate(ndeg);
opacity: 0..1;

           典型的，可以使用translate来代替left作为动画属性。

）

.box {
    transition: transform 1s;
}
.box:hover {
    transform: translate(20px);  /*move right for 20px*/
}

        6 响应式

            Media Query不得单独编排，必须与相关的规则一起定义。

/*header styles*/
@media (...) {
    /*header styles*/
}
/*main styles*/
@media (...) {
    /*main styles*/
}
/*footer styles*/
@media (...) {
    /*footer styles*/
}

          Media Query如果有多个逗号分隔的条件时，应将每个条件放在单独一行中。

@media
(-webkit-min-device-pixel-ratio: 2),  /*Webkit-based browsers*/
(min--moz-device-pixel-ratio: 2);    /*Older Firefox browers(prior to Firefox 16)*/
(min-resolution: 2dpx),             /*The standard way*/
(min-resolution: 192dpi) {         /*dppx fallback*/
    /*Retina-specific stuff here*/
}

        尽可能给出在高分辨率设备（Retina）下效果更佳的样式。

        7 兼容性

        7.1 属性前缀

              带私有前缀的属性由长到短排列，按冒号位置对齐。

              （解释：标准属性放在最后，按冒号对齐方便阅读，也便于在编辑器内进行多行编辑。）

.box {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
}

        7.2 Hack

              需要添加hack时应尽可能考虑是否可以采用其他方式解决。

             （解释：如果能通过合理的HTML结构或使用其他的CSS定义达到理想的样式，则不应该使用hack手段解决问题。通常hack会导致维护成本的增加。）

              尽量使用选择器hack处理兼容性，而非属性hack。

             （解释：尽量使用符合CSS语法的selector hack，可以避免一些第三方库无法识别hack语法的问题。）

/*IE 7*/
*:first-child + html #header {
    margin-top: 3px;
    padding: 5px;
}
/*IE 6*/
* html #header {
    margin-top: 5px;
    padding: 5px;
}

            尽量使用简单的属性hack。

.box {
    _display: inline; /*fix double margin*/
    float: left;
    margin-left: 20px;
}
.container {
    overflow: hidden;
    *zoom: 1; /*triggering hasLayout*/
}

        7.3 Expression

            禁止使用Expression。

参考博客：百度编码规范 点击打开链接 https://github.com/ecomfe/spec

 版权声明：本文为博主原创文章，未经博主允许不得转载。