当开始一个新的网站项目时，人们可以预见到的只有那么多的全球CSS。 （更新：在开发过程中你也可以选择很多东西。）
随着项目的进行，我们都在HTML中添加了许多特定于页面的class和ID选择器，用于样式和布局与外部CSS文件。 （我在这里定义“特定于页面的CSS”有点不同 - 我并不是<style>中的<head>，但是，例如，我通常会给每页的body唯一ID。）
p，img，figure，
figcaption，section，article，div等padding，margins，font属性，widths，
heights等等。问题是 - 一旦项目完成，并且创建了一个大的CSS文件 - 最好的方法是返回并减少/删除不必要的东西？我的意思是，通过组合CSS规则尽可能地全球化和全能（不破坏任何东西）。
P.S。在HTML5中，我尽量避免将类或ID设置为元素，除非必须这样做。我相信一般规则可以很好地工作（当然，大多数情况下）。
答案 0 :(得分：6)
你应该阅读Johnathan Snook的书Scalable and Modular CSS，以获得处理这个问题的一些见解。不使用元素类是您的特权，但它是我们编写可维护CSS的最强大的工具之一。 Harry Roberts' "Big CSS"演示文稿还为所谓的“面向对象”的CSS提供了一些强大的见解和工具。所以，我的第一点建议是开始使用标记中的类。
我理解想要编写语义html的问题，这可能是你回避使用类的原因 - 但是html元素上的类不会减损语义，只要你聪明地编写它们。事实上，他们通常（总是，真的）提供有关元素的更多信息。
困难的部分是编写 语义的类，它描述元素的功能而不是表示。 Yahoo's Design Pattern Library是获取语义类名称示例的好地方，也是Web架构中许多有用设计模式的重要资源。
作为简短的tl;博士：
组织CSS时，请使用级联。建立 首先重置，然后是全局样式 - 这些是通用的 布局样式直接应用于元素选择器。接下来，写 你的模块 - 这些是你的课程，他们应该是 元件无关。
避免使用标签选择器限定您的课程。为了 为维护你的人提供文件和指导 网站，您应该使用“准合格选择器”而不是
例如，而不是：
div.carousel { /* style information here */ }
代替写：
/* div */ .carousel { /* style information here */ }
使用此技术，您可以提供有关您的文档 期望您的组件被使用，而不是实际限定它们 并提高了特异性（从而破坏了它们的模块性）。
除此之外，请记住：平衡你的特异性。 架构良好的CSS就坐落在将军的尖端 具体。您需要使用类才能使CSS模块化 并且可以重复使用，但你也需要避免臃肿。
答案 1 :(得分：2)
在大型代码库中，您必须拥有选择器和/或样式重复。尽量找到尽可能多的人。
有很多方法可以做到这一点，但您可能希望找到适合您的平台（或Web工具）的工具，它将扫描您的CSS以进行选择器和样式复制。那里有很多，但为了让你开始，this SO answer提出了许多建议，包括Dust-Me和CodeBeautifier。
这可能需要一些调查，特别是如果没有关于给定元素是什么的指示，但尝试找到模式。您是否定义了六个不同的导航列表，它们大致相同的样式（display: inline-block，float: left，边距，填充等）？即使它们中的一些具有不同的左边距，您仍然可以设置要覆盖的异常值的默认边距，并且具有＆＃34;导航＆＃34;设置这些默认值的类。
对于简单效果（颜色，边距等），您可以将它们组合在选择器列表（a, span, p {}）中。有关更多的文本效果，请参阅下面的OOCSS部分。
这不仅适用于单个项目，也适用于页面。如果您发现拥有具有特定于页面的样式，请查看它们之间是否存在模式。因此，除了#page-2之类的内容之外，您还可以拥有更像#theme-wide或其他更具模块性和描述性的内容，并允许您整合代码。
CSS的一部分优点是你可以设置通用的东西，然后使用特异性覆盖它们。然而，很容易陷入特异性战争并最终导致英里长选择器和!important的大量使用，特别是如果您有任何第三方代码具有任何类型的基本样式。因此，当#page-2 div.navigation ul.nav li a或.navigation a足够时，请确保您没有做#page-2 .navigation a之类的愚蠢行为。
Andy Clarke有an awesome explanation来确定CSS的特异性，并比较两个选择器，如果你不能很好地掌握它的工作原理。
我不是面向对象CSS的大力倡导者（我所看到的往往会忽略CSS类和诸如此类的东西，而且当涉及到CSS时，我有点纯粹主义者有语义HTML），但它确实有一些好的想法，可以帮助使事情更加模块化。例如，我有一个特殊的复杂效果（涉及几个选择器块和伪元素的复杂效果），我想在任何类型的容器上使用。我不太关心容器是什么。因此，我创建了一个具有有意义名称的类，它或多或少是自包含的，然后我可以依赖于我想要的任何元素，而CSS则负责其余的。
如果仔细考虑并明智地使用，你可以模块化一些更复杂的样式，而不会过多地使用可疑语义类来使你的HTML过多。
IE黑客是丑陋的，荒谬的（除非阅读文件的人记住它们），并且可能会在浏览器中造成意外的副作用。除非您 在主样式表中保留某些内容的原因，否则将它们放在自己的样式表中并使用条件注释可能是个好主意。虽然条件注释在技术上是非标准代码，但 是故意的，并且用于调整Internet Explorer（以及技术上，非IE浏览器）。他们不会很快去任何地方，所以不要害怕使用它们。
这样做也避免了必须设置其他浏览器识别的样式，只是稍后使用某种版本的IE无法识别的语法取消设置，反之亦然。是的，这会给IE用户带来更多的开销，但是IE9及其后的用户可能不得不下载任何额外的样式表，所以除非你的流量可以与谷歌或Facebook相媲美，而且大部分来自IE6拨号连接上的7或7（即 - 对于选定版本的IE的额外呼叫的成本大于每个浏览器的额外CSS的成本和维护成本），一个额外的呼叫可能可以忽略不计。< / p>
他们说，一盎司的预防值得一磅治疗，在这种情况下，特别是，他们是正确的。虽然你当然无法预见一切，但从一开始你就可以做些事情，从长远来看，让你的生活变得更轻松。请记住，无论是像CSS这样的前端代码还是像Java这样的业务逻辑代码，一些可怜的傻瓜都不得不维护它并且可能不会很好地了解代码（即使那个可怜的傻瓜是你，一年或两个在路上）。因此，查看整个生命周期通常是一个好主意，以确保您不会错过重要的基础改进，避免代价高昂的大规模重构。
对于未来的项目来说，利用像SASS或LESS这样的东西可能是一个好主意，这可能会因为多种原因而使大型CSS更容易维护。其中一个重要原因是它允许您嵌套样式，而不是
nav {}
nav li {}
nav li a {}
你得到了
nav {
li {
a {}
}
}
这将自然地将事情分组。此外，您可以在开发过程中将重置样式等内容分离到自己的文件中，然后在将所有内容推送到生产环境之前将其合并和缩小。您还可以创建基本样式（颜色主题，标准装订线宽度等）并将它们存储在整个CSS代码中使用的变量中，以便将值存储在一个位置，从而使维护更容易。
有没有一个合理的原因，你有这么多页面特定的样式开始？如果您在同一网站上（相同的品牌推广等），它通常被认为是保持一致外观的最佳做法。逐页更改边距，填充，字体等可以从该一致性中删除。用户可能不会确切地知道 与有什么不同，但是他们会知道某些内容已经出现，并且因为这个原因会更少考虑您的网站，即使他们无法查明它。
您没有使用重置/规范化机制吗？如果没有，那可能会对它产生影响，因为您发现CSS主要处理浏览器之间的不一致。将所有（或至少某些元素）设置为一个共同的，理智的，可以构建的起点通常是好的。无论你是通过*{margin:0; padding: 0;}调用还是使用一些选择性的东西，比如Normalize.css，或者介于两者之间的东西，比如Eric Meyer的CSS重置，最终取决于你。但是，使用某些东西可以为不同的元素提供一致的起点将大大有助于保持无关的CSS（在这种情况下，可以补偿基本样式之间的细微差别，例如， Chrome和Firefox）。
上述问题可以帮助您确定某些维护成本的根本原因，并可能帮助您从长远来看减少它们。