CSS样式表命名规则

样式选择符命名

选择符以类型分，同类放一起，类的定义顺序以HTML中实际的顺序为参考，以方便查找为主, 使用类似下面的规则:

[模块前缀 | 类型 | 作用]_[名称]_[状态 | 位置]
约定模块、类型、状态、位置等的所使用的单词或其缩写，保持上面的顺序，尽量保持在两到三个单词说清用途。

 

通用名词缩写

设置	set	文本	txt
成功	suc	颜色	c
提示	hint	背景	bg
操作	op	边框	bor
密码	pw	居中	center
菜单	menu	图标	icon
按钮	btn	弹出	pop

例：

文本输入框 .input_tx
密码输入框 .input_pw
登录密码输入框 .input_pw_login
日志设置成功提示 .hint_suc_blogset
相册弹出的设置层 .pop_set_photo
公共提示 .hint_bg
文本颜色 .c_tx
段落文本颜色 .c_tx_p

 

样式属性书写顺序

mozilla.org Base Styles
/Suggested order:

//显示属性	//自身属性	//文本属性
* display	* width	* color
* list-style	* height	* font
* position	* margin	* text-decoration
* float	* padding	* text-align
* clear	* border	* vertical-align
	* background	* white-space
		* other text
		* content

 

从本质到表象，顺时针，从外到内，从上到下
/* 1、本质：清理外部clear，显不显示display，是否可见visibility，什么状态overflow，什么位置position，在哪float…. */

clear; display; visibility; overflow; position; float; list-style; ….

/* 2、自身：多宽width，多高height，行高line-height，对外margin，对内padding…. */

width; height; line-height; margin; padding; ….
/* 3、修饰：字体font，颜色color，文本text，边框border，背景background…. */

 font; color; text; border; background; ….