Question

是否有任何关于如何为大型网站设置，创建和存储CSS的常见模式？

我尝试了很多不同的东西，我自己想出来的。

我已尝试将所有布局（位置，大小等）放在1个文件中，而所有装饰（颜色，背景等）放在另一个文件中，这样我就可以轻松换出样式而不影响布局。当每个元素在多个文件中设置样式时，这变得非常繁琐。

我尝试过一个主要的CSS文件，然后任何具有不同规则的页面都会为这些规则获取自己的CSS文件。这最终导致其他页面具有相同的“唯一”规则，并且总是以重复的CSS结束（每个页面都有自己的CSS文件，定义应该是共享样式），这使得维护更加困难。

每本CSS书籍，教程或我读过的任何内容都解释了CSS在单个页面或小型站点的上下文中的作用以及如何使用它。我对此有很好的理解，但我从未见过如何制定计划来设计一个有很多不一致的大型网站的讨论。

我可以遵循一种模式/惯例吗？

Answer 1

你应该始终牢记性能。拥有一个大文件是最佳的，因为它只加载一次并且可以随后进行高速缓存，从而允许加载其他外部资源，从而大大减少了页面加载时间的开销。显然它会产生一个大文件，但通过评论和缩进，你应该能够以合理的方式将事物组合在一起。

或者，您可以在DEV环境中将它们分开，并考虑在部署之前将它们全部合并到一个文件中的构建机制。这真的是两全其美。

我见过的单独CSS文件的唯一真正需求是主题，可访问性和介质的不同样式（打印，页面等...）。

Answer 2

看看大型网站，例如Flickr，Facebook，Twitter或类似的东西。最好的（就速度而言）是使用一个css文件来存储所有内容就不同站点的不同规则而言，还有可能设计“模块化” - 如

.redFontColor {
  color: #F00;
}

.smallFont {
  font-family: "Courier New", "Times New Roman", serif;
  font-size: .7em;
}

.alignedLeft {
  text-align: left;
}

并在HTML中使用它

<div class="alignedLeft">
  This will be <span class="smallFont redFont">small and red</span> - but this text will just be <span class="redFont">red</span>
</div>

有很多网站都是这样的; - ）。

Answer 3

你应该始终牢记：

Answer 4

我通常做的是：

我为容器制作一个CSS文件，例如以及各个样式的另一个文件（div，img，链接等）。

使用容器我的意思是，你的网站的大纲，你的网站内容，例如文本就可以了。

我的意思是风格，或者列表继续。

我希望这对你有所帮助，用一本非常好的手册来编辑我的帖子。（一旦找到它）。

PS。这本书是免费的。

Answer 5

我们最近实现了一些名为“CSS编译”的东西，这就像方法所回答的那样。我们的编译（由PHP后端完成）为每个模块生成单个编译的css文件，因此在运行时加载单个CSS文件。这使我们可以自由地定义尽可能多的CSS文件而不用担心性能。为此，我们在项目的配置文件中定义了一个包含module-CSS文件关系的数组$moduleCssrelation（模块，例如login，home等，以及为每个模块加载的CSS文件）。最后描述更多细节，因为这是样式架构的核心。

这是我们使用的基本CSS计划： -

详细研究了所有模块中注意到样式图案/可重复使用的组件并看到了它
- 每个模块都需要标题部分，页脚部分和左侧菜单
- 有许多模块在中心有一些列表的表格显示部分（保留公共页眉，页脚和左侧菜单），并且有许多模块显示一些项目详细信息，如用户详细信息页面，类详细信息页面。 / LI>
我们将所有样式都放在由设计师团队提供给我们的单个文件中。然后，我们根据上一步中研究的样式模式将单个CSS文件分段为多个片段。因此，我们创建了一些文件，如 -
common.css 包含页眉，页脚，左侧菜单样式
listings.css 包含仅出现在列表页面中的组件的所有样式定义。
details.css 就像thedom所提到的那样，如果你有一个.detailsRedHeading类，只有在细节页面的情况下才需要它，在这里定义它。
任何额外的样式 - 假设许多模块需要带有样式的弹出窗口，然后将这些样式放在popups.css内，而不是在common.css或任何其他文件中定义这些样式。记住我们必须定义尽可能多的css文件的自由。

以方便以后更改主题
我从来没有应用过你的想法“我已经尝试将所有布局（位置，大小等）放在1个文件中，而所有装饰（颜色，背景等）在另一个”，但如果它对你有帮助，你可以添加这个架构。将common.css分为common_layout.css，common_design.css，其他人也一样。

此外，请确保您第一次执行最大可能的样式重用。避免使用这样的样式声明： -

.listingsBody
{
  font-family:Trebuchet MS,Liberation Sans,DejaVu Sans,sans-serif;
  font-size: 12px;
  .. 
  some listing page styles
  ..
}

.detailsBody
{
  font-family:Trebuchet MS,Liberation Sans,DejaVu Sans,sans-serif;
  font-size: 12px;
  .. 
  some details page styles
  ..
}

取而代之的是： -

.siteMediumFont
{
  font-family:Trebuchet MS,Liberation Sans,DejaVu Sans,sans-serif;
  font-size: 12px;
}

.detailsBody
{
  .. 
  some details page styles
  ..
}

.listingsBody
{
  .. 
  some listing page styles
  ..
}

我见过许多设计师这样做。在更复杂的情况下，这种习惯可能会使事情变得困难。

有关汇编的详细信息： -

完成CSS更改后，我们运行编译代码，执行以下操作： -

$moduleCssrelation = array("class_details"=> array("details","popups"));

遍历数组$moduleCssrelation并根据每个模块的css文件名的内容创建一个编译文件。例如如果class_details模块需要文件details.css，popups.css，那么它会创建一个文件common-details-popups.css，该文件也将加载class_details以及任何其他需要的模块这两个css文件。

造型大型网站的常见模式

5 个答案: