前端编码规范之CSS

"字是门面书是屋",我们不会去手写代码,但是敲出来的代码要好看、有条理,这还必须得有一点约束~

团队开发中,每个人的编码风格都不尽相同,有时候可能存在很大的差异,为了便于压缩组件对代码进行压缩以及书写样式的规范统一和美观,很有必要大家一起来研究一套基本规范(模板)!

我先抛砖引玉。(禁止)、(必须)等字眼,在这里只是表示强调,未严格要求。

前端规范之CSS

1.tab键用(必须)四个空格代替

因为在不同系统的编辑工具对tab解析不一样,windows下的tab键是占四个空格的位置,而在linux下会变成占八个空格的位置(除非你自己设定了tab键所占的位置长度)。

一些童鞋可能会有疑问,tab键换成四个空格,多麻烦啊~

其实不然,我平时用sublime text比较多,在这个工具中可以对tab键进行设置。

选择Indent Using Spaces,Tab Width:4两项即可。

2. 每个样式属性后(必须)加 ";"

方便压缩工具"断句"。

3. Class命名中(禁止)出现大写字母,(必须)采用”-“对class中的字母分隔,如:

/*正确的写法*/.hotel-title{font-weight:bold; }/*不推荐的写法*/.hotelTitle{font-weight:bold; }

用"-"隔开比使用驼峰是更加清晰。

产品线-产品-模块-子模块,命名的时候也可以使用这种方式。

4. 空格的使用,以下规则(必须)执行:

.hotel-content{font-weight:bold; }

选择器与{之前(必须)要有空格

属性名的:后(必须)要有空格

属性名的:前(禁止)加空格

一个原因是美观,其次IE 6存在一个bug, 戳bug

5.多选择器规则之间(必须)换行

当样式针对多个选择器时每个选择器占一行

/*推荐的写法*/a.btn,

input.btn,

input[type="button"]{......}

6.(禁止)将样式写为单行, 如

.hotel-content{margin:10px;background-color:#efefef;}

单行显示不好注释,不好备注,这应该是压缩工具的活儿~

7.(禁止)向0后添加单位, 如:

.obj{left:0px;}

只是为了统一。记住,绿色字表强调,不表强制!

8.(禁止)使用css原生import

使用css原生import有很多弊端,比如会增加请求数等....

推荐文章Don't use @import

9.(推荐)属性的书写顺序, 举个例子:

.hotel-content{/*定位*/display:block;position:absolute;left:0;top:0;/*盒模型*/width:50px;height:50px;margin:10px;border:1px solid black;/ *其他* /color:#efefef; }

定位相关, 常见的有:displaypositionlefttopfloat等

盒模型相关, 常见的有:widthheightmarginpaddingborder等

其他属性

按照这样的顺序书写可见提升浏览器渲染dom的性能

简单举个例子,网页中的图片,如果没有设置width和height,在图片载入之前,他所占的空间为0,但是当他加载完毕之后,那块为0的空间突然被撑开了,这样会导致,他下面的元素重新排列和渲染,造成重绘(repaint)和回流(reflow)。我们在写css的时候,把元素的定位放在前头,首先让浏览器知道该元素是在文本流内还是外,具体在页面的哪个部位,接着让浏览器知道他们的宽度和高度,border等这些占用空间的属性,其他的属性都是在这个固定的区域内渲染的,差不多就是这个意思吧~(@frec)

推荐文章Poll Results: How do you order your CSS properties?

http://www.mozilla.org/css/base/content.css

10. 小图片(必须)sprite合并

推荐文章NodeJs智能合并CSS精灵图工具iSpriter

11.(推荐)当编写针对特定html结构的样式时,使用元素名+类名

/*所有的nav都是针对ul编写的*/ul.nav{......}

".a div"和".a div.b",为什么后者好?如果需求有所变化,在".a"下有多加了一个div,试问,开始的样式是不是会影响后来的div啊~

12.(推荐)IE Hack List

/*针对ie的hack*/selector{property:value;/*所有浏览器*/property:value\9;/*所有IE浏览器*/property:value\0;/*IE8*/+property:value;/*IE7*/_property:value;/*IE6*/*property:value;/*IE6-7*/}

当使用hack的时候想想能不能用更好的样式代替

13.(不推荐)ie使用filter,(禁止)使用expression

这里主要是效率问题,应该当格外注意,咱们要少用烧CPU的东西~

14.(禁止)使用行内(inline)样式

靖鸣君

像这样的行内样式,最好用一个class代替。又如要隐藏某个元素,可以给他加一个class

.hide{display:none;}

尽量做到样式和结构分离~

15.(推荐)reset.css样式

推荐网站:http://www.cssreset.com/

16.(禁止)使用"*"来选择元素

/*别这样写*/*{margin:0;padding:0;}

这样写是没有必要的,一些元素在浏览器中默认有margin或padding值,但是只是部分元素,没有必要将所有元素的margin、padding值都置为0。

17. 链接的样式,(务必)按照这个顺序来书写

a:link -> a:visited -> a:hover -> a:active

18.等你补充...

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,132评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,802评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,566评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,858评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,867评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,695评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,064评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,705评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,915评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,677评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,796评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,432评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,041评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,992评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,223评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,185评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,535评论 2 343

推荐阅读更多精彩内容

  • 作者:李靖原文地址:http://www.cnblogs.com/hustskyking/p/css-spec.h...
    IT程序狮阅读 761评论 4 17
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,727评论 1 92
  • 浪漫, 躲藏在高处, 触摸, 一手的冰凉, 落在手指, 都是麻木的蛮荒。 关于天气, 写不出半点秾艳的词语, 眼底...
    罗子阅读 991评论 76 136
  • 这节课,六子老师在上节重新定义了阅读的基础上,又重新定义了快速阅读。 从影响阅读速度的三个因素开始,给出阅读速度的...
    聆心2016阅读 508评论 4 6
  • 身虽消闲心未闲,多虑虚度日如年 此去繁华皆迷途,未知归来道可坚 二十五年尽浪荡,自愧双亲多疚歉 明朝入此红尘路,恐...
    叶落岁暮阅读 244评论 7 2