在开发了几个大型 Web 应用程序并看到没有清晰结构的巨大样式表之后，我真的很想知道人们是否找到了方法来保持大型复杂 Web 应用程序的 CSS 干净。
如何从遗留的、混乱的 CSS 转向干净的、漂亮的级联、DRY 样式表？
我目前正在开发的应用程序有 12000 行 css。由于早期没有标准或 CSS 审查，它就有机地发展到了这个规模，唯一的规则是使应用程序与设计相匹配。我们经常遇到的一些问题：
样式冲突：一位开发人员添加了 .header { font-weight: bold;} 但 .header 已在其他模块中使用，因此不应在这些模块中使用粗体。
-
级联问题：Foo 小部件有一个 .header，但它还包含带有 .header 类的 Bar 小部件列表。
- 如果我们定义 .foo .header { ... } 和 .bar .header { ... } 任何未在 foo 中显式覆盖的内容都会显示在 bar 中。
- 如果我们定义 .foo > .header 和 .bar > .header 但后来需要修改 foo 以将 header 包装在 div 中，我们的样式就会中断。
继承问题，我们不断地将小部件字体重新定义为11px/正常，因为某些顶部容器使用12px/18px行高。
与小部件库作斗争，使用 dojo/dijit 或 jquery ui 之类的库添加大量样式以使其发挥作用，这意味着我们的代码中充满了必须覆盖库样式才能使内容看起来恰到好处的地方。大约有 2000 行 css 只是为了调整内置的 dijit 样式
我们现在正在考虑实施以下规则：
命名空间所有新的小部件类- 如果你有一个小部件 foo，所有子类名都将是 .foo_ 所以我们得到：.foo、.foo_header、.foo_content、.foo_footer。这使得我们的 CSS 本质上是扁平的，但是我们没有看到其他方法可以在不遇到遗留样式或我上面提到的级联问题的情况下组织我们的代码。
警察通用款式- 有一小部分通用类仅适用于非常特定的情况。例如.editable - 适用于应调用编辑器的句子部分 - 应仅包含文本节点。
利用 css 编译器 mixins为了避免在不同的小部件中重复定义相同的样式，请定义和使用 mixins。尽管我们担心 mixins 也会失控。
我们还能如何从不断引入回归的 CSS 混乱中转向可维护的东西。
我们使用简单 HTML 页面形式的样式指南，其中包含以下示例every样式表中的 CSS 规则。由于示例是相互对齐的，因此很容易判断是否添加了新的、不兼容的规则。
我喜欢的一个例子：http://getbootstrap.com/components/ http://getbootstrap.com/components/（2015 年新增）
从这种方法中获得的另一个优点是可重用性：您知道自己得到了什么，并且知道您希望样式指南尽可能小 - 因此：重用性。
当您对已使用的样式进行更改时：检查样式指南。如果它没有改变，那可能很好（如果你刚刚改变了一些东西，包括盒子模型问题，或者一般的宽度、高度、填充、边距，你可能需要浏览一下）。
你如何摆脱遗留下来的混乱局面
css 清理，很好的级联，
干燥样式表？
使用样式指南作为单元测试。一旦你掌握了其中的基本部分：减少、重构和组合（你很可能会发现之间的一些冲突）.campaign_1 span和你的常规规则，继承可以是你的朋友）。
风格冲突：一位开发人员补充道
.header { font-weight: 粗体;} 但是
.header 已在其他中使用
模块，不应加粗
那些。
回复 Adriano Varoli Piazza 的评论和上面的引用： 我不记得这是一个完全属于 CSS 的问题，而更多地属于 HTML 标记。无论你做什么，都将是一些繁重的工作。决定您想要保留哪条规则，并采取行动清理较少使用的规则；例如：通过继承：#news a .header { ... }或重命名 HTML 类a .stand_out_header { ... }.
关于以下想法
命名空间所有新的小部件类 - 如果
你有一个小部件 foo all
子类名将是 .foo_ 所以我们
获取：.foo、.foo_header、.foo_content、
.foo_footer。这使得我们的CSS
基本上是平坦的，但我们没有看到其他
组织我们的代码的方式
不会遇到遗留样式
或者我提到的级联问题
多于。
使用包含元素代替，这将更容易维护：
<div id="widget_email">
<h2>One type of h2</h2>
</div>
<div id="widget_twitter">
<h2>Another h2</h2>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
