如何重构CSS？

可能重复：

我打算用一致的风格和连贯的CSS方案来构建我的网站。但随着我对单个页面（尤其是主搜索表单）进行微调，样式已经失去了控制

我已经经历过一次分解样式和几乎从头开始重建的过程，现在看来是时候再次这样做了。我怎样才能有效地处理这件事？我在寻找一种方法论，而不是一种软件实用程序（尽管我对那里的建议持开放态度…除非它们需要花钱…）

补充说明：我使用的是CSS框架，很难保持

填充

和

边距

的协调

增加了注2:对这篇文章的最初回应是关于CSS的最佳实践。让我们假设我已经尝试遵循最佳实践（事实上，我做到了）。现在我要找的是清理程序

增加了注3:截至6月14日，将（我刚刚发现的）与我下面的帖子结合起来可能是一个全面的答案

结束说明：

我知道我的问题太笼统了，所以我希望我没有把它贴出来。（也许这就是为什么它投了反对票……我永远不知道为什么不发表评论来解释原因。）另一方面，我得到了我所需要的，所以我很高兴我发布了它

我很惊讶我的答案没有获得赞成票——即使有其他人的宝贵意见，我认为它仍然站得住脚

从我的观点来看，我的接受程度很大程度上取决于答案的可用性——遗憾的是，我无法消化一些更令人兴奋和全面的回答

作为精确副本关闭

---

我只是试着再贴一次（主题、主体、标签），看看这是否会给“如何管理CSS爆炸”的帖子带来建议。有趣的是，事实并非如此。我在那篇文章中添加了重构标签。

我要做的第一件事是根据目的分离CSS。可能首先是一般页面布局（div、box等），然后是样式（字体、H1/H2/../Hn标题），然后是一些更专业的CSS（用于表格、表单和站点特定组件的CSS）

这种分离有助于组织变革；如果您必须更改或添加字体，您会在样式部分找到它。 如果必须更改页面布局，则会出现相同的情况，以此类推

当你有“单独的页面”时，事情往往会变得混乱；他们的布局如此不同吗？ 您可能必须尽可能地抽象页面的公共功能（例如，主内容容器框）。 然后再考虑专门化更多的布局（1列、2列）等等。

---

如果你有程序员背景，只要想想类和继承，这个概念-是的，我知道这是一个完全不同的领域…-但是，这个概念在设计css时很有用。

基于当前这一轮的工作，以下是我目前得到的：

规划

有一个系统来处理HTML和CSS中的标记。许多IDE直接支持这一点，或者使用全局搜索功能就可以了。除了标记问题，您还需要注意优先级，甚至是功能区域（但要保持简单，不要成为负担）

不要开始修改你的代码。首先使用您的待办事项系统进行计划

把你的总体目标列一个简明的清单。

• 考虑整体的三段论变化，例如颜色或字体方案
• 回顾CSS的最佳实践。确定您的方法无效的领域，或者可以更一致地应用好方法的领域。示例：
  • 合并课程
  • 避免随意使用内嵌样式
  • 删除未使用、冗余或冲突的样式
  • 提高总体一致性；应用一组约定
  • 改进度量单位
  • 使用反映内容而不是格式的类和id名称
• 决定您希望支持多少浏览器市场，以及在多大程度上接受或依赖最新标准
• 决定是否有你想要采用的新方法。示例：
  • 使用重置样式表标准化浏览器显示
  • CSS框架的使用
  • 使用专门的库，例如帮助处理表单
  • 动态CSS（我最近按照建议使用PHP来处理CSS，这样我就可以动态控制我的配色方案。但我回到了纯CSS，因为我喜欢在IDE中呈现CSS代码，而混合方法把它搞砸了。）

回顾你的目标清单，决定现在应该追求哪一个。如有可能，任何大规模变更都应视为单独的变更。如果您的列布局混乱，那么现在不是学习CSS如何优雅地取代javascript的时候。最佳实践、风格变化等也是如此

如果您已将CSS文件配置为速度（例如，压缩的封装外形或单个文件中的所有CSS），请进行更改。将代码分解为可人工管理的格式。稍后，当您完成时，尝试基准测试，看看更清晰的版本是否对于生产使用也足够有效

将您的CSS提交到。注意您要修复的任何违规行为

在HTML中查找内嵌样式的实例（搜索

style

属性）。请注意任何应移动到样式表的内容

作品

跟随你的待办事项经理。做一些常识性的备份。在运行过程中，在多个浏览器上测试您的工作

如果您喜欢正则表达式，请注意：对于重写CSS，正则表达式通常是无效或不安全的。（不像HTML那样危险，但仍然如此）。将CSS更改发送到HTML中时，正则表达式可能会很有用，但还是要小心

如果您对边距和

@margin {10px}
@padding {10px}

.mySelector{
    margin: @margin;
    padding: @padding;
}

element,
otherlement
{
  margin:10px;
}

h1 {
  margin: 10px;
}
.product485 h1,
.product484 h1
{
  margin: 5px;
}
.contact h1 {
  margin: 15px;
}