之前一直没有注意到这一点，因为当看到一些优秀的网站的源代码的时候，打开他们引用的css文件格式看起来也并非规范。但幸运的昨天偶然间看到的通过增强CSS规范可读性可优化页面性能，于是下决心痛改前非。

我整理了我所能理解到的CSS规范，可能不全，不过确实可以增加代码一部分可读性了。

1.宜用两次空格代表tab，这样的话在所有环境下保持一致。

2.不要再自闭和标签尾部添加"/"  （ HTML5的规范中，自闭合标签不加斜杠）;eg:你是不是也会这样做呢？<input name="" type="" />或者<img src=""/> 省去吧。

3.被嵌套的元素应该缩进一个空格 eg:

<body>

    <img src="data:images/company-logo.png" alt="Company">

    <h1 class="hello-world">Hello, world!</h1>

  </body>

4.不可省略的结尾标签 </li> 或者</div>

5.页面开始处必须添加标准模式的声明：

eg :<!DOCTYPE html>

6强烈建议为 html 根元素指定 lang 属性，据说是有助于翻译工具或语音工具进行工作。

<html lang="zh-CN">

7.可以通知IE采取所支持的最新的模式。

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

8.字符编码：这个真实经历我遇到过手机端打开后乱码的状况，然后我保存时把编码方式改成 UTF-8+BOM 就搞定了。

<meta charset="UTF-8">

9.实用为王，要精简标签的复杂程度。

10.在使用布尔值的时候：XHTML 规范要求为其赋值，但是 HTML5 规范不需要。

11.需要迭代和重构来实现减少父标签的数量 eg：

NO： 
<span class="avatar">

  <img src="...">

</span>

YES：

<img class="avatar" src="...">

12.通过 JavaScript 生成的标签让内容变得不易查找、编辑，并且降低性能。能避免时尽量避免。 比如添加子节点等等 （.appendchild）

13.

1).为选择器分组时，将单独的选择器单独放在一行。

2).为了代码的易读性，在每个声明块的左花括号前添加一个空格。

3).声明块的右花括号应当单独成行。

4).每条声明语句的 : 后应该插入一个空格。

5).为了获得更准确的错误报告，每条声明都应该独占一行。

6).所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的，但是，如果省略这个分号，你的代码可能更易出错。

7).对于以逗号分隔的属性值，每个逗号后面都应该插入一个空格（例如，box-shadow）。

8).不要在 rgb()、rgba()、hsl()、hsla() 或 rect() 值的内部的逗号后面插入空格。这样利于从多个属性值（既加逗号也加空格）中区分多个颜色值（只加逗号，不加空格）。

9).对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，.5 代替0.5；-.5px 代替 -0.5px）。

10).十六进制值应该全部小写，例如，#fff。在扫描文档时，小写字符易于分辨，因为他们的形式更易于区分。

11).尽量使用简写形式的十六进制值，例如，用 #fff 代替 #ffffff。

12).为选择器中的属性添加双引号，例如，input[type="text"]。但是，为了代码的一致性，建议都加上双引号。

13).避免为 0 值指定单位，例如，用 margin: 0; 代替 margin: 0px

14.css内的顺序也有讲究：位，盒，内，框，混。

其中“位”，即位置相关信息。eg：

position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  z-index: 100;

“盒”，即你让盒子长成什么样子相关信息。eg：

display: block;

  float: right;

  width: 100px;

  height: 100px;

“内”，即你盒子内部一些元素的属性，比如文字大小，字体颜色，行高等，eg：

display: block;

  float: right;

  width: 100px;

  height: 100px;

“框”即 背景+框线（原谅我这个地方只知道背景和框线在这个顺序度里面。。。） eg：

background-color: #f5f5f5;

  border: 1px solid #e5e5e5;

  border-radius: 3px;

“混”就非常简单了 比如透明度，灰度，还有最不常用的毛玻璃效果等增加视觉效果的一些东西，eg：

-webkit-filter: blur(10px);
opacity: 0.8;

15.<link> 标签相比于@import 指令要快很多，@import不光增加了额外的请求次数，还会导致不可预料的问题。

使用多个 <link> 元素

通过 Sass 或 Less 类似的 CSS 预处理器将多个 CSS 文件编译为一个文件

通过 Rails、Jekyll 或其他系统中提供过 CSS 文件合并功能

16.带有前缀的属性，宜通过缩进的方式，让每个属性的值在垂直方向对齐eg：

 -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);

          box-shadow: 0 1px 2px rgba(0,0,0,.15);

17.只包含一条声明的样式，为了易读性和便于快速编辑，建议将语句放在同一行。对于带有多条声明的样式，还是应当将声明分为多行。eg：

.icon           { background-position: 0 0; }

.icon-home      { background-position: 0 -20px; }

.icon-account   { background-position: 0 -40px; }

18.大部分情况下，不需要为简写形式的属性声明指定所有值。eg：

NO：margin：0 0 20px;

YES:margin-bottom:20px;

19.父元素相同的时候，宜将子元素嵌套于同一个父元素下，eg：

.table > thead > tr > th { … }

.table > thead > tr > td { … }

.table > thead > tr {

  > th { … }

  > td { … }

}

20.关于/*   */注释 不是简单地描述选择器的内容，应该能够传达上下文之间的关系和代码目的

21.

1）.class 名称中只能出现小写字符和破折号（dashe）（不是下划线，也不是驼峰命名法）。破折号应当用于相关 class 的命名（类似于命名空间）（例如，.btn 和 .btn-danger）。

