css - CSS 特殊性和在紧迫的截止日期后规范化您的样式表

Question

我刚刚完成了一个重量级的长销售页面，页面上有很多元素和不同的样式。CSS 的选择器最终变得过于具体，并且有许多圆角框、背景图像等。简而言之， CSS有点乱。（只能怪我自己！）

任何人都可以建议一种有条不紊地浏览此样式表的方法，以结合我的重复属性等吗？我怀疑是否有任何工具可以为我做到这一点，但我想知道其他人如何处理这种情况？

谢谢。

Answer 1

1. 如果可能，将 CSS 与其速记属性结合起来。
2. 利用唯一的 dom id 将样式应用于该元素的子元素。
3. 您可以在同一个元素上使用多个 CSS 类，例如 class="somestyle some-other-style"。使用它，您可以采用重复的 CSS 样式并将它们定义为一个。
4. 使用 * 选择器将样式应用于所有子项。
5. 如果它全部在一个大 CSS 文件中，请将代码拆分为样式与您网站上的页面相关的部分，即 /* MEMBERS PAGE */
6. 通过在线压缩器运行样式以减少代码大小。有些甚至会自动为您组合元素，从而进一步降低复杂性。

那应该让你开始。很难进一步添加，这实际上取决于您的 html 代码和结构的设置方式。如果你能提供一个想法，我们可以提供进一步的帮助。

Answer 2

事实上，有一些CSS 重构工具，在 SO 上被很好地介绍了。

不过，我不能保证它们，因为我总是手动重构。我的技术是将现有样式分为：

• 布局
• 排版
• 颜色（外观和感觉）
• 黑客

这通常是一个快速的复制和粘贴工作。从那里开始，相似性和冗余更加明显，因此组合和简化变得更加容易。

完成后，在页面顶部有一个目录可以让你的部分很容易找到，并且通常更容易搜索。