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

Question

在我的项目中，我已将所有css类放在样式表中。

我所遵循的结构是

拥有一个global.css文件，该文件将包含所有全局样式。 然后为每个.aspx页面提供一个特定于该文件的样式表。

虽然我在谈论asp.net，但我认为这对任何其他网络开发环境都没有任何影响。

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

感谢。

相关问题

What's the best way to organize CSS Rules

Answer 1

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

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

Answer 2

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

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

Answer 3

两件事：

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

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

Answer 4

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

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

Answer 5

我会推荐一个用于屏幕的全局样式表和一个用于print css的全局样式表 - 保持这些单独的总是一个好主意。它还取决于您的网站上是否使用了各种设计，即如果您的网站布局有各种各样的布局，那么每种设计的样式表都是合适的。一个例子是前端设计和管理区域的设计。我还建议使用母版页来简化构建。

Answer 6

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

严格地说，不是你问题的答案，但是当你决定如何处理新项目中的CSS等时，请记住这一点。

Answer 7

这实际上取决于项目的需求，以及您在未来保持CSS的计划。我在一个大型项目上工作，我并不总是能够在模板中更改HTML，所以我需要对CSS进行非常精细的控制。

我使用单个全局样式表，以及定义基本布局区域的模板级样式表 - 列，可重复使用的部分等。最后，我将应用仅适用于部分的页面特定表那个页面特有的。

这样做的主要好处是，由于所有内容都向下级联，我可以在全局和模板级工作表中定义我的大多数样式，但仍然可以在页面级别覆盖单个规则。从本质上讲，我可以对CSS进行子类化，只改变我需要更改的部分。这样，我也不必处理吨和吨的独特名称。两个页面可能都有#left-column区域，但实现方式不同。把它想象成CSS多态。

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

通常情况下，我发现如果所有CSS都存储在一个文件中（在一个大型项目中），它会迅速变得难以管理。

Answer 8

由于您在问题中提到了ASP.NET，我会回应其他用户的建议来查看主题。我的网站中的每个ASP.NET主题都有一组“.css”文件。我在功能上将我的CSS选择器划分为文件;例如，我为：

创建单独的.css文件

• 顶级页面布局样式（几乎专门用于我的母版页）
• 内置HTML元素的样式（p，a，h1-h6等）
• 自定义块级样式（对于div）
• 自定义内联样式（用于跨度）
• 表格样式

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

Answer 9

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

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

Progressive Enhancement With CSS - A List Apart
我鼓励所有Web开发人员阅读本文。

Answer 10

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