2）.避免过度任意的简写。.btn 代表 button，但是 .s 不能表达任何意思。

3）.class 名称应当尽可能短，并且意义明确。

4）.使用有意义的名称。使用有组织的或目的明确的名称，不要使用表现形式（presentational）的名称。

5）.基于最近的父 class 或基本（base） class 作为新 class 的前缀。

6）.使用 .js-* class 来标识行为（与样式相对），并且不要将这些 class 包含到 CSS 文件中。

22.选择器要尽可能短，并且尽量限制组成选择器的元素个数，建议不要超过 3 。

23.

保存文件时，删除尾部的空白符。

设置文件编码为 UTF-8。

在文件结尾添加一个空白行。

【参考：支知乎大神们以及bootstrap代码规范讲解】

关于HTML与CSS编写规范的更多相关文章

  1. 个人css编写规范

    前言:最近在做微信小程序,因为公司小,就我一个人弄前端的东西,js和页面都是我来弄,结果那天后台的人看到我的js代码,说我的代码写得不规范,函数什么的都很乱,弄得我羞愧难当,幸亏没看我的css,其实我 ...

  2. HTML+CSS编写规范

    在任何一个项目或者系统开发之前都需要定制一个开发约定和规则,这样有利于项目的整体风格统一.代码维护和扩展.由于Web项目开发的分散性.独立性.整合的交互性等,所以定制一套完整的约定和规则显得尤为重要. ...

  3. css编写规范最佳实践

    最初,在编写CSS的时候,我们往往想到哪儿就写到哪儿,它们之间的关联性和有序性并不在考虑之中.但随着代码量的增加,亦或是多人共同开发,CSS的编写规范变得重要起来了.本文通过三个方面,总结出CSS编写 ...

  4. css编写规范

    一.注释规范 1.文件顶部注释(推荐使用) /* * @description: 中文说明 * @author: name * @update: name (2013-04-13 18:32) */ ...

  5. html css 编写规范

    html 规范 一 语法 1.用两个空格带她tab, 2.嵌套的元素应该缩进一次,即两个空格是最好 3.属性定义,全部使用双引号,尽量避免单引号. 4.不要在自闭和标签尾部添加闭合标签. 5.可选得结 ...

  6. 高质量CSS编写规范

    ①id和class的命名在保持语义性的同时尽可能的短.不推荐的写法:#navigation {} .atr {}推荐的写法  : #nav {} .author {}可以缩写单词,但缩写后务必能让人明 ...

  7. web(五)CSS引入方式，编写规范及调试

    CSS (Cascading Style Sheets)层叠样式表 ,是由万维网联盟(W3C)制定的标准 CSS的主要作用: 美化html元素的外观,例如设定背景颜色.字体等. 对网页元素进行布局.以 ...

  8. CSS编写指导规范和建议

    在参与规模庞大.历时漫长且参与人数众多的项目时,所有开发者遵守如下规则极为重要: 保持 CSS 易于维护 保持代码清晰易懂 保持 CSS 的可拓展性 为了实现这一目标,我们要采用诸多方法. 本文档第一 ...

  9. CSS的编写规范

    一.前言 如上图,页面在渲染和画图时,耗时还是比较多的,这就对我们的编写要求愈加严格. 我们有很多方法来减少上图所示的页面加载耗时的,比如 但是更多的还是在于平时的编写规范,我们需要了解浏览器,让他更 ...

随机推荐

  1. SAP标准教材列表

    AC010 mySAP Financials Overview to Financial Accounting and ReportingAC020 mySAP Financials Investme ...

  2. Codeforces Round #250 (Div. 1) B. The Child and Zoo 并查集

    B. The Child and Zoo Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/438/ ...

  3. 线程池QueueUserWorkItem

    // Test1.cpp : Defines the entry point for the console application. // #include "stdafx.h" ...

  4. C++技术问题总结-第12篇 设计模式原则

    设计模式六大原则,參见http://www.uml.org.cn/sjms/201211023.asp. 1. 单一职责原则 定义:不要存在多于一个导致类变更的原因.通俗的说,即一个类仅仅负责一项职责 ...

  5. 搭建Nginx图片服务器

    搭建Nginx图片服务器 Part-I 安装Nginx 安装PCRE 下载 ngx_cache_purge 并解压,用来清除缓存 下载Nginx并解压 cd nginx-1.7.7 编译,--pref ...

  6. iOS6 / iOS7 状态栏高度适配

    问题原因:iOS7的状态栏(status bar)不再占用单独的20px,所以假设你在iOS6上的界面布局是正常的,那么到了iOS7上就会变成以下这个样子:             左边是iOS6界面 ...

  7. win7配置nginx + php

    nginx的下载地址:  http://www.nginx.cn/nginx-download 在nginx下创建文件php-cgi.cmd,并写入内容: "D:\nginx_php-5.6 ...

  8. 美H1B签证额满，硕士以上学位仍可申请

    美国公民与移民服务局6月1日宣布,2007会计年度的工作签证H1B名额已经用完,下年度的申请从明年4月1日开始.但在美国获得硕士以上学位的高学历者仍可申请. 据北美世界日报报道,美国移民律师协会对连续 ...

  9. proxy代理类

    package cn.hncu.proxy.rent; import java.lang.reflect.InvocationHandler;import java.lang.reflect.Meth ...

  10. ArcGIS动态文本

    处理动态文本 来自:http://resources.arcgis.com/zh-cn/help/main/10.2/index.html#/na/00s900000013000000/ Deskto ...