你如何从遗留下来的CSS中清除干净的样式？
我目前正在开发的应用程序拥有12000行的CSS.它早已成长到这个大小有机地早在没有标准或css评论,唯一的规则是使应用程序匹配的设计.我们经常遇到的一些问题：
>冲突的样式：一个开发人员添加了.header {font-weight：bold;},但是.header已经在其他模块中使用,在其中不应该是粗体.
>级联问题：Foo小部件有一个.header,但它还包含一个包含.header类的Bar小部件的列表.
>如果我们定义.foo .header {…}和.bar .header {…}在foo中未明确覆盖的任何内容都将显示在bar中.
>如果我们定义.foo> .header和.bar> .header但是后来需要修改foo来将头包裹在div中,我们的样式就会中断.
>继承问题,我们不断将小部件字体重新定义为11px / normal,因为某些顶部容器使用12px / 18px行高.
>与小部件库进行战斗,使用诸如dojo / dijit或jquery ui这样的库可以增加大量的样式来实现这一点,这意味着我们的代码散布在我们必须覆盖库样式以获得正确的东西的地方.有〜2000行的css只是为了调整内置的dijit风格
我们正在考虑实施以下规则：
命名空间所有新的小部件类 – 如果你有一个小部件foo所有的子类名称将是.foo_,所以我们得到：.foo,.foo_header,.foo_content,.foo_footer.这使得我们的CSS基本上是平坦的,但是我们看不到其他的方式来组织我们的代码,而不会遇到传统的样式或上面提到的级联问题.
警察通用样式 – 只有少数通用类只能在非常具体的情况下应用.例如.editable – 适用于应该调用编辑器的句子的部分 – 应该只包含文本节点.
利用css编译器mixins为了避免在不同的widget中重复定义相同的样式,定义和使用mixins.虽然我们担心混音也会失控.
我们怎么能从css混乱中转移,不断地将回归引向可维持的事情.
解决方法
我喜欢的例子：http://getbootstrap.com/components/(2015年加入)
您从这种方法获得的另一个专家是可重用性：您知道您所得到的,并且您知道您希望样式指南尽可能小 – 因此：重用.
更改已使用的样式时：检查样式指南.如果它不会改变它可能是好的(如果你刚刚改变了一些东西,包括框模型问题,或宽度,高度,填充,边距一般),你可能需要浏览一下.
How do you move from a legacy,mess of
css to cleaned up,nicely cascading,
DRY stylesheets?
使用样式指南作为单元测试.一旦你得到了重要的部分：减少,重构和组合(你可能会发现.campaign_1跨越和你的常规规则之间的一些联系,继承可以是你的朋友).
Conflicting styles: one developer adds
a .header { font-weight: bold;} but
.header was already used in other
modules and shouldn’t be bold in
those.
在回答Adriano Varoli Piazza的评论和上面的引用：我不记得这是一个完全属于CSS的问题,但更多的是HTML标记.不管你做什么,都会有一些沉重的事情.决定你想保留哪条规则,并采取行动清理少用的;例如：通过继承：#news a .header {…}或重命名HTML类a .stand_out_header {…}.
关于以下想法
Namespace all new widget classes – if
you have a widget foo all
sub-classnames will be .foo_ so we
get: .foo,
.foo_footer. This makes our css
essentially FLAT,but we see no other
way to organize our code going forward
without running into the legacy styles
or the cascading problems I mentioned
above.
使用包含的元素,这将更容易维护：
<div id="widget_email"> <h2>One type of h2</h2> </div> <div id="widget_twitter"> <h2>Another h2</h2> </div>
