组织大型网站的CSS

时间:2010-12-13 18:30:13

标签: html css

我有一个与css和网站相关的更一般的设计问题。我知道尽可能规范化代码并避免重复是很好的计算机科学。所以它对我来说是理所当然的,至少从理论上说,在为网站组织样式表时会做同样的事情。

所以当我在最近的网站上开始时,我开始使用同样的理念。它在我的前几页工作正常,而我只在firefox中测试......

然而,随着我网站的增长和我添加页面,多个布局(和浏览器),我发现这种理念很快就崩溃了。最终,随着时间的推移,我采用了以下方法:

  1. 我的网站中每个母版页布局都有一个非常有限的顶级css文件,它包含该布局中众所周知的样式的类以及母版页的css。

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

  3. 我为可嵌入的页面元素/控件保留了特定的CSS样式

  4. 我最终选择了这条路线,以便我可以相信,一个页面上的更改不会意外破坏网站中的其他页面,从而导致大量的回归错误。

    其他人接近这个时会做些什么?这是一个好/坏的方法......我确实看到了这种方法的缺点,一些页面非常相似所以做出重大改变意味着改变更多的CSS代码,我也觉得专业人士每天都超过这个。

    其他开发者对这一理念有何看法?好?坏?只是很好奇...

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

    感谢您的输入

1 个答案:

答案 0 :(得分:3)

就像任何其他类型的代码一样,如果您在整个地方复制CSS代码,那么您就会遇到麻烦。随着时间的推移,维护将变得越来越难。

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

您需要记住的另一点是,您在页面上创建和引用的每个.css文件都是HTTP请求。如果每个页面和控件都有自己的CSS文件,那么通过减少每个页面请求的总请求下载时间,您实际上会损害用户在网站上的体验。它还使浏览器不太可能缓存.css文件,因为缓存的空间有限,所以如果你继续用越来越多的.css文件填充它们,它们将更快地从缓存中转储。是的,你可以在处理程序中以编程方式组合.css文件,这样你的页面每页只能发出一个请求,但是你有额外的服务器开销,缓存问题仍然存在(除非你对你网站上的所有.css文件都有一个请求) ,无论如何都违背了你想要做的目的。)