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

2018-01-18

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

PREV
登山的意义,某种意义上的苦行!
NEXT
使用Navicat进行ssh通道连接MySQL数据库