网页重构应该避免的10大 CSS 糟糕用法

标签: CSS/HTML | 发表时间:2013-11-22 07:18 | 作者:罗磊
出处:http://www.blogread.cn/it/

标签:   重构

   今天在回广州的火车上看到一篇 “10 CSS mistakes every web designer must avoid”,想着还不错,就翻译给大家。

   对于网页重构来说, CSS禅意花园 是网页布局从 table 表格转到了 html +css 的标志 。这些年来,随着我们的网站越来越复杂:html5,css3,新的技术、新的属性,越来越多的开发者开始思考和尝试提高他们的 CSS 技能。那么我们从哪里着手呢?对于网页重构工作来说,我们应该养成什么样的开发习惯?一个糟糕的 css 用法是怎样的?我们应该怎么处理这些糟糕的 css。今天这篇文章,我将谈一谈10个我们应该避免的 css 糟糕用法,当然,我们也会分享怎么才是正确的用法。

   为了方便大家理解,我将这10个糟糕用法归为三大类:权重、工作流、自以为是。

权重!权重!!权重!!!

   正所谓 马太效应,如果你写了很烂的 css,这段烂代码的不好之处是他会导致更多和更烂的代码。如果你需要解决一个 css bug,发现唯一的解决方法是:使用更多层级的选择器、 id 选择器;甚至跟糟糕:使用内联样式( inline-style ),直到使用最后的大杀器!important。以上提到的所有用法归根到期他们犯了「过多权重」的错误。

   CSS 中的权重取决于你如何使用具体的css 规则。

   #layout #header #title .logo a { display: block; }

   看看上面这串 CSS 选择器,你可能觉得这是一段符合语义化的「好」选择器:简单明了。如果你依照习惯从左往右读,你可能是这么理解:「先找到主要布局区域,再找头部区域,再找倒 title 标题区域,再找到 logo 标志区域,再找到这里面的所有 a 锚点」,对于 css 来说,这是一个很具体的精确定位,但是,实际上我们很少有机会 需要这么精确的定位。过大的css权重会造成你的样式表更加难以维护(你考虑过接你班的同事的感受木有!),也更加难以阅读和理解(这么多层声明、一长串你闹哪样啊)。

01.滥用 id

   CSS 权重的高低取决于你使用什么样的选择器:id,class 类,tags 标签。举个栗子:

#my-link{color: red}
.my-link{color: yellow}
a{ colour: blue}

   来做这么一个小测试,有这么一个超链接如下,如果我们没有其定义其他样式,浏览器渲染出来的最终结果会是什么颜色?

<a href="#" id="my-link" class="my-link">举个栗子</a>

   最终的颜色会是红色,因为 id 属性是三者之中权重最高的(id在网页中只能使用一次,他得权重值为100),所以红色葫芦娃成功击败了其他娃娃,举起了栗子。

   根据 css 权重,权重次于 id 的是class类,最后才是tag标签,正如你如上图审查器中所看到的。

   当然啦,像上面我们举的栗子这种「同时使用 id/calss/tag 」的情况在实际应用中还是很少见的,在日常开发中,我们更多的情况是会遇到如下情况:

#header a { border:2px dashed #000 }

   假设这是我们的一个项目,现在我们决定要把一个在 header 的 link设置成无边框,随手一写,我们添加了:

.special-link { border:none }

   然后再在 html 中添加了一个 special-link 的class 类,这下解决我们的问题了吗? 答案是:没有! 由于 id 的权重如此之高,我们需要更高权重的声明才能实现我们的需求。下面这样写才是正确的:

#header .special-link { border: none }

   假如说这种情景在我们的 code 过程中不断地出现:设置 header 区域另外一个特殊的超链接 link 为某特殊的样式,你该怎么处理呢? id 的高权重特性意味着滥用 id 绝对是一个很糟的做法!

   那我们如何解决这个问题呢?用 class 类来代替 id 吧。

02.大串的 css 选择器(多层级)
#header #title .left-side img.logo { opacity: 0.5 }

   上面这个栗子不仅仅乱用 id,他还很长,正如同乱用 id导致的高权重麻烦,如果你使用一大串选择器(超过三个层级)你同样会造成过高权重,导致你陷入到高权重和更高权重的汪洋大海之中。

   那针对这个问题的解决办法有什么呢——精简!如同我们现在这个栗子,如果我们用一个 .logo class类就能解决我们的需求,那我们就没必要写这么以大串了。一般情况下,我们应该控制选择器在2个,最多3个。

