cas*_*son 10 css legacy refactoring web-applications
在处理了几个大型Web应用程序,并看到没有清晰结构的巨大样式表之后,我真的很想知道人们是否已经找到了保持css清理大型复杂Web应用程序的方法.
你如何从遗留的,混乱的CSS转移到清理,漂亮的级联,DRY样式表？
我目前正在开发的应用程序有12000行css.它早在没有标准或评论css的情况下就有机地增长到这个尺寸,唯一的规则就是让应用程序与设计相匹配.我们经常遇到的一些问题:
冲突的样式:一个开发人员添加.header {font-weight:bold;}但是.header已经在其他模块中使用,并且不应该是那些粗体.
级联问题:Foo小部件有一个.header但它还包含一个带有.header类的Bar小部件列表.
继承问题,我们不断将小部件字体重新定义为11px/normal,因为一些顶级容器使用12px/18 px行高.
使用诸如dojo/dijit或jquery ui之类的库来对抗小部件库,这些库可以添加大量样式以实现功能,这意味着我们的代码充斥着我们必须覆盖库样式以使事物看起来恰到好处的地方.有大约2000行css只是为了调整内置dijit样式
我们正在考虑实施以下规则:
命名空间所有新的窗口小部件类 - 如果你有一个窗口小部件foo,所有的子类名将是.foo_,所以我们得到:.foo,.foo_header,.foo_content,.foo_footer.这使得我们的CSS基本上是FLAT,但我们看不到其他方法来组织我们的代码,而不会遇到上面提到的遗留样式或级联问题.
警察通用样式 - 有一小部分通用类,只适用于非常特殊的情况.例如.editable - 适用于应该调用编辑器的句子部分 - 应该只包含文本节点.
利用css编译器mixins要避免在不同的小部件中重复定义相同的样式,请定义并使用mixins.虽然我们担心mixins也会失控.
我们还能如何摆脱不断将回归引入可持续发展的css混乱.
che*_*rtz 11
我们使用简单HTML页面形式的样式指南,其中包含样式表中每个 CSS规则的示例.很容易判断您是否添加了一个新的,不兼容的规则,因为示例是相互对齐的.
我喜欢的一个例子:http://getbootstrap.com/components/(2015年新增)
你从这个方法得到的另一个专业是可重用性:你知道你得到了什么,你知道你希望样式指南尽可能小 - 因此:重用.
当您对已使用的样式进行更改时:请检查样式指南.如果它没有改变它可能是好的(你可能需要浏览一下,如果你刚刚改变了一些东西,包括盒子模型问题,或宽度,高度,填充,边缘一般).
你如何从遗留的,混乱的CSS转移到清理,漂亮的级联,DRY样式表？
使用样式指南作为单元测试.一旦你掌握了必要的部分:减少,重构和结合(你很可能会发现.campaign_1 span你和常规规则之间的一些碰撞,继承可能是你的朋友).
冲突的样式:一个开发人员添加.header {font-weight:bold;}但是.header已经在其他模块中使用,并且不应该是那些粗体.
回答Adriano Varoli Piazza的评论和上面的引用:我不记得这是一个完全属于CSS的问题,但更多的是HTML标记.无论你做什么,都会有些繁重.决定你要保留哪条规则,并采取措施清理较少使用的规则; 例如:via inheritance:#news a .header { ... }或重命名HTML-class a .stand_out_header { ... }.
关于以下想法
命名空间所有新的窗口小部件类 - 如果你有一个窗口小部件foo,所有的子类名将是.foo_,所以我们得到:.foo,.foo_header,.foo_content,.foo_footer.这使得我们的CSS基本上是FLAT,但我们看不到其他方法来组织我们的代码,而不会遇到上面提到的遗留样式或级联问题.
使用包含元素,这将更容易维护:
<div id="widget_email">
<h2>One type of h2</h2>
</div>
<div id="widget_twitter">
<h2>Another h2</h2>
</div>