一、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/)。