让csser写出更优美的代码
发布在css研究2014年9月5日view:4511
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

前言

将近一周没有更新博客了,因为最近在忙微信公众号的问题,在思考着要不要做一个前端速查的公众号,然后让有需要的人自己去关注上面,发送指令然后得到消息。没错,我真的去做了,添加了差不多了30多篇相关介绍。但是就在昨晚准备要睡觉的时候,我突然再想假如我每个属性都要细分说出来,用户估计不会没有这么多耐心去一个个回复,然后一个个看。所以我先尝试把这篇文章给写出来,同时也欢迎各位关注下微信:

微信

目前我想做的是,把所有的CSS2相关知识带过,加上自己对属性的理解,再把CSS3单独列出来,毕竟现在是移动互联的天下,css3在移动web上将大有作为。假如你有什么好的建议,不然直接在评论中给我提醒吧!

CSS语法

今天我想写的第一课叫做css语法,粗一看这东西没有什么技术含量 PS:真的是没有一点技术含量~ .~ 。但是有时候我们往往遗漏了这些微不足道的地方,所谓细微之处见真章,小并不代表我们不去重视它,正是因为它足够小,所以我们才更好去了解她,知道她,并且爱护她。她才能成为你心目中的女神,她才能带你去飞。。。

先来解释css语法

根据定义要求,css语法通常是由两个部分构成:选择器和声明。选择器和声明可以是一个也可以是多个。如下所示:

前面是选择器,紧跟着是声明,当然在项目中,我们不可能仅仅就只有这么一个选择器和一个声明,有时候我们也会碰见这样的情况:

.layout:after,.hd:after,.bd:after,.ft:after,.cf:after,.Q-tList:after,.Q-tList ul:after,.Q-tList ol:after,.Q-pList:after,.Q-pList ul:after,.Q-tpList:after,.Q-tpList ul:after,.Q-tpWrap:after{content:"";display:table;clear:both}
.layout,.hd,.bd,.ft,.cf,.Q-tList,.Q-tList ul,.Q-tList ol,.Q-pList,.Q-pList ul,.Q-tpList,.Q-tpList ul,.Q-tpWrap{*zoom:1} //腾讯首页相关css

这个就是N+1个选择器使用同一个声明,这样就是最大限度的挖掘css强悍的功能,重复利用相同css类,减少代码字符,减少对服务器的多次检索,一步到位。浏览器先查找到选择器,然后再去读取选择器里面的各属性值,接着返回给网页文档,网页根据文档所给定的样式来呈现给观众。

一个选择器用大括号包含一个声明块,声明块由一个或者多个声明组成,每个声明后都用分号来隔开。分号在这里的意义相当于你用箱子装两盒月饼准备偷偷发给女神,为了月饼保证不受碰撞,你用了报纸在中间垫开来是同一个道理。

说得好有道理

既然w3c给css语法这样的一个定义,那么我们是否应该往更规划化的css语法方向走。在团队配合当中,前端的同事在看你代码的时候一目了然,不言而喻。有时候适当地减少不必要的沟通可以让事情变得更加迅速,我这里并不是希望同事之间不交流想法,只不过说可以减少一些不必要的交流,有时候交流太多了反而是累赘。//看看某某公司每天都打鸡血开会,但是月底业务员的业绩还是不上来。 下面就说说我看见的常见几种语法不规范。

语法大考究

就拿上面QQ首页的css来说,假如你能在第一眼就知道其属性值,那么我佩服你了,你的视力100,秒杀99.9%的人,大吼一声“还有谁!”,反正我看到这就醉了。

.layout:after,.hd:after,.bd:after,.ft:after,.cf:after,.Q-tList:after,.Q-tList ul:after,.Q-tList ol:after,.Q-pList:after,.Q-pList ul:after,.Q-tpList:after,.Q-tpList ul:after,.Q-tpWrap:after{content:"";display:table;clear:both}

大概看了这段代码的声明知道了这是一段清除浮动产生的塌陷的代码。但是至于哪些标签需要用到这声明就不这么明显了,毕竟密密麻麻的东西看了头大,所以我们可以适当优化一下代码,让其看起来更加明朗。

.layout:after,
.hd:after,
.bd:after,
.ft:after,
.cf:after,
.Q-tList:after,
.Q-tList ul:after,
.Q-tList ol:after,
.Q-pList:after,
.Q-pList ul:after,
.Q-tpList:after,
.Q-tpList ul:after,
.Q-tpWrap:after{content:"";display:table;clear:both}//这么看代码应该比刚刚好点了吧,是不是有点明朗了???

这样我个人感觉会比刚刚上面好很多了,假如有你是负责做写页面的,你写完了页面了,直接给前端的同事加动作的话,它假如想要调试某个css标签代码,会一眼就可以知道这些标签具体是怎么一个情况,这样就不会杂乱无章了。但是这样优化就完了么,显然不是。假如要是这样多个这样的同类规则放在一起,让我们看看效果:

