离线下载
获取电子书

稻米鼠 · 更新于 2018-02-23 02:01:00

第二十六章 CSS 书写规范

开一瓶一块八的啤酒,再来一串八毛钱的小鱿鱼,老板记得多放辣椒(这样经吃,这是经验,都记着点)。我们继续开始聊~我一个礼拜才三块钱零花钱,今天点了两块六的大餐,喵的,这日子不过了!

你说我今天废话特别多?是啊,这节课就是一节发牢骚的课。我们来解释一下题目哦,CSS 是啥我们前边都说过了,书写呢?我们前面也都写过了,但是我们采用的是追加方式,就是需要什么就在后面加上他。规范,这个是我们今天要重点去解释的东西。

啥是规范?规范是没有强制性的东西,他建议你去遵守,遵守的话可能会给你带来一定的好处,但是你坚持不遵守也未必会有什么严重的后果。中小学生行为规范要求我们不要早恋,因为这会分散我们的精力,进而影响我们的学习成绩。但是你要是觉得学习这件事情简直是小菜一碟,轻轻松松就名列前茅了,或者你是富二代,别害羞,我们不会歧视你的,反正富二代其实完全可以不在乎分数什么的。那你完全可以选择这个美妙的人生副本(别吵,在学校阶段这个就是副本,毕业之后才是主线任务的)。这有问题么?规范有错么?我的解读有错么?

但是不止一次的有人跟我说,你这个不符合规范!你就是在误人子弟。可是为什么我同学里一对对早恋的都成了,而且很幸福。而且我的高中(某地一中,重点)的副校长的老婆也是高中谈的。什么是对的?合适的就是对的。非得拿着条条框框去抠的是教条主义,我写的又不是教科书,教科书又不是没有错。

你如果搜索 《CSS 书写规范》 网上有一篇流传很广,但是人家的标题是 《推荐大家使用的CSS书写规范、顺序》 看见了?是推荐,不是强制,不是必须,你又凭什么依据这个说我写错了?而且此篇文章的某些细节也不是大家都完全认同的,有兴趣可以去查查。因此而嘲笑他人写的如何的,我只能说:呵呵!

今天我说的规范是你不得不去遵守的,或者说是作为一个写代码的,起码要遵守的吧。当然其实我对你们没有任何要求,还是那句话,初学的时候达到效果是唯一目的,后面用的时间长了自然知道自己该怎么去做的。

原则是:第一、书写整齐,要么都缩进,要么都不缩进,缩进要整齐,总之就是好看。你想这么多代码,说看着不头疼是扯淡,如此情况下你还把他写成乱麻,反正你自己还要回头看的,你自己懂得。这个不只是 CSS ,写任何代码都是如此,这是为日后准备的,叫做有备无患。

第二、感觉将来可能不清楚的地方要加注释,这里还插一句 Html 的问题,最好每个 </div> 后面都加上注释,注明这是结束的哪个 div,否则嵌套多了后面查找的时候很费劲的。为啥你们的代码自己都懒得回头看,首先你的格式难看,然后就是没注释,自己再看的时候都晕了。

第三、CSS 元素的先后顺序,先外后内,先全局,后局部,所以 body 的定义在前面,因为他是最外面的,a {……} 这种也在前面,因为定义的是全局的,所有链接啊。然后按着从上到下,由外往里的顺序逐个写。元素的伪类既然是基于元素本来的样式的(比如 :hover)那他肯定跟随在元素本身的定义之后,元素都没定义,你基于谁去啊。

第四、内部的属性按着从整体到局部的顺序去写,搞不懂就自己大概有个顺序,各个元素都按照这个顺序就好,因为以后查看的时候方便点,要不然几个元素都是十几个属性的,然后一个宽度写在最上边,一个在最下边,神仙都气哭了,完全不知道你下一张牌怎么出啊。

第五、注意点有前因后果的,把基础条件写在前边。本身是内联元素,你不先 display:block 又哪来的 float:left; 啊。我们说 margin:0 auto 居中的话必须有固定的宽度,那你是不是该把宽度定义在他前面?这就是个逻辑关系。

然后少点重复定义啥的,挺好了。还有 id 和 class 尽量命名的让人一看就懂这是干嘛的,反正你故意反着写,用 #footer 当页头也没人管你,让下一个看你代码的人去哭吧,在特殊情况下又不是没人这么做,如果你确信你不会再看这个代码完全可以试试,但是要是挖了坑有自己跳进去就呵呵了。

就这样差不多够用了,写的多了你自己就给自己一份必须遵守的规范了,其实哪用得着我来废话。技术是让人来享受的便捷的,不要刻意地把它复杂化。别觉得学代码很可怕,其实编程这件事情也在努力变得更加友好,所以前面我们的各种不规范也都被浏览器容忍了。

那么大家试着去把我们已经写过的代码规范一下吧~我也简单修改了一下,大家可以下载看一下。

没看懂的记得以后过来看~

本章学习卡片:卡片 26

本章代码下载:本章代码


本书是收费的,不过交费凭自觉。价格定义为每人请我喝一杯咖啡(哪种品质的咖啡随意),支付宝账号:

alay9999@163.com (刘源)

为了让大家阅读方便,本书将在如下站点发布,但最终内容以主站为准:

未经本人许可,禁止任何形式转载。相关事宜请联系: dms@zji.me