组织大型网站的CSS

Int*_*ogy 5 html css

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

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

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

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

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

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

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

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

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

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

感谢您的输入

Cha*_*ung 3

就像任何其他类型的代码一样,如果您到处复制 CSS 代码,那么您就是在自找麻烦。随着时间的推移,维护对您来说会变得越来越困难。

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

对于 CSS,您需要记住的另一点是,您在页面上创建和引用的每个 .css 文件都是 HTTP 请求。如果每个页面和控件都有自己的 CSS 文件,那么您会因为每个页面请求的总请求下载时间而陷入困境,从而损害用户在网站上的体验。这也使得浏览器缓存 .css 文件的可能性降低,因为缓存的空间有限,因此如果您继续用越来越多的 .css 文件填充它,它们将会更快地从缓存中转储。是的,您可以在处理程序中以编程方式组合 .css 文件,这样您的页面每页只发出一个请求,但是您会产生额外的服务器开销,并且缓存问题仍然存在(除非您对站点上的所有 .css 文件有一个请求) ,无论如何,这都违背了你在这里尝试做的事情的目的)。