em strong code

引用

def myfn():
	pass

• 列表
• 2
• test

1. test1
2. test2
3. test3

CSS文件的分类和引用顺序

1. 公共样式
2. 特殊样式
3. 皮肤样式

CSS内部的分类及其顺序

1. 重置(reset)和默认(base)(tags):消除默认样式和浏览器差异,并设置部分标签的初始样式,以减少后面的重复劳动!你可以根据你的网站需求设置!

2. 统一处理:建议在这个位置统一调用背景图(这里指多个布局或模块或元件共用的图)和清除浮动(这里指通用性较高的布局、模块、元件内的清除)等统一设置处理的样式!

3. 布局(grid)(.g-):将页面分割为几个大块,通常有头部、主体、主栏、侧栏、尾部等!

4. 模块(module)(.m-):通常是一个语义化的可以重复使用的较大的整体!比如导航、登录、注册、各种列表、评论、搜索等!

5. 元件(unit)(.u-):通常是一个不可再分的较为小巧的个体,通常被重复用于各种模块中!比如按钮、输入框、loading、图标等!

6. 功能(function)(.f-):为方便一些常用样式的使用,我们将这些使用率较高的样式剥离出来,按需使用,通常这些选择器具有固定样式表现,比如清除浮动等!不可滥用!

7. 皮肤(skin)(.s-):如果你需要把皮肤型的样式抽离出来,通常为文字色、背景色(图)、边框色等,非换肤型网站通常只提取文字色!非换肤型网站不可滥用此类!

8. 状态(.z-):为状态类样式加入前缀,统一标识,方便识别,她只能组合使用或作为后代出现(.u-ipt.z-dis{},.m-list li.z-sel{}),具体详见命名规则的扩展相关项。

1. 分类命名方法

   布局(grid)(.g-) 模块(module)(.m-) 元件(unit)(.u-) 功能(function)(.f-) 皮肤(skin)(.s-) 状态(.z-)

2. 后代选择器命名

   长度大于等于2的类选择器为后代选择器 .m-list li{} .m-list .text{} 后代选择器不需要完整表现结构树层级,尽量能短则短。 不要在页面布局中使用

3. 命名应简约而不失语义

   .m-list .wrap{} .g-side2{}

4. 相同语义的不同类命名

   .m-list、.m-list2、.m-list3等,都是列表模块,但是是完全不一样的模块

5. 模块和元件的扩展类的命名方法

   .m-list作为基类(可以单独使用) .m-list-1为扩展类(必须配合基类使用,m-list-"数字或字母") .u-btn.z-dis{} class="u-btn z-dis"

6. 模块和元件的后代选择器的扩展类

   后代选择器:.m-login .btn{}。 后代选择器扩展:.m-login .btn-1{},.m-login .btn-dis{}。 同样也可以采取独立状态分类(.z-)方法:.m-login .btn.z-dis{},然后像这样使用:class="btn z-dis"。

7. 分组选择器有时可以代替扩展方法

   两个元件共性的样式 .u-tip1,.u-tip2{} .u-tip1 .itm,.u-tip2 .itm{}

8. 防止污染和被污染

   当模块或元件之间互相嵌套,应当注意样式被污染 如果你的模块或元件可能嵌套或被嵌套于其他模块或元件,那么要慎用标签选择器,必要时采用类选择器,并注意命名方式 可以采用.m-layer .layerxxx、.m-list2 .list2xxx的形式来降低后代选择器的污染性

1. 选择器、属性和值都使用小写

2. 单行写完一个选择器定义

3. 最后一个值也以分号结尾

4. 省略值为0时的单位

5. 使用单引号

6. 使用16进制(#ff00ff)表示颜色值(排除rgba, 并尽量缩写)

7. 根据属性的重要性按顺序书写(从左至右)

   显示属性	自身属性	文本属性和其他修饰
   display	width	font
   visibility	height	text-align
   position	margin	text-decoration
   float	padding	vertical-align
   clear	border	white-space
   list-style	overflow	color
   top	fdsfsf	min-width

   如果属性有关联可以写在一起
   .m-box{ height: 100px; line-height: 24px;}

8. 私有在前,标准在后