css编码规范

1、css文档统筹：

2、规则组织：

 

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

1.一、从上到下的模块化布局 ：

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

1.二、分块详细定义布局：

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

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

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

　　后 定义 ID样式，通常多指布局属性定义;

　　最后 class定义的公共属性。

3、属性组织：

　　按主次关系组织步骤：

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

4、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命名规则做用：直观、简洁、一目了然，方便后期维护和交流。

建议：

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

例如：myleftmenu120px就能够简写为leftMenu.

举例：

合法命名：

style.css

topMenu

hot_view

非法命名：

263_color

-my-site

• css命名方法：

1. 语义化命名：
   • 使用位置定义词汇：使用能够描述元素所在位置的语义词汇来对其命名， 例如： 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;}
2. 结构化命名：通常根据文档结构而不是样式或位置的描述来命名，可实现css声明名称的重用，从而高效利用不一样的样式，例如：id = "main_nav" id="sub_nav" id="main-content"。
3. 语义化命名和结构化命名的优缺点：

语义化命名：

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

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

结构化命名：

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

• 代码注释：

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

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

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

注意：

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

• 清除注释：

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