4

当开始一个新的网站项目时，只有这么多的全局 CSS 可以预见使用。（更新：在开发过程中你也只能学习这么多东西。）

随着项目的进行，我们都在 HTML 中添加了许多特定于页面的class选择器，用于使用外部 CSS 文件ID进行样式和布局。（我在这里定义的“特定于页面的 CSS”有点不同——我不是说在内部，但是，例如，我通常给每个页面一个唯一的 ID。）<style><head>body

  • 总的来说，需要针对特定​​页面进行更改的最常见的 HTML 元素位于以下元素上：p, img, figure, figcaption, section, article,div等。
  • 页面特定的更改最常使用以下 CSS 属性：padding、margins、font属性、widths、 heights等。

问题是——一旦项目完成并创建了一个大的 CSS 文件——返回并减少/删除不必要的内容的最佳方法是什么？我的意思是，通过将 CSS 规则组合成尽可能全局和包罗万象（不破坏任何东西）。

PS 在 HTML5 中，我尽量避免将类或 ID 设置为元素，除非我必须这样做。我相信一般规则可以很好地发挥作用（当然，在大多数情况下）。

4

2 回答 2

6

您应该阅读 Johnathan Snook 的Scalable and Modular CSS一书，了解处理这个问题的一些见解。不对元素使用类是您的特权，但它是我们编写可维护 CSS 的最强大工具之一。Harry Roberts 的“Big CSS”演示文稿还为所谓的“面向对象”css 提供了一些强大的洞察力和工具。所以，我的第一个建议是开始在你的标记中使用类。

我理解想要编写语义 html 的担忧，这可能是你回避使用类的原因 - 但是 html 元素上的类不会减损语义，只要你聪明地编写它们。事实上，它们通常（总是，真的）提供有关元素的更多信息。

困难的部分是编写语义类，描述元素的功能而不是表示。雅虎的设计模式库是获取语义类名称示例的好地方，也是 Web 架构中许多有用的设计模式的重要资源。

作为一个简短的tl;博士：

  1. 在组织 CSS 时，使用级联对您有利。首先设置您的重置，然后是全局样式 - 这些是直接应用于元素选择器的通用布局样式。接下来，编写你的模块——这些是你的类，它们应该与元素无关。

  2. 避免使用标签选择器限定你的类。为了为维护您网站的其他人提供文档和指导，您应该改用“准合格选择器”

    例如，而不是：

    div.carousel { /* style information here */ }

    而是写：

    /* div */ .carousel { /* style information here */ }

    使用这种技术，您可以提供有关您希望如何使用组件的文档，而无需实际限定它们并提高特异性（从而破坏它们的模块化）。

  3. 除此之外，请记住这一点：平衡你的特异性。架构良好的 CSS 位于通用和特定的风口浪尖。你需要使用类来使你的 CSS 模块化和可重用，但你也需要避免臃肿。

于 2012-11-26T18:51:52.183 回答
2

寻找重复的样式

在大型代码库中，您必然会有选择器和/或样式重复。尝试尽可能多地找到。

有很多方法可以做到这一点，但您可能希望为您的平台（或 Web 工具）找到一个工具，该工具将扫描您的 CSS 以查找选择器和样式重复。那里有很多，但为了让你开始，这个 SO 答案有很多建议，包括 Dust-Me 和 CodeBeautifier。

在重复中寻找模式

这可能需要一些调查，特别是如果没有迹象表明给定元素是什么，但尝试找到模式。您是否定义了六个不同的导航列表，它们都具有大致相同的样式（display: inline-block、、float: left边距、填充等）？即使其中一些具有不同的左边距，您仍然可以为异常值设置默认边距以覆盖，并具有设置这些默认值的“导航”类。

对于简单的效果（颜色、边距等），您可以将它们组合到选择器列表 ( a, span, p {}) 中。有关更复杂的效果，请参阅下面的 OOCSS 部分。

这不仅适用于单个项目，也适用于页面。如果您发现必须具有特定于页面的样式，请查看它们之间是否存在模式。#page-2因此，您可以拥有更像或其他更模块化和描述性的东西，而不是像在您的身体上那样#theme-wide的东西，并允许您整合代码。

确保您正在利用 Cascade

CSS 的部分优点在于您可以设置通用的东西并在以后使用特异性覆盖它们。但是，很容易陷入特殊性之战，并最终导致一英里长的选择器和大量使用 . !important，尤其是当您有任何具有任何基本样式的第三方代码时。因此，请确保您没有做愚蠢的事情，例如#page-2 div.navigation ul.nav li a何时.navigation a或#page-2 .navigation a足够。

Andy Clarke 对找出 CSS 特异性和比较两个选择器有一个很棒的解释，如果你没有很好地理解它是如何工作的。

加入一些 OOCSS 原则

我不是面向对象 CSS 的大力倡导者（我所看到的往往在 CSS 类和诸如此类的东西上过火，而且在拥有语义 HTML 时我有点纯粹主义者），但它确实有一些好主意，可以帮助使事情更加模块化。例如，我想在任何类型的容器上使用一个特别复杂的效果（复杂之处在于涉及多个选择器块和伪元素）。我真的不在乎容器是什么。因此，我创建了一个具有有意义名称的类，它或多或少是自包含的，然后我可以坚持任何我想要的元素，其余的由 CSS 处理。

如果仔细考虑并明智地使用，您可以模块化一些更复杂的样式，而不会在 HTML 中过多地使用有问题的语义类。

将特定于 IE 的样式移动到单独的样式表中，而不是在主工作表中使用 hack

IE hack 丑陋、荒谬（除非阅读文件的人已经记住了它们），并且可能会在浏览器中造成意想不到的副作用。除非有理由必须在主样式表中保留某些内容，否则将它们放在自己的样式表中并使用条件注释可能是个好主意。虽然条件注释在技术上是非标准代码，但它是故意存在的，目的是为了调整 Internet Explorer（以及技术上的非 IE 浏览器）。他们不会很快去任何地方，所以不要害怕使用它们。

这样做还避免了必须设置其他浏览器识别的样式，只是稍后使用某个版本的 IE 无法识别的语法取消设置，反之亦然。是的，它给 IE 用户带来了更多的开销，但是 IE9 和更高版本的用户可能不需要下载任何额外的样式表，所以除非你的流量与谷歌或 Facebook 相媲美，而且大部分来自 IE6 或 7在拨号连接上（即，选择 IE 版本的额外调用成本大于每个浏览器的额外 CSS 成本和您的维护成本），一个额外的调用可能可以忽略不计。

为未来...

他们说一盎司的预防胜过一磅的治疗，尤其是在这种情况下，他们是对的。虽然您当然无法预见一切，但从长远来看，您可以从一开始就做一些事情来让您的生活更轻松。请记住，无论是 CSS 之类的前端代码还是 Java 之类的业务逻辑代码，一些可怜的傻瓜都必须维护它，并且可能不太了解代码（即使那个可怜的傻瓜是你，一两年后路）。因此，查看整个生命周期通常是一个好主意，以确保您不会错过重要的基础改进，这些改进可以从一开始就避免代价高昂的大规模重构。

使用 CSS 预处理器

对于您未来的项目来说，利用 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）。

上述问题可以帮助您确定一些维护成本的根本原因，并可能帮助您从长远来看减少它们。

于 2012-11-26T18:49:16.360 回答