03.Inline styles

   内联样式是css 权重罪恶的源泉,同时也从根本上摧毁了我们使用 css 的初心(结构样式分离)。当我们的工程师好不容易走出 tables 的魔窟开怀拥抱外部样式表,我们早就应该知道不要把样式同结构混杂在一起。

   根据 css 权重级的特性,内联样式只能被!important 所覆盖。一般来说,这就意味着,如果某猿使用了!important,他们更多是被逼的没办法才这么用(对应英文 reactive),而不是想这么用(preoactive)。的确!important在 css 样式表中用起来十分方便,但我们最好是聪明地、小心翼翼地碰她、用他,而不是把他当做救命稻草(救命稻草用多了,迟早也会从救命稻草变成压死骆驼的稻草)。

   下面举例怎么解决内联样式的问题,就两步 1.复制删除 2.粘贴 。剔除内联样式,转移到样式表之中吧。

04.从上至下式的粗放命名

   说完 css 权重,接下来我们来谈谈其他 CSS 的糟糕用法。假设我们开始了一个新项目,设计师丢给我们一份 psd,我们开始在 html 中写基本的框架。

   根据结构从下至上式的命名方式模糊化了 html 结构,工程师常常根据上下结构来命名id 和 class,而不是具体的设计元素,例如#header,content,这常常会导致长选择器(举个例子如. menu ul li a{ }),这样的后果是我们的代码变得难以调试和维护。怎么解决这个问题呢?我们应该尝试从网页中分离出设计元素,这同样可以减少我们代码中的冗余。

05.冗余/重复

   冗余意味着你写 css 的过程中不断重复某些代码。在使用编程语言的时候, 我们很好理解重复(造轮子)意味着浪费时间,我们在 code 中应该遵循 DRY 原则(Don’t repeat yourself)。什么情况下我们会重复造轮子呢?举个栗子:

.some-title { font-weight: bold; }
.some-other-title { font-weight: bold; color: red }

   实际上,我们可以有个更好的解决办法

.some-title, .some-other-title { font-weight: bold; }
.some-other-title { color: red; }

   比如说我们要添加一个不同颜色的标题,我们可以使用一个常用的命名,或者添加一个具体的 class 类。

<h3 class="some-title pop">我的标题/h3>

   这个有点 面向对象的CSS的思想在里面,使用 Sass 中的 @extend 特性可以很好地解决我们这个问题。

   在 Sass 之中,你可以使用@extend 继承选择器,被继承的选择器的样式也被继承。这个特性使得我们可以很方便管理不同的样式,举个栗子:

.some-title { font-weight: bold; }
.some-other-title { @extend .some-title; color: red; }

   当CSS预处理编译器将.scss转换成.css文件时,我们最终输出的样式是:

.some-title, .some-other-title { font-weight: bold; }
.some-other-title { color: red; }

   最终输出的是一模一样的效果,解决重复和冗余的问题,要求我们在写 css 的时候心中对 html 层级结构要有个大致的规划,思考不同的设计元素之间的层级和关系,我们规划得越清晰,最终输出的 css 也越精简。

06.精简你的单位

   如果你的样式表中混杂着 px,em,rem等等单位,是时候改变了,业内著名的web开发者 Rachel Nabors 呼吁大家统一使用em为字体大小单位,他曾说「我看其他人的样式表第一件事就是看字体样式,然后把所有的font-size的单位换成em」,这几年用户使用的终端越来越多样(不同的终端、不同的浏览器使用的默认字体大小存在差异),使用绝对字体大小px变得越来越不可控,使用em等相对大小的字体则避免了这个问题。

   如果你想在转成em对这些单位有个深入点的了解,推荐你阅读 《CSS文字大小单位PX、EM、PT》

   当然,如果你就是不喜欢em和他们嵌套特性,那么你可以更进一步了解 CSS3 中推出的新单位 rem

   不同单位在 web 设计之中的战争还在继续(可参考文章 CSS Font-Size: em vs. px vs. pt vs. percent

   ),学习一点相关知识对我们提高代码可维护性至关重要。

   下面我们进入到这篇博文的第三也是最后一个部分「自以为是」,这些坏习惯包括:增加不必要的东西,错误,无意义的 css。

07.向下兼容和无效的规则

   在开发的过程中,如果你不需要使用 css3 之类的高大上代码就能实现效果,那再好不过了。可是,作为工程师的你在 Chrome 最新版本上面看到的效果,并不意味着你的用户能在他们的浏览器上看到同样的效果(考虑过 IE 的感受没有),一个十分糟糕的坏习惯就是完全忽略向下兼容性。

   如果你在项目中使用rgba(),你是否测试过这个属性的兼容性?如果没有,那你最好祈祷没有 IE8的用户会访问你的网站。你是否写全了针对不同浏览器的不同的规则(-webkit,-ms -moz 等等)?解决这个问题,可以使用 CSS LInt检测下你的 css 代码,CSS Lint的检测规则包括错误的和不合理的地方。

