by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=2305
———–以下为翻译正文—————-
每种程序语言都有其精华与糟粕的部分。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相关属性”一文，中文版哦。
width: 100%
类似于vertical-align, 这是另外一个不按照我们想法来的CSS技术。但是，一旦你理解了百分比宽度是如何工作的，那接受它也不是很难。
初学者刚开始使用CSS的时候，他们可能希望盒子能够填满水平空间，他们的第一反应就是设置width:100%。似乎元素会铺满剩余空间，不需要再计算宽度。但这不是100%干的活。
CSS中的百分比通常相对于其他CSS设置（例如父元素）。width:100%确实字面显示的含义，不是填满100%剩余空间，而是100%所有空间，包括margin和padding的设置。
因此，这个属性/值对往往会产生不良的结果，这是为什么它不经常使用的可能原因。
译者吐槽：此处无力吐槽~~ 
border-image
所有的CSS新特性中，我觉得这个是最没用最应该被舍弃的。我曾经为SitePoint写过文章试图提高该技术的有用性，因为我所看过的大部分border-image的例子都太丑啦。
我越来越觉得我永远不会再使用该属性，如果其从规范中删除，估计大部分的开发者都不会注意到。
如今，即使我写了一整个系列教程，阅读了整个规范，我仍然不能在不咨询参考，我揪自己头发的情况下使用border-image写个box.
译者吐槽：不可否认，要理解个熟练使用border-image确实有一定的门槛。但是，幸运的是国内关于border-image介绍最好的文章就在本站，“CSS3 border-image详解”。至于究竟是精华呢还是糟粕，了解之后您自己判断吧。
CSS计数器
说真的？CSS还有这玩意？对其我另写过篇文章，希望自己的学习可以更上一层楼，希望可以加强对其使用。但我从来没有在任何项目中使用它，我敢打赌，我永远也不会。
代码让人费解又直观，脑袋被闪电狠劈：“这不就是那个<ol>元素干的事吗？”
译者吐槽：不怎么使用的东西并不一定是不好的东西。好比婚纱，就女生穿，而且一辈子就穿1次，但能跟裹脚布比嘛！我先前曾写过“CSS content内容生成技术”一文，我觉得里面计数器应用的例子就蛮有意思的。
CSS注释
再次提醒我，为什么不能使用简单的双斜线做单行注释呢？我敢肯定这与斜线的解析方式有关。要是我们能够像JavaScript一样，在每行的开始使用个双斜线注释或不注释，那我们就会轻松很多哈。
译者吐槽：要是CSS支持双斜线数值，类似于background:url(http://a.com/b.png);的代码该怎么办呢？
双冒号伪元素
为区分为元素和伪类，CSS3中所有伪元素都使用双冒号解析，因此，不是:before, 而是::before.
正如我之前解释的，这完全是无稽之谈。所有浏览器都将无限期支持单冒号语法，遵循良好的设计原则。
这就意味着，直到所有不支持双冒号语法的浏览器（例如现在占大头的IE8浏览器）彻底消失，我们才能使用双冒号语法。这至少需要2年，3年，甚至更久。
译者吐槽：识时务者为俊杰。虽然双冒号语法年迈的IE之流不支持，但是，这并不妨碍我们渐进使用一些技术，例如“改变页面选中文字颜色背景色”等 – ::selection{} .
其他？
哇！我很高兴能把胸中的抑郁都说出来。您会发现，这里的糟粕列表与浏览器不一致没有关系屎(shi)（当前，除了供应商私有前缀部分），更多的是集中在语法功能上。
您也可以一吐你心中CSS带来的不快，以及CSS不直观、不易懂的地方。我们也知道每个人都讨厌IE以及其所有的bug, 但是请把注意力都放在语言实际的特性上，而不是供应商的实现。
译者吐槽：最后一段了，本不想吐槽，但是作者说话实在不够严谨。上述所谓糟粕，vertical-align, margin, float, 以及双冒号伪类，哪个都牵扯到浏览器的不一致性，所谓稀奇的bug多半浏览器原因，而非语法。
———–以上为翻译正文—————-
英语拙劣，翻译水平有限，若有不准确之处，欢迎指正。感谢阅读，嘛喱嘛哩叿~~
本文为原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=2305
（本篇完）
相关文章
- 翻译-高质量JavaScript代码书写基本要点 (0.389)
- css margin的相关属性，问题及应用 (0.259)
- IE下实现类似CSS3 text-shadow文字阴影的几种方法 (0.259)
- 说说CSS学习中的瓶颈 (0.130)
- :after伪类+content内容生成经典应用举例 (0.125)
- CSS流体(自适应)布局下宽度分离原则 (0.086)
- CSSOM视图模式(CSSOM View Module)相关整理 (0.086)
- HTML textarea cols,rows属性和宽度高度关系研究 (0.086)
- 理解CSS3 max/min-content及fit-content等width值 (0.086)
- canvas HTML属性尺寸和CSS尺寸多个细节深入 (0.086)
- CSS3 box-shadow兼容loading效果兼IE10+ CSS Hack介绍 (RANDOM - 0.065)