.layout:after,
.hd:after,
.bd:after,
.ft:after,
.cf:after,
.Q-tList:after,
.Q-tList ul:after,
.Q-tList ol:after,
.Q-pList:after,
.Q-pList ul:after,
.Q-tpList:after,
.Q-tpList ul:after,
.Q-tpWrap:after{content:"";display:table;clear:both}
.layout:after,
.hd:after,
.bd:after,
.ft:after,
.cf:after,
.Q-tList:after,
.Q-tList ul:after,
.Q-tList ol:after,
.Q-pList:after,
.Q-pList ul:after,
.Q-tpList:after,
.Q-tpList ul:after,
.Q-tpWrap:after{content:"";display:table;clear:both}

假如是一排排的标签写下来假如说第20行有出错了,我们找起来不方面,虽然说我们可以用检索工具可以找到,但是终究不是很方便,所以我们在每个规则后面最好加一下回车键,优化如下://为了节省篇幅,把代码去掉几个选择器。。。

.layout:after,
.hd:after,
.bd:after,
.ft:after,
.cf:after{content:"";display:table;clear:both}//就是在这里加一个回车键,记住了哦

.layout:after,
.hd:after,
.bd:after,
.ft:after,
.cf:after{content:"";display:table;clear:both}

咦,这个结尾我们看见了 clear:both 居然忘记添加分号…,其实在后面我也经常不添加分号,但是有时候习惯的添加分号这个行为还是要的。

分号

假如我们总是有忘记写分号的情况,那么也许有天你就会写成这样的代码:

.layout{font-size:12pxfont-family:simsun}

也许你会觉得我很扯蛋,这这并妨碍有些童鞋就是写代码,本是无意,但是前台却显示不出来我们所写的样式,有时候还以为是因为单词写错了,但是其实真不是。所以分号也有重要,我真的不是处女座处女座

为了方便代码的可读性,我们还应该这么优化:

.layout:after,
.hd:after,
.bd:after,
.ft:after,
.cf:after{
    content:"";
    display:table;
    clear:both;
    font-size:12px;
    z-index:1;
    background:#000;
    background-size:auto;
    border:1px solid #000;
}               //这么写是避免了假如有N+1选择器共同使用N+1条声明,方便查阅

.layout:after,
.hd:after,
.bd:after,
.ft:after,
.cf:after{
    content:"";
    display:table;
    clear:both;
}

在标签中我也提到了这是为了让代码有更好的可读性,读起来舒舒服服,不至于我们还要让我们的同事重新去一个个查属性值具体是什么,一目了然。其实我们还可以更加变态一点,就是再把每个声明后面区分开来,因为我们在编辑器看的时候,代码总是这么刺眼,比如我的dw

dw代码

这么写的话再密密麻麻选择器一旦多起来的情况就会让自己都看的头晕,假如争取把各种声明对齐的话,那日后在自己维护代码起来的时候也方便,就算新进来的同事也可以很快的上手,且不是减少的所谓的培训?

压缩代码

当然,我们并不是为了压缩代码而压缩代码,压缩代码就是为了节省宽度,节省宽度就是为了节省成本,成本就是生命。我们来对比腾讯压缩之前的代码和压缩之后的代码,我保存下来大概是1100行代码左右,那么没有压缩之前是:

css压缩代码

压缩之后:

css压缩之后

我之前说过,不管是几K的代码,但是对于流量大的网站,就是白花花的银子。哦,对了,其实chrome浏览器自带的开发者套件是有css js压缩之前和压缩之后的操作,具体是在这里:

当点击某一个已经压缩过的css之后,直接点击左下角这个 {} 符号,那么chrome会把压缩过的css和js还原到我们常见的类型,你看,其实chrome也是按照我们刚刚的书写规范。

后话

我真心不是处女座,我只是觉得有时候应该还可以更加完善一下的。但是我想说,这种书写规范适合团队协作的时候,毕竟一个团队在协同做一件事的时候效率永远是第一位,假如因为其中某一位同事因为另外一个同事的代码看不懂,那么这样协同操作起来就很吃力。假如是你平常的联系,不想要看见这么多余的代码,那你可以直接在一行写到,没有问题,也不会有人要求你一定一定要怎样,但是当用做团队协同的时候,记住,办事效率第一位。

好了,那么第一篇算是说完了,欢迎关注下我的公众号“前端速查” ,真心不是打广告,只是为了让喜欢前端的人走到前端行业来,未来是属于互联网的。

最后,大家中秋节快乐,愉快得享受节日吧。

看过之后,你有什么想法呢?欢迎在评论说出你的想法。

本文地址:http://xiaoho.com/?p=713
原创文章,转载请注明来自:◎前端路人乙xiaoho.com

评论
发表评论
暂无评论
WRITTEN BY
DO1路人乙
个人博客:xiaoho.com
TA的新浪微博
PUBLISHED IN
css研究

很喜欢这个前端论坛~所以在自己博客的每一篇原创文章都会在这边跟大家分享一下,暂定就这么多,纯粹的爱好者。

我的收藏