08.(没有意义)不起作用的样式

    Harry RobertsCode smells in CSS是关于 css 糟糕用法的经典文章。他举了几个可有可无的不起作用样式的栗子:

h2{
font-size:2em;
margin-bottom:0.5em;
padding-bottom:0.5em;
border-bottom:1px solid #ccc;
}
.no-border{
padding-bottom:0;
border-bottom:none;
}

   Roberts 推荐的重构精简方法是删掉属性为0和none的属性值。

h2{
font-size:2em;
margin-bottom:0.5em;
}
.headline{
padding-bottom:0.5em;
border-bottom:1px solid #ccc;
}

   如果你像重构之前的那样写法,h2是一个我们在web 设计中会不断重复用到的元素,这个本质上「你写了更多的代码却没有实现了更少的样式效果」,如果我们接下来又要设置一个h2的属性为其他样式,那代码会得很乱。

   Harry Roberts是 inuit.css 框架的作者。

09.巧而不巧:用 Hack 不意味着你是个好 Hacker

   负的 margin 边距,!important等等,上面的这些就是我们所说的 hack 用法(此 hack 非针对IE 兼容的 hack,也可以理解成 cheater 作弊用法),如果其他人问我们为什么要这么写?我们可能只需要回答「管他呢,反正能实现效果」。

   当我们为自己使用这些充满「弊」端的方法而略不放心的时候,一个解决办法就是把我们的这些 hack 放到一个特定的样式表文件hack.css之中。

   任何时候你意识到你写了一个 css 的 hack 用法的时候,你直接把这些代码放到这个hack.css 之中(或者样式表的特定区域:通过注释跟其他样式区分开),这个专属区域是个好解决方案因为他最终会在用户端隐藏。

   当我们养成了这个习惯,我们可以十分清晰地知道我们写了哪些 hack ,同样可以方便我们了解我们使用这些 hack 的情景,让我们可以知道如何避免这些 hack 。我们有许多写 hack 用法的理由,但是如果我们不记录我们为什么 hack,我们将不会从我们这些 hack 中学到我们为什么要错误地这么用。

10.糟糕的文档和注释

   昨天在微博上看到一个段子「程序员最讨厌的四件事:写注释、写文档、别人不写注释、别人不写文档 …」。

   写文档和注释绝对不是一个有意思的事情,但却是一个最重要的事情(尤其是涉及到项目后续可维护性时),文档可以有效地让其他人知道你的代码是干什么的,同时其他人理解你的 css。对于大部分语言(html,css,php,JavaScript) ,开发者可以直接在代码文件中写上注释(文档)。

    Nabors 曾说「我曾YY:如果我今天写完一个项目的 css 但是明儿我却挂掉了,有一个人幸运地接手我这个项目,那他看得懂我的这些代码是什么意思吗?」。尽量地让我们的样式表中的结构清晰,如果不能让人立马知道你的选择器指的是哪里的样式,可以尝试添加注释(什么!你还说注释增加css 文件大小!难道你不知道压缩工具么!)。

   第一步是在必须的地方做好注释,第二步是使用工具把css文件中的这些注释转换成一个合适的文档。推荐可以使用 css_docKSS

   css_doc 跟 JavaDoc类似,他的转换原理基于 CSSDOC. KSS(Knyle Style Sheets),对于前端和设计师来说都十分有益。

总结

   在这篇文章中,我们介绍了一些常见的 css 糟糕用法,指出了为什么我们应该避免这些用法和应该使用什么正确的用法。还是这句话”Doin something is always better than nothing”,行动起来总比什么都不做要好点,未雨绸缪有备无患。

   今天你看完这篇文章,知道了10个糟糕的 CSS 用法,这不意味着你明儿去上班就把你过去所有的代码都重构一遍。从点滴开始,一步一步来才是我们开发工作的正确做法。在接下来的工作中,注意这些细节,避免这些「小」错误,让我们的代码更漂亮点。终有一天,我们会发现”Code is poetry”。

译者言

   这是第二次翻译技术相关文章,不得不说,还是低估了翻译的难度。要把技术类的文章翻译得语言流畅、通俗易懂,还是挺有挑战性的。译文中加入了自己的理解,配图也是自己通过 codepen 重新截图演示,这篇文章的译稿我放在了 google docs 上,如果对于某些翻译你有更好的用法,可以直接建议修改。

   https://docs.google.com/document/d/11Ly6z0dlVVPzIL-W22L_U6waoU7Pid4-KdDmEx6D0c8/edit?usp=sharing

