关于样式类（StyleClass）
我们知道HTML和CSS是[url=/wiki/Orthogonality#Computer_science]正交[/url]的。这意味着可以分离内容结构（html⽂档）与外观样式（stylesheet）。
尽管是分离，但是最终页⾯的呈现需要把两者结合起来。这个结合机制就是selector。在基本selector中，tag和id是天然语义化的。问题在于class。很多时候我们发现添加class只是为了为html⽂档增加⼀个钩⼦，通过这个钩⼦，我们可以对⽂档的这个部分应⽤样式。有时候我们可以很容易将这个钩⼦语义化，即作为tag语义的细化或者补充。但是有时候也会⽆法语义化，从⽽出现纯粹的样式类（Style Class）。举例：.left、.red这样的，是典型的样式类，.style1，.style2则很可能是由⼯具产⽣的样式类。
cssclass属性
[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=/blog/2008/11/pe-layout-2/]复杂的trick[/url]。当前CSS较缺乏⾼级布局能⼒，再加上布局本⾝的复杂性，所以我们有重⽤布局的需求。⽽布局所需的钩⼦就是预先设定的。虽然这些钩⼦仍然能被语义化（⽐如在多栏布局中不是写.top-bar、.left-col、.right-col，⽽可以写做.header、.main、.sidebar），甚⾄保持⽂档内容顺序独⽴于布局位置，但不可避免的，确实是由样
式表预先决定了部分⽂档结构和类名。对于这个问题，我们要承认CSS不是完美的，⽽且布局有其内在复杂性。除了接受这个不完美，以及等待它变得更完美之外，另⼀个⽅式是引⼊像[url=/]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=/People/Bos/CSS-variables]Why “variables” in CSS are harmful [/url]，但是Bert不会反对lesscss，因为它[b]⼯作在正确的层次上[/b]。事实上，也因为有了lesscss类似的预编译⼿段，试图将style class正当化的
[url=www.fangyuqiang/metacss]Meta CSS[/url]更显得是个[url=hax.iteye/blog/497338]糟糕的主意
[/url]。因为lesscss做的是对样式进⾏更⾼层级的抽象，Meta CSS却反其道⽽⾏。
总之，样式类虽然不⾄于罪⼤恶极，但还是应该，也可以尽量避免的。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。