您如何为 Web 项目构建 css 文件？答案

【问题标题】：How do you structure css files for a web project?您如何为 Web 项目构建 css 文件？
【发布时间】：2010-09-30 06:56:47
【问题描述】：

在我的项目中，我将所有的 CSS 类都放在了样式表中。

我所遵循的结构是

有一个 global.css 文件，其中包含所有全局样式。然后为每个 .aspx 页面提供一个样式表，该样式表将专门用于该文件。

虽然我说的是 asp.net，但我想这对任何其他 Web 开发环境应该没有任何区别。

这种构造css文件的方式好吗？其他人如何安排他们的 css 文件，为什么？

谢谢。

【问题讨论】：

标签： asp.net css

【解决方案1】：

每个 .aspx 页面的 css 文件似乎违背了它的目的，即可重用性等。我想如果从风格的角度来看，每个页面真的那么独特，也许这是必要的，但我会努力摆脱它格式。

我通常有一个主 css 文件，然后可能是我网站其他主要部分的附加文件（例如私人管理部分等）

【讨论】：

是的，绝对是最好的选择。

【解决方案2】：

我将为每个母版页创建一个纯文件结构的 CSS 文件，因为每个母版页通常与网站的特定部分相关。有些甚至只有一个。

如果有非常特殊的需要，我只会添加额外的 CSS 文件。如果单个页面包含该页面所需的元素。我通常将它们添加到嵌入该页面的样式块中。避免需要额外的 HTTP 请求。

【讨论】：

感谢您指出相关问题。我正在寻找结构，但我认为组织是关键。
没问题，我只是在一分钟前偶然发现了那个。

【解决方案3】：

两件事：

首先，您需要一个项目的 CSS 文件。 CSS 的全部意义在于允许您在整个站点中创建 UI 标准化，并将这些 UI 规范与页面本身分离。例如，您可以通过这种方式更改整个站点中“警告”（或其他）标签的字体。如果您正在考虑调整特定页面，您的第一个冲动应该是避免这种诱惑并坚持现有的样式（按 ID 或类）。如果您必须创建一个新样式，我仍然会将它放在通用 CSS 文件中 - 只需给它一个唯一的名称。很可能，您稍后会在另一个文件中找到它的用途。请注意，这不会影响性能；事实上，单个文件提高性能，因为它只下载一次然后缓存。每个页面单独的 CSS 文件会导致更多的下载和臃肿的配置文件。

其次，如果您在 ASP.NET 中工作，请花时间研究“主题”。例如，这将允许您为一个整体网站外观（例如“蓝色”主题）创建一个 CSS 类，然后将整个外观换成另一种（例如“绿色”主题）。它还使您能够以我认为您会喜欢的方式组织您的 CSS 和它们所引用的图像（您可以提供多个备用 CSS 文件和图像目录来自定义您的网站的外观）。

【讨论】：

什么是简洁的工具？谢谢。
整洁的工具和 asp.net 在同一个地方...？

【解决方案4】：

对于每个布局，我使用一个 css 文件。

如果子页面有一些独特的布局或没有其他页面的子部分，我会检查 CSS 声明是否足够大以影响主 CSS 文件的大小。如果是这样，我将其分隔到另一个文件中并仅将其包含在该页面上。

【讨论】：

【解决方案5】：

我会推荐一个用于屏幕的全局样式表和一个用于打印 css 的全局样式表 - 将它们分开总是一个好主意。这还取决于您的网站上是否使用了多种设计，即如果您的网站有广泛不同的布局，那么每个设计的样式表都是合适的。一个例子是前端设计和管理区域的设计。我还建议查看使用母版页来简化构建。

【讨论】：

【解决方案6】：

我想向Yahoo Exceptional Performance web site 大声疾呼，其中包含一大堆关于前端工程问题的好建议，这些问题会对页面加载时间产生巨大影响。它讨论了诸如减少每个视图的 HTTP 请求、CSS 和 JavaScript 的有效加载、最大化可缓存性等问题。

严格来说，不能回答您的问题，但当您决定如何在新项目中处理 CSS 等时，请牢记这一点。

【讨论】：

【解决方案7】：

这实际上取决于项目的需求，以及您在未来维护 CSS 的计划。我在一个大型项目中工作，我并不总是有机会更改模板中的 HTML，因此我需要对 CSS 进行非常细粒度的控制。

我使用一个全局样式表和一个定义基本布局区域的模板级样式表 - 列、可重用部分等。最后，我将应用一个仅适用于这些部分的页面特定表该页面特有的。

这样做的主要好处是，由于所有内容都是向下级联的，因此我可以在全局和模板级别的表单中定义我的大部分样式，但仍然能够在页面级别覆盖单个规则。本质上，我可以对我的 CSS 进行子类化，只更改我需要更改的部分。这样，我也不必处理大量独特的名称。两个页面可能都有一个#left-column 区域，但实现方式不同。将其视为 CSS 多态性。

这种方法的缺点是它确实迫使我维护相当数量的样式表。但是通过适当的文档和命名约定，它运行得非常好。

通常，我发现如果所有 CSS 都存储在一个文件中（在一个大型项目中），它会膨胀并很快变得难以管理。

【讨论】：

【解决方案8】：

由于您在问题中提到了 ASP.NET，我会回应另一位用户的建议以查看主题。我的站点中的每个 ASP.NET 主题都有一组“.css”文件。我在功能上将我的 CSS 选择器划分为文件；例如，我为以下内容创建单独的 .css 文件：

顶级页面布局样式（几乎只在我的母版页中使用）
内置 HTML 元素的样式（p、a、h1-h6 等）
自定义块级样式（用于 div）
自定义内联样式（用于跨度）
表格样式

我还将为网站使用的每个第三方组件或控件创建一个单独的 .css 文件。

【讨论】：

【解决方案9】：

这可能无法回答您的问题 - 但它确实是一篇涉及样式表组织的方便文章。特别是，它提到了一些针对不同平台的样式表。

一般来说，我有一个用于布局和设计的全局样式表，然后如果绝对需要，可以单独使用样式表。我想不出每页都需要一个 css 文件的用例。

Progressive Enhancement With CSS - A List Apart
不过，我鼓励所有 Web 开发人员阅读这篇文章。

【讨论】：

【解决方案10】：

我们使用适用于整个网站的单个样式表和适用于某些页面的附加样式表。例如，在我们的一些页面上我们有网格，所以我们有一个 grids.css。有时不需要时将所有这些 css 添加到单个样式表中是没有意义的。

【讨论】：