您可能还对下面的文章感兴趣:

  1. 代码重构方向原则指导 [2013-10-23 12:59:38]
  2. 实践中的重构 [2013-03-07 13:54:53]
  3. 如何避免重构带来的危险 [2012-11-11 23:43:29]
  4. 前端重构实践(一) —— 性能优化 [2012-08-05 22:55:17]
  5. 实战遗留代码 [2012-07-19 12:22:40]
  6. 什么是重构,什么不是重构 [2012-05-14 22:20:55]
  7. 抵制代码重写 [2011-05-17 09:10:49]
  8. 关于重构和重写 [2010-03-02 13:39:21]
  9. 网站重构到底是什么,网站重构到底要多久 [2009-11-12 19:01:52]
  10. 重构发现:指针操作问题 [2009-11-02 21:05:07]

相关 [网页 重构 css] 推荐:

网页重构应该避免的10大 CSS 糟糕用法

- - IT技术博客大学习
   今天在回广州的火车上看到一篇 “10 CSS mistakes every web designer must avoid”,想着还不错,就翻译给大家.    对于网页重构来说, CSS禅意花园 是网页布局从 table 表格转到了 html +css 的标志. 这些年来,随着我们的网站越来越复杂:html5,css3,新的技术、新的属性,越来越多的开发者开始思考和尝试提高他们的 CSS 技能.

CSS页面重构“鑫三无准则”之“无图片”准则

- jessie - 张鑫旭-鑫空间-鑫生活
本文地址:http://www.zhangxinxu.com/wordpress/?p=1652. “鑫三无准则”这个概念貌似最早是在去年的去年一篇名叫“关于Google圆角高光高宽自适应按钮及其拓展”的文章中提过. 这是自己在页面重构的经验中总结出来的一套约束自己CSS的准则,即“无宽度”、“无图片”和“无浮动”,目的是使CSS布局模块化以及增强可扩展性.

9个漂亮的 CSS 网页模板下载

- 英建 - 博客园-首页原创精华区
  当你需要在短时间内设计出一个网站的时候,网页模板就非常有用了. 在这篇文章中,收集了各式各样的网页模板,您可以免费下载使用,希望这些网页设计模板不仅带给您灵感,也让您回到创作轨迹. 演示:Portfolio Template 1 demo. 下载:Portfolio Template 1 download.

网页设计师必备的10个CSS技巧

- - 博客 - 伯乐在线
CSS是网页设计师的基础,对CSS的了解能使他们能够设计出更加美观别致的网页. 使用CSS技巧来巧妙地处理CSS是非常令设计师着迷的事情. 在CSS的深海世界里有很多有意思的东西,你只需要找到最适合你的就好. 当然我们不可能一下子就记住所有CSS的规则和语法,但为了以后的发展我们还是应该记住那些非常有用的CSS技巧.

20免费的响应网页 HTML & CSS 模板

- - 苏打苏塔
响应设计(Responsive design)是今年流行的一种设计趋势,随着移动设备越来越多的被人们接受与应用,网页的设计也要注意在小屏幕下的展现方式与用户体验,于此而生的就是响应网页设计. 在这一次的分享中,和大家分享一些免费的响应 网页设计模板,你可以从这些免费的资源中,学习到如何制作响应屏幕大小(或者是说浏览器大小)的WEB设计.

推荐 10 款 CSS 框架,网页设计就是这么简单

- ayu - 博客园新闻频道
程序开发人员和网页设计人员掐架的事情常有听说,程序员们总是为自己设计不出来漂亮的网页而纠结. 不再郁闷,因为开源帮了你,下面为你介绍11款相当不错的CSS框架,专心做程序吧,网页设计交给开源帮你. CSS网页布局框架 Elastic. Elastic 是一个简单的 CSS 框架用来对网页进行布局. Elastic 可实现各种各样常见的网页布局,如下图所示:.

每个网页设计师应该知道的10条CSS规则

- - 博客园_首页
通过网页设计师的大量CSS经验,我们会记住所有种代码语法,兼容性和片段. 有一些特定的CSS,可以真正帮助改变你的网站设计改变较旧的技术规则和声明. 这里是我收集到的很有用的10条CSS规则. 如果需要支持老版本的浏览器,那你就必须坚持使用css1的媒体描述符screen和print,到底是哪些老版本的浏览器,没有查.

DIV CSS 网页兼容全搞定 (IE6 IE7 IE8 IE9 火狐 谷歌)

- - CSDN博客研发管理推荐文章
本文收集整理了IE7,6与Fireofx的CSS兼容性处理技巧,供大家参考.   请尽量用xhtml格式写代码,而且DOCTYPE影响 CSS 处理,作为W3C标准,一定要加DOCTYPE声明.    1.div的垂直居中问题.   vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.

CSS图形

- GLORY - 酷壳 - CoolShell.cn
下面的示例展示了使用纯CSS制作的各种图形,你可以自由地修改文中的CSS代码. 经测试,IE9, Chrome, FF, Safari都可以正常显示. 五角星形 via Kit MacAllister. 心形 via Nicolas Gallagher. 无穷大 via Nicolas Gallagher.