前端CSS规范 v1
2015-10-11 23:11
381 查看
CSS规范 - 分类方法
我们按照CSS的性质和用途,将CSS文件分成“基础框架”、“通用样式库”、“业务样式”,并以此顺序引用(按需求决定是否添加版本号)。基础样式包括:重置样式(Reset.css),栅格,辅助类;
通用样式库:基本的复用模块:如button,form,table;
业务样式:导航,列表页;
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/> <link href="css/global.css" rel="stylesheet" type="text/css"/> <link href="css/service.css" rel="stylesheet" type="text/css"/>
CSS内部的分类及其顺序
模块(module)(.m-):通常是一个语义化的可以重复使用的较大的整体!比如导航、登录、注册、各种列表、评论、搜索等!
元件(unit)(.u-):通常是一个不可再分的较为小巧的个体,通常被重复用于各种模块中!比如按钮、输入框、loading、图标等!
功能(function)(.f-):为方便一些常用样式的使用,我们将这些使用率较高的样式剥离出来,按需使用,通常这些选择器具有固定样式表现,比如清除浮动等!不可滥用!
/* 统一清除浮动 */ .g-bdc:after,.m-dimg ul:after,.u-tab:after{display:block;visibility:hidden;clear:both;height:0;overflow:hidden;content:'.';} .g-bdc,.m-dimg ul,.u-tab{zoom:1;} /* 模块 */ .m-logo{width:200px;height:50px;} /* 元件 */ .u-btn{height:20px;border:1px solid #333;} /* 功能 */ .f-tac{text-align:center;}
CSS规范 - 命名规则
使用类选择器,放弃ID选择器 ID在一个页面中的唯一性导致了如果以ID为选择器来写CSS,就无法重用。后代选择器命名
约定不以单个字母+”-“为前缀且长度大于等于2的类选择器为后代选择器,如:.item为m-list模块里的每一个项,.text为m-list模块里的文本部分:.m-list .item{}.m-list .text{}。
一个语义化的标签也可以是后代选择器,比如:.m-list li{}。
通过使用后代选择器的方法,你不需要考虑他的命名是否已被使用,因为他只在当前模块或元件中生效,同样的样式名可以在不同的模块或元件中重复使用,互不干扰;在多人协作或者分模块协作的时候效果尤为明显!
后代选择器不需要完整表现结构树层级,尽量能短则短。
注:后代选择器不要在页面布局中使用,因为污染的可能性较大;
/* 这里的.itm和.cnt只在.m-list中有效 */ .m-list{margin:0;padding:0;} .m-list .itm{margin:1px;padding:1px;} .m-list .cnt{margin-left:100px;} /* 这里的.cnt和.num只在.m-page中有效 */ .m-page{height:20px;} .m-page .cnt{text-align:center;} .m-page .num{border:1px solid #ddd;}
/* 反对:表现化的或没有语义的命名 */ .m-abc .green2{} .g-left2{} /* 推荐:使用有语义的简短的命名 */ .m-list .wrap2{} .g-side2{}
相同语义的不同类命名
方法:直接加数字或字母区分即可(如:.m-list、.m-list2、.m-list3等,都是列表模块,但是是完全不一样的模块)。
其他举例:.f-fw0、.f-fw1、.s-fc0、.s-fc1、.m-logo2、.m-logo3、u-btn、u-btn2等等
模块和元件的扩展类的命名方法
当A、B、C、…它们类型相同且外形相似区别不大,那么就以它们中出现率最高的做成基类,其他做成基类的扩展。
方法:+“-”+数字或字母(如:.m-list的扩展类为.m-list-1、.m-list-2等)。
补充:基类自身可以独立使用(如:class=”m-list”即可),扩展类必须基于基类使用(如:class=”m-list m-list-2”)。
如果你的扩展类是表示不同状态,那么你可以这样命名:u-btn-dis,u-btn-hov,m-box-sel,m-box-hov等等,然后像这样使用:class=”u-btn u-btn-dis”。
如果你的网站可以不兼容IE6等浏览器,那么你标识状态的方法也可以采取独立状态分类(.z-)方法:.u-btn.z-dis,.m-box.z-sel,然后像这样使用:class=”u-btn z-dis”。
模块和元件的后代选择器的扩展类
有时候模块内会有些类似的东西,如果你没有把它们做成元件和扩展,那么也可以使用后代选择器和扩展。
后代选择器:.m-login .btn{}。
后代选择器扩展:.m-login .btn-1{},.m-login .btn-dis{}。
同样也可以采取独立状态分类(.z-)方法:.m-login .btn.z-dis{},然后像这样使用:class=”btn z-dis”。
注:此方法用于类选择器,直接使用标签做为选择器的则不需要使用此命名方法。
注:为防止后代选择器的扩展类和大类命名规范冲突,后代选择器不允许使用单个字母。
比如:.m-list .a{}是不允许的,因为当这个.a需要扩展的时候就会变成.a-bb,这样就和大类的命名规范冲突。
防止污染和被污染
当模块或元件之间互相嵌套,且使用了相同的标签选择器或其他后代选择器,那么里面的选择器就会被外面相同的选择器所影响。
所以,如果你的模块或元件可能嵌套或被嵌套于其他模块或元件,那么要慎用标签选择器,必要时采用类选择器,并注意命名方式,可以采用.m-layer .layerxxx、.m-list2 .list2xxx的形式来降低后代选择器的污染性。
CSS规范 - 代码格式
选择器等级a = 行内样式style。
b = ID选择器的数量。
c = 类、伪类和属性选择器的数量。
d = 类型选择器和伪元素选择器的数量。
选择器 | 等级(a,b,c,d) |
---|---|
style=”” | 1,0,0,0 |
#wrapper #content {} | 0,2,0,0 |
#content .dateposted {} | 0,1,1,0 |
div#content {} | 0,1,0,1 |
#content p {} | 0,1,0,1 |
#content {} | 0,1,0,0 |
p.comment .dateposted {} | 0,0,2,1 |
div.comment p {} | 0,0,1,2 |
.comment p {} | 0,0,1,1 |
p.comment {} | 0,0,1,1 |
.comment {} | 0,0,1,0 |
div p {} | 0,0,0,2 |
p {} | 0,0,0,1 |
以下所举列的属性可能造成渲染性能问题。不过有时候需求大于一切……
/* expression */ .class{width:expression(this.width>100?'100px':'auto');} /* filter */ .class{filter:alpha(opacity=50);}
CSS规范 -最佳实践
/* 这是某个模块 */ .m-nav{}/* 模块容器 */ .m-nav li,.m-nav a{}/* 先共性 优化组合 */ .m-nav li{}/* 后个性 语义化标签选择器 */ .m-nav a{}/* 后个性中的共性 按结构顺序 */ .m-nav a.a1{}/* 后个性中的个性 */ .m-nav a.a2{}/* 后个性中的个性 */ .m-nav .z-crt a{}/* 交互状态变化 */ .m-nav .z-crt a.a1{} .m-nav .z-crt a.a2{} .m-nav .btn{}/* 典型后代选择器 */ .m-nav .btn-1{}/* 典型后代选择器扩展 */ .m-nav .btn-dis{}/* 典型后代选择器扩展(状态) */ .m-nav .btn.z-dis{}/* 作用同上,请二选一(如果可以不兼容IE6时使用) */ .m-nav .m-sch{}/* 控制内部其他模块位置 */ .m-nav .u-sel{}/* 控制内部其他元件位置 */ .m-nav-1{}/* 模块扩展 */ .m-nav-1 li{} .m-nav-dis{}/* 模块扩展(状态) */ .m-nav.z-dis{}/* 作用同上,请二选一(如果可以不兼容IE6时使用) */
统一语义理解和命名
相关文章推荐
- 有时候替换Table更好用, CSS3设置Table奇数行和偶数行
- animation的step-start
- CSS设置DIV居中
- 为链接应用样式
- CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?
- 纯CSS改写checkbox样式,让复选框看起来更舒服一些
- 使用CSS3制作简单的图形运动变换
- JS设置css的float效果
- CSS3参考手册
- CSS3中的content和attr的用法
- js控制css样式
- css 填坑常用代码分享
- CSS从大图中抠取小图完整教程(background-position应用) (转)
- 关于CSS的优先级,CSS优先级计算,多个class引用
- 雪碧图 CSS sprite 优化性能
- html/css获得第一章
- notepad的monokai风格中makefile标签样式字体颜色问题
- CSS - 关于li中图文混排不能垂直居中的问题
- css伪类以及伪元素
- CSS优先级