html - 为大型网站组织CSS

标签 html css

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

因此,当我开始创建我最近的网站时,我是从同样的理念开始的。它在我的前几页上工作正常,而我只在 firefox 中测试......

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

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

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

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

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

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

其他开发人员如何看待这一理念?好的?坏的?真的很好奇...

对我来说,这是一种情况,我权衡了我的理想(我尽量保持非常紧凑的代码)与更改一页上的需求而破坏其他 20 页的挫败感,因为我将 div 宽度更改了几个像素(例如打乱另一个页面上的 float )。

感谢您的参与

最佳答案

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

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

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

关于html - 为大型网站组织CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4432198/

相关文章:

javascript - 如何将 `scroll` 条添加到 `div` ,当它的高度为 `auto`

css - 不显示背景图像

css - 黑线穿过盒子

css - 悬停属性声明困惑

html - 让用户发送 HTML 电子邮件而不会冒被标记为垃圾邮件的风险

javascript - 无法弄清楚如何使用类名 cboxPhoto 获取特定 img 的 src(完整路径)

html - 隐藏的溢出不适用于 body 上的移动设备

html - 在 span 中对之前的字体大小进行动画处理并保持 span 文本的位置

html - 将输入和按钮对齐在一条线上

html - 引导网格系统不工作