本文探讨了在HTML和CSS中使用样式类的最佳实践。强调了样式类的语义化重要性，分析了样式类产生的原因，并提出了解决方案。
我们知道HTML和CSS是[url=http://en.wikipedia.org/wiki/Orthogonality#Computer_science]正交[/url]的。这意味着可以分离内容结构（html文档）与外观样式（stylesheet）。
尽管是分离，但是最终页面的呈现需要把两者结合起来。这个结合机制就是selector。在基本selector中，tag和id是天然语义化的。问题在于class。很多时候我们发现添加class只是为了为html文档增加一个钩子，通过这个钩子，我们可以对文档的这个部分应用样式。有时候我们可以很容易将这个钩子语义化，即作为tag语义的细化或者补充。但是有时候也会无法语义化，从而出现纯粹的样式类（Style Class）。举例：.left、.red这样的，是典型的样式类，.style1，.style2则很可能是由工具产生的样式类。
[b]样式类[/b]，有三种典型原因。
第一是语义归纳能力不足或者语义化的动力不足。比如你可能很容易识别出表格行的交错背景色，并用.row-even和.row-odd来细化语义。但是你可能却不能识别出交错浮动（一张图片左浮动，下一张图片右浮动，以此类推）。又如“同样风格的一段文字，有些要红色，有些却要绿色”。基本上颜色背后很可能暗藏着语义（比如两种不同的醒目标示），但是客户只告诉你，这里要红色，这里要绿色，他不会告诉你语义，就好像导演给女演员hotel的房间号但是通常不会明确告诉她要干啥，此乃[b]潜规则[/b]。对此的解决之道，一是靠猜（看你对潜规则有多少经验），二是直接问导演你究竟想干嘛（当然需要点沟通技巧），三，对于一些你确定是ONS的（One occurreNce Style，一次性样式，也就是只适用于这个特殊页面的特殊部分），也可以考虑直接用inline style。ONS的需求是存在的（尽管有些同志BS它），比如在一篇文章中对不同图片的左右浮动定义可能仅仅是因为设计者觉得这样排版最sexy。
第二是缺乏对selector的认识。还是以交错对齐为例，同样是float:left对float:right，img.odd/img.even与img.left/img.right有什么区别？如果说前者就是语义化的，有些同志就不服气，因为你还是要返回去改html加上odd/even的钩子，而且它们貌似只是为了样式而存在。但是img:nth-of-type(2n+1){float:right} 和 img:nth-of-type(2n){float:left} 如何呢？高级selector的组合具有极强的描述能力。即使我们现在为兼容性仍然要用odd/even作为钩子，但是你确实知道这是一个高级selector的替代品，而不是附加的样式缩写。
第三是CSS本身的不足。最典型的例子是layout。layout通常要用一组rules来设定，而且常牵涉[url=http://lifesinger.org/blog/2008/11/pe-layout-2/]复杂的trick[/url]。当前CSS较缺乏高级布局能力，再加上布局本身的复杂性，所以我们有重用布局的需求。而布局所需的钩子就是预先设定的。虽然这些钩子仍然能被语义化（比如在多栏布局中不是写.top-bar、.left-col、.right-col，而可以写做.header、.main、.sidebar），甚至保持文档内容顺序独立于布局位置，但不可避免的，确实是由样式表预先决定了部分文档结构和类名。对于这个问题，我们要承认CSS不是完美的，而且布局有其内在复杂性。除了接受这个不完美，以及等待它变得更完美之外，另一个方式是引入像[url=http://lesscss.org/]lesscss[/url]那样的CSS预编译，来管理样式的复杂性。lesscss的mixins机制可以把rules与语义钩子解耦，比如你可以定义两栏布局的.left-col和.right-col的样式，但是不直接使用这两个样式类，而是通过mixin方式将样式类内的rules混入到.main这样的语义类中（当然我更希望把.left-col写成@ruleset left-col {...}，从而完全标明left-col是一个样式组合）。
BTW，对CSS进行增强是个有趣的话题，Bert Bos（CSS规范的主要编辑）有个著名的反对意见：[url=http://www.w3.org/People/Bos/CSS-variables]Why “variables” in CSS are harmful [/url]，但是Bert不会反对lesscss，因为它[b]工作在正确的层次上[/b]。事实上，也因为有了lesscss类似的预编译手段，试图将style class正当化的[url=http://www.fangyuqiang.com/metacss]Meta CSS[/url]更显得是个[url=http://hax.iteye.com/blog/497338]糟糕的主意[/url]。因为lesscss做的是对样式进行更高层级的抽象，Meta CSS却反其道而行。
总之，样式类虽然不至于罪大恶极，但还是应该，也可以尽量避免的。
尽管是分离，但是最终页面的呈现需要把两者结合起来。这个结合机制就是selector。在基本selector中，tag和id是天然语义化的。问题在于class。很多时候我们发现添加class只是为了为html文档增加一个钩子，通过这个钩子，我们可以对文档的这个部分应用样式。有时候我们可以很容易将这个钩子语义化，即作为tag语义的细化或者补充。但是有时候也会无法语义化，从而出现纯粹的样式类（Style Class）。举例：.left、.red这样的，是典型的样式类，.style1，.style2则很可能是由工具产生的样式类。
[b]样式类[/b]，有三种典型原因。
第一是语义归纳能力不足或者语义化的动力不足。比如你可能很容易识别出表格行的交错背景色，并用.row-even和.row-odd来细化语义。但是你可能却不能识别出交错浮动（一张图片左浮动，下一张图片右浮动，以此类推）。又如“同样风格的一段文字，有些要红色，有些却要绿色”。基本上颜色背后很可能暗藏着语义（比如两种不同的醒目标示），但是客户只告诉你，这里要红色，这里要绿色，他不会告诉你语义，就好像导演给女演员hotel的房间号但是通常不会明确告诉她要干啥，此乃[b]潜规则[/b]。对此的解决之道，一是靠猜（看你对潜规则有多少经验），二是直接问导演你究竟想干嘛（当然需要点沟通技巧），三，对于一些你确定是ONS的（One occurreNce Style，一次性样式，也就是只适用于这个特殊页面的特殊部分），也可以考虑直接用inline style。ONS的需求是存在的（尽管有些同志BS它），比如在一篇文章中对不同图片的左右浮动定义可能仅仅是因为设计者觉得这样排版最sexy。
第二是缺乏对selector的认识。还是以交错对齐为例，同样是float:left对float:right，img.odd/img.even与img.left/img.right有什么区别？如果说前者就是语义化的，有些同志就不服气，因为你还是要返回去改html加上odd/even的钩子，而且它们貌似只是为了样式而存在。但是img:nth-of-type(2n+1){float:right} 和 img:nth-of-type(2n){float:left} 如何呢？高级selector的组合具有极强的描述能力。即使我们现在为兼容性仍然要用odd/even作为钩子，但是你确实知道这是一个高级selector的替代品，而不是附加的样式缩写。
第三是CSS本身的不足。最典型的例子是layout。layout通常要用一组rules来设定，而且常牵涉[url=http://lifesinger.org/blog/2008/11/pe-layout-2/]复杂的trick[/url]。当前CSS较缺乏高级布局能力，再加上布局本身的复杂性，所以我们有重用布局的需求。而布局所需的钩子就是预先设定的。虽然这些钩子仍然能被语义化（比如在多栏布局中不是写.top-bar、.left-col、.right-col，而可以写做.header、.main、.sidebar），甚至保持文档内容顺序独立于布局位置，但不可避免的，确实是由样式表预先决定了部分文档结构和类名。对于这个问题，我们要承认CSS不是完美的，而且布局有其内在复杂性。除了接受这个不完美，以及等待它变得更完美之外，另一个方式是引入像[url=http://lesscss.org/]lesscss[/url]那样的CSS预编译，来管理样式的复杂性。lesscss的mixins机制可以把rules与语义钩子解耦，比如你可以定义两栏布局的.left-col和.right-col的样式，但是不直接使用这两个样式类，而是通过mixin方式将样式类内的rules混入到.main这样的语义类中（当然我更希望把.left-col写成@ruleset left-col {...}，从而完全标明left-col是一个样式组合）。
BTW，对CSS进行增强是个有趣的话题，Bert Bos（CSS规范的主要编辑）有个著名的反对意见：[url=http://www.w3.org/People/Bos/CSS-variables]Why “variables” in CSS are harmful [/url]，但是Bert不会反对lesscss，因为它[b]工作在正确的层次上[/b]。事实上，也因为有了lesscss类似的预编译手段，试图将style class正当化的[url=http://www.fangyuqiang.com/metacss]Meta CSS[/url]更显得是个[url=http://hax.iteye.com/blog/497338]糟糕的主意[/url]。因为lesscss做的是对样式进行更高层级的抽象，Meta CSS却反其道而行。
总之，样式类虽然不至于罪大恶极，但还是应该，也可以尽量避免的。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
