翻译：CSS中的糟粕 « 张鑫旭-鑫空间-鑫生活

这篇文章发布于 2012年03月21日，星期三，16:01，归类于外文翻译。阅读 90326 次, 今日 3 次 13 条评论

by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=2305

原文地址：http://www.impressivewebs.com/css-the-bad-parts/
原文作者：Louis Lazaris
翻译编辑：张鑫旭

———–以下为翻译正文—————-

每种程序语言都有其精华与糟粕的部分。CSS(我知道，CSS不是程序语言，但又何妨？)也不例外。

本文我除了发牢骚还是发牢骚。我已经给网站敲代码敲了12年了，其中有一半的时间是在折腾CSS布局（没错，哥我大器晚成）。我想到要去认识到CSS中的精华与糟粕，而这里，我要讲的是”糟粕”。

“标准”盒模型

虽然这已经讨论够多的了，还是忍不住多唠叨。比如说宽度，我们在计算元素宽度总要把padding值，这是很头疼的，虽然可能最终我们都习惯了。

box-sizing属性算是及时雨，主流浏览器都支持，实际上IE8也是支持的。因此，我们终于可以把W3C盒模型弃之脑后了。

译者吐槽：某些人不先搭围墙再建房，而是先建房子再搭围墙，结果围墙跑到别人家土地上，还怪围墙的不好——为何增大了面积！

font缩写

这个我之前就讨论过了，font属性可声明的6个属性变成缩写值是没有道理的。

对于大部分的可缩写属性，缩写并不是个问题。您可以声明你想要的，任何选项都可以缺失，如果没有则会应用初始值。例如list-style和background没有应用的值99%的时间无论如何都不会被继承的，所以值的设置与否无伤大雅。

但是，很多排版属性都预期从父辈继承。因此，当你使用font缩写，事情会变得混乱。如果你对该属性的复杂性不熟悉，估计你要抓破脑袋了。

换句话说，如果我在<body>元素上声明文字粗体，我可能本希望里面的文字都继承粗体。结果，一旦应用了缺少font-weight缩写属性的font缩写，文字不是粗体显示的了。

译者吐槽：这我赞同，font缩写少用，适合用在无后的特殊文字上。好比江湖仇杀，上一代恩怨上一代解决，牵扯到下一代那剧情就复杂了。

浮动

是的，我们总在使用浮动，我们已经习惯于使用我们知道的唯一方法布局我们的页面。基于浮动的布局要很多基于表格的布局的同样问题——尽管不是很大，也有其优点。

float属性的主要目的是让inline内容包裹block水平元素显示。使用浮动创建列表，某种意义上说属于hack. 类似于我们改变了table原本用途创建整个页面一样，我们现在也同样改变者浮动的本身用途。

话虽如此，毕竟浮动没有基于表格布局的可访问性的问题、维护问题以及性能问题。因此，我们现在更逢源些。

但是，浮动不是省心的主，其会造成内容消失，这显然需要修复。他们是IE很多margin bug的罪魁祸首（但这显然是供应商的问题）。他们总是那么地不听话。

尽管CSS Regions以及flexbox已经开始出生了，但是距离我们完全抛弃基于浮动的布局及其怪癖还需要很长一段时间。

译者吐槽：浮动确实不是好东西，我之前就说过“浮动是魔鬼”。至于布局嘛，目前而言，流体布局才是王道。对了，这里提到的flexbox可以参见我先前“CSS box-flex属性…”一文。

私有前缀

这个还需要解释吗？

译者吐槽：作者桑麻，你是不是写这段的时候看《屌丝女士》笑岔气写不动啦。要知道，不是所有的人都见过猪跑的~~~

id和样式同流

是的，你可以继续使用id, 但是，请不要挂钩样式使用它们。很多人仍然不同意我。但是，这里我们没有任何理由使用它们。class可以做id可以做的任何事情，且好处更多。

id应该几乎全部用在片段标识符上，应和脚本挂钩。因此，我的建议是，在你的标记中应该有大量的id, 而与样式挂钩的只能是class, 然后你就会神奇地看到你的CSS文件原来是这样的可亲可耐。最大的好处是，你可以完全忘记特殊性问题。

译者吐槽：从管理和维护的角度讲，id牵扯脚本，class牵扯样式，确实不容易产生混乱以及维护。但是，有时候，我们做做demo小页面什么的，怎么顺手怎么来吧。管理50人团队的经验不一定适用于管理5个人的团队。

vertical-align

这是个听上去还蛮简单的属性，实则不然。其只在少部分情况下受用，在大多数情况下，只能坐冷板凳，睡队友沙发。

vertical-align表现不错的一个地方就是表格单元格，因为其与老的valign属性干得类似的事情，所以对于这种情况很好理解。

vertical-align在单元格和其他元素上的表现大相径庭，这使用vertical-align成为了CSS中“360烦恼风（海贼王索隆招式）”。

译者吐槽：作者讲得废话比我还多。一句话，vertical-align兼容性差，用处不大。实际上，其还有有很多地方有妙用的。之前我写过分析vertical-align的文章，您可以尝试点击这里查看IE6-8浏览器是如何错误解析vertical-align属性的。

垂直方向margin重叠

这个概念很直观，且我并不知道其发生的原因。但基本上是在某些特定情况下，如一个块状元素的底部margin和另外一个块状元素的顶部margin接触在一起的时候，那个小的margin会被合并成0.

这儿有篇文章可以帮助你理解何时margin重叠会发生，何时不会发生。好的是，它一般不构成什么威胁，但是在极少数情况下，看不出原因的，页面作者明确定义的东西会抽风。

译者吐槽：从这段内容，我感觉出原作者属于经验积累式的开发人员，而非深入研究型，对很多问题缺少甚解。

在我看来，垂直margin重叠原本意义是让具有margin属性的元素们间距等宽，是个很赞的具有创造性的特性。举例而言，一篇文章，每段都是个p标签，默认上下1em margin, 正因垂直margin冲的，才使得每个段落的上下间距都是一模一样的1em. 而我们日后所谓margin重叠问题更多的是我们把飞机上的零配件拿到拖拉机上使用。

还有，作者所说的“margin重叠是小的margin值效果会变得犹如0值一样”是不正确的。举个很简单的例子，1em的margin-bottom值和-1em的margin-top值亲亲我我的时候，较小的-1em margin值会被合并成0吗？显然不是！

关于margin重叠何时发生还可以参见我老早写的“CSS margin相关属性”一文，中文版哦。