CSS规范 2018-11-07

文章转载自:https://www.cnblogs.com/Ry-yuan/p/7384149.html

css语法规范:

每条属性声明占一行,增加易读性

/*bad*/body{margin:0;padding:0;}/*good*/body{margin:0;padding:0; }

颜色采用十六进制写法(不使用颜色名),并且能够简写的进行简写:

/*bad*/.example{color:#ffaabb;}/*good*/.example{color:#fab;}

0值的单位进行省略,如将margin:0px,写成margin:0:

/*bad*/.example{margin:0px;}/*good*/.example{margin:0;}

有选择器组时,每个选择器占一行:

body,html,p{margin:0;padding:0;  }

连字符使用-,而不使用_,因为能少按一个shift就少按,还有和js变量命名区分开。

/*bad*/.index_list{}/*good*/.index-list{}

选择器避免使用标签名。(首先可能使得一些不必要的标签带上样式,其次会对选择器寻找上也会在一定程度上浪费时间)

/*bad*/.index-listli{}/*good*/.index-list.item{}

媒体查询,不要写在文档最后或分开到另外文档,应该写在相应规则的附近,这样有利于修改和阅读

.index-nav{margin-top:10px;}/*和相关的规则一起放*/@media(min-width:480px){.index-nav{margin-top:5px;    }}

前缀,css3的一些属性要注意带上前缀:

.selector{-webkit-box-shadow:01px2pxrgba(0,0,0,.15);box-shadow:01px2pxrgba(0,0,0,.15);}

引号方面,使用双引号而不使用单引号,url不用使用引号:

/*no good*/.example{font-family:'Times New Roman',Georgia,Serif;background:url("../images/icon.png");}/*good*/.example{font-family:"Times New Roman",Georgia,Serif;background:url(../images/icon.png);}

每条属性声明语句结束后加上分号,最后一条声明可省略分号,但不建议

每个属性声明的冒号(:)后添加一个空格

小于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

例子:

.example{content:"hello";/*positioning*/position: absolute;top:10px;left:12px;/*box model*/margin-top:20px;width:100px;heith:100px;/*typographic*/text-align: center;font-size:12px;/*visual*/color:#f00;background-color:#0f0;}

特别的:如果有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

单词这方面能看懂就好,英语也要学号才行啊,有时候不懂怎么命名,就查查英文单词怎么写,看得出英语还是很重要啊。css的命名单词长度不要太长太冗余,看懂就好,有些单词过长可以适当的缩写一下。

最后说说:

如果想学好一门技术,就想要从各个方面研究他,本文也是,了解css也要css的规范,这对于强迫症的人就是很好的疗药,我就是这样,总觉得自己的css写得太不规范,也不容易维护,想要去修饰好,所以写写博客来强迫自己去改正,博客是个好东西,写给自己看看同时也写给别人看,所以这会有约束,从而不断的修饰改正错误,从中自己也会学到很多东西,可谓春风十里不如写博客。

学习永无止境,专注前端

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 11,901评论 1 91
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 22,953评论 1 45
  • 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示...
    七彩小鹿阅读 5,226评论 2 65
  • 青鲤来时遥闻春溪声声碎,嗅得手植棠梨初发轻黄蕊。待小暑悄过,新梨渐垂,来邀东邻女伴撷果缓缓归。旧岁采得枝头细雪,今...
    二月春熙阅读 1,178评论 1 51
  • 在SR和denoising中,大部分方法都不是直接对RGB三个通道分别处理,而是对RGB图像进行转换,之后再处理。...
    阮恒阅读 14,433评论 2 0