css编码规范

一、css文档统筹：

二、规则组织：

1、规则组织的两种方案：

1.1、从上到下的模块化布局：

　　先元素基本属性后 ID布局属性最后公共类。

1.2、分块详细定义布局：

　　先元素基本属性后布局总体结构最后分块详细定义。

2、良好的规则组织习惯：

　　先定义元素基本属性或元素默认属性;

　　后定义 ID样式，一般多指布局属性定义;

　　最后 class定义的公共属性。

三、属性组织：

　　按主次关系组织步骤：

先声明布局属性（确定元素的显示），如：display、float等;
再声明盒模型属性（确定元素的形状），如：width、height等;
最后声明版式属性（确定元素内容显示），如：color、font等.

四、css命名艺术

经典命名三法：

匈牙利命名法：

常应用于：windows编程环境中。

提出人：Microsoft程序员查尔斯 ^.西蒙尼（Charles Simonyi）.

用法：通过变量名前面加上小写字母的符号做为前缀，标识出变量的作用域、类型等，前缀后面是一个或多个单词组合，该单词描述变量的用途

举例：

hwnd：h是类型描述，表示句柄。 wnd是变量对象描述，表示窗口，因此hwnd表示为窗口句柄。

pfnEatApple： pfn是类型描述，表示指向函数的指针。 EatApple是变量对象描述，因此pfnEatApple函数的函数指针变量。

g_cch： g_是属性描述，表示全局变量。 c和ch分别是计数类型和字符类型，一起表示变量类型，这里忽略了对象描述，因此它表示一个对字符进行计数的全局变量。

骆驼命名法：

常应用于：许多旧程序和UNIX环境以及C语言，现很流行这种命名方法。

用法：每一个单词的首字母为大写，名称的首字母为小写，支持下划线的使用。

举例：

printLoadTemplate();

print_load_template();

帕斯卡命名法：

主要应用于：c#环境中。

用法：每一个单词的首字母为大写，名称的首字母为大写。

举例：

MyFunction();

css命名规则：

css命名规则作用：直观、简洁、一目了然，方便后期维护和交流。

建议：

用户在命名时全部使用小写字母，单词首写字母可以除外。
名称以字母开头，后面可以连接数字、字母、下划线、连字符和特殊字符。但建议尽量使用英文字母，适时地使用下划线和连接线。
css命名要词必达意，名称要反映用途和相关信息，同时也要简短，不要附带任何冗余信息。

例如：myleftmenu120px就可以简写为leftMenu.

举例：

合法命名：

style.css

topMenu

hot_view

非法命名：

263_color

-my-site

css命名方法：

语义化命名：
- 使用位置定义词汇：使用可以描述元素所在位置的语义词汇来对其命名，例如： id="left-side" id="center-column" id="right-column"; 缺点：缺乏扩展性
- 使用样式定义词汇：根据类被定义的样式来概括描述命名，
  - 使用颜色名称或十六进制代码命名颜色类，如：.blue{color:blue;} .f00{color:#f00;} .abc123{ color:#abc123;}
  - 使用“font+字体大小”组合方法命名字体大小类，如：.font12px{font-size:12px;} .font9pt{font-size:9pt;}
  - 使用英文名称命名类，如：.left{float:left;} .bottom{float:bottom;}
结构化命名：一般根据文档结构而不是样式或位置的描述来命名，可实现css声明名称的重用，从而高效利用不同的样式，例如：id = "main_nav" id="sub_nav" id="main-content"。
语义化命名和结构化命名的优缺点：

语义化命名：

优点：注重元素位置的描述性

缺点：没有涉及文档结构，因此样式与文档结构脱节，用户会遇到该名称定义的样式而不知所适用的对象。缺乏扩展性。

结构化命名：

优点：相对于语义化命名而言，更具有扩展性和重用性。

代码注释：

目的：辅助阅读，增强可读性和解决部分预防Bug。

语法：以“/*”符号开头，以“*/”符号结尾。

原则：模块代码（代码段）最好添加注释性说明，并占据一行，每条规则适当点拨，关键属性或补丁声明必须提示。

注意：

在代码段前面添加模块功能说明，代码段可以包含一个或多个样式。
在每个声明后增加属性说明或提示，有时为了兼容而定义的hack代码，就应在属性后提示一下，方便阅读。
如果样式表文件格式是每个规则单行书写，可以省略属性说明和样式简介，直接添加模块注释。

清除注释：

手工逐行删除。
使用代码编辑器进行清除。
使用在线优化工具：CSS Cascading Style Optimiser (http://www.codebeautifier.com/)。

css编码规范

推荐阅读