组织大型网站的CSS

Question

我有一个更一般的设计问题与CSS和网站有关。我知道尽可能规范化代码并避免重复是很好的计算机科学。因此，对我来说，至少在理论上，组织一个网站的样式表时会这样做。

因此，当我开始使用我最近的网站时，我开始采用这种相同的理念。它工作正常，我的前几页，虽然我只在Firefox测试...虽然我发现这个理念很快就崩溃了，但是随着我的网站的增长和我添加页面，多个布局（和浏览器）。最终，随着时间的推移我已经搬到了以下方法：

1. 我有我的站点中的每个母版页布局非常有限的顶级css文件，它包含了跨布局众所周知的样式，以及CSS类为主页面。

2. 我为每个页面保留特定的css样式。

3. 我一直为嵌入页面元素的特定CSS样式/控制

我结束了走这条路，这样我可以相信，在一个页面上的变化会不小心打破其他页面的网站产生的在很多回归bug中。

其他人在接近这个时做了什么？这是一个好还是坏的方法......我确实看到了这种方法的弊端，有些页面非常相似，所以做出重大改变意味着改变更多的CSS代码，我也觉得每天都会超过这个。

其他开发人员对这种理念有什么看法？好？坏？只是好奇真的...

对我来说，其中我的理想之间的差异（我试图保持非常紧密的代码），以及在一个页面上改变要求打破20个其他页面的挫折，因为我改变了一个div的宽度几个像素（例如扰乱另一页上的浮动）。

感谢您的输入

Answer 1

就像任何其他类型的代码，如果你是所有的地方复制你的CSS代码，你是在自找麻烦。随着时间的推移，维护将变得越来越困难。

不影响其他页面的页面更改不会有问题的最佳方式是有一个可以驱动您的UI布局和设计的样式指南。如果您的风格指南定义了用于给定设计元素的HTML和CSS类，那么它们将始终在所有页面上显示相同。如果需要更改特定页面的元素，请将HTML更改为使用不同的类，然后为该类创建新的CSS（并将其添加到样式指南中以供重用）。风格指南还允许您确保HTML在所有在该网站上工作的开发人员是统一的，这意味着在进行更多开发时，更改CSS的可能性更小，从而导致问题。

您需要用CSS记住的另一点是，您在页面上创建和引用的每个.css文件都是HTTP请求。如果每个页面和控件都有其自己的CSS文件，那么您通过让每个页面请求的总请求下载时间陷入困境，真的会伤害用户在网站上的体验。它也使得它的浏览器不太可能缓存。css文件，因为缓存的空间有限，所以如果你继续填充越来越多的.css文件，它们将会更快地从缓存中转储。是的，您可以在处理程序中以编程方式组合.css文件，以便您的页面只在每个页面上发出一个请求，但是这样会产生额外的服务器开销并且仍然存在缓存问题（除非您的站点上的所有.css文件都有一个请求，这无论如何都会破坏你在这里试图做的目的）。