CSS规范——春风十里不如写好CSS

  ⋅   510  ⋅   css

css语法规范:

每条属性声明占一行,增加易读性
颜色采用十六进制写法(不使用颜色名),并且能够简写的进行简写:
0值的单位进行省略,如将margin:0px,写成margin:0:
有选择器组时,每个选择器占一行:
连字符使用-,而不使用_,因为能少按一个shift就少按,还有和js变量命名区分开。
选择器避免使用标签名。(首先可能使得一些不必要的标签带上样式,其次会对选择器寻找上也会在一定程度上浪费时间)
媒体查询,不要写在文档最后或分开到另外文档,应该写在相应规则的附近,这样有利于修改和阅读
前缀,css3的一些属性要注意带上前缀:
引号方面,使用双引号而不使用单引号,url不用使用引号:
每条属性声明语句结束后加上分号,最后一条声明可省略分号,但不建议
每个属性声明的冒号(:)后添加一个空格
小于1的小数点的值,省略0,如0.5px,可写成.5px
避免使用@import指令,使用link标签来引入css文件
避免使用!important,这个优先级最高,滥用会使得维护困难,代码混乱
Less,Sass等预处理言的嵌套不超过3层
避免使用id:(因为id优先级高,且具有唯一性,复用性差,而且id是html与js的挂钩,class是HTML与css的挂钩,这样能够让代码更为的清晰,不用说看到一个id,既要到js里查查有没有什么用,又到css里看看有什么样式,确实麻烦。)
注释需要全面易懂,不要只写一点

css属性声明顺序规范:

css属性的书写顺序大致分为4组,从上到下依次书写:
Positioning Model(定位的相关属性):
有position,display,TRBL,z-index,float,overflow等
Box Model (盒子模型的属性):
有margin,padding,border,width,height等
Typographic (文本,排版)
有font,line-height,text-align
Visual (视觉方面的)
有background,color,transition,list-style
特别的:如果有content属性时,需要把其放到最前面

css的文件分类:

文件分类这不会有什么标准,分好,适合自己开发和维护便可。比如:可以有公共的css,某个页面的css,重置的css,皮肤的css,部件的css等,可根据自己的需求,习惯等分类。不必太过拘束。
common.css(通用)
main.css(主要)
reset.css(重置)
skin.css(皮肤)

css选择器命名:

命名这东西可以说让每个前端开发的人员苦恼的东西,有时得想半天去想一个名字,煎熬啊。老是想,到底怎么样的命名才比较好呢?我这样命名接着会不会重复?等等。。。
到底怎样命名才比较规范,参考一下NEC规范或者是BEM规范。个人比较喜欢NEC,因为其比较简约些,详细的可以到NEC官网上看看。
看看NEC的分类:
布局(grid)(.g-):将页面分割为几个大块,通常有头部、主体、主栏、侧栏、尾部等!
模块(module)(.m-):通常是一个语义化的可以重复使用的较大的整体!比如导航、登录、注册、各种列表、评论、搜索等!
元件(unit)(.u-):通常是一个不可再分的较为小巧的个体,通常被重复用于各种模块中!比如按钮、输入框、loading、图标等!
功能(function)(.f-):为方便一些常用样式的使用,我们将这些使用率较高的样式剥离出来,按需使用,通常这些选择器具有固定样式表现,比如清除浮动等!不可滥用!
皮肤(skin)(.s-):如果你需要把皮肤型的样式抽离出来,通常为文字色、背景色(图)、边框色等,非换肤型网站通常只提取文字色!非换肤型网站不可滥用此类!
状态(.z-):为状态类样式加入前缀,统一标识,方便识别,她只能组合使用或作为后代出现(.u-ipt.z-dis{},.m-list li.z-sel{})
我们参考NEC的分类命名的规范,学习学习它的命名,可以照着使用,也可以有自己不同的命名,可以根据团队的习惯等。规矩是死的,人是活的,能灵活去变通才是最好的,能够写出清晰易懂的代码就ok。

css命名常用单词:

头:header
尾:footer
导航:nav
侧栏:sidebar
栏目:column
外围容器:wrapper
登录条:loginbar
标志:logo
广告:banner
页面主体:main
热点:hot
新闻:news
下载:download
子导航:subnav
菜单:menu
子菜单:submenu
搜索:search
友情链接:friendlink
页脚:footer
版权:copyright
滚动:scroll
内容:content
标签页:tab
文章列表:list
信息:msg
小技巧:tips
标题:title
加入:joinus
指南:guild
服务:service
注册:regsiter
状态:status
投票:vote
合作伙伴:partner
容器:container
按钮:button