代码之家 › 专栏 › 技术社区 › Robert MouzmiSadiq

我应该使用多个CSS工作表吗?

css

Robert MouzmiSadiq · 技术社区 · 16 年前

我正在更新一个网站以添加一些移动友好页面。

现在我们有一个大的CSS页面,里面有所有东西。我的想法是把所有特定于移动的CSS放到一个单独的文件中,然后链接两个工作表。移动CSS将覆盖默认CSS(更大的按钮等)中的任何内容。

我对CSS很陌生,最佳实践是什么?

11 回复 | 直到 16 年前

Salil 16 年前

是的,您应该使用多个CSS文件,而不是使用一个大文件。它可以帮助您在维护站点的同时,在不同的CSS中使用不同的定义(类或ID名称),否则它将采用稍后声明的定义。例如

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
   <html>
     <head>
        <link href="/stylesheets/stylesheet.css" media="screen" rel="stylesheet" type="text/css" />
        <link href="/stylesheets/lightbox_new.css" media="screen" rel="stylesheet" type="text/css" />
        <link href="/stylesheets/another_css.css" media="screen" rel="stylesheet" type="text/css" />
      </head>

      <body>
         <!-- Your content here -->
      </body>
  </html>

AaronSieb 16 年前

一个大的CSS文件可以减少HTTP请求,这可以提高性能。

几个较小的文件可以使组织更简单,从而使开发和维护更便宜、更容易。

Dean J 16 年前

我有一些样式表,适用于我开发过的任何重要应用程序。

base.css-始终应用。
print.css-这将隐藏菜单和屏幕的其他部分,这些部分对于打印页面来说并不太好。由触发 media 属性。 <link rel="stylesheet" type="text/css" media="print" href="print.css" />
ie6.css-第二次应用,如果并且仅当它是ie6。我希望有一天能把它扔掉。
<clientname>.css-希望网站具有其徽标的每个客户端都有一个样式表/etc。

如果我想尝试快速的表现,我会把它们结合起来。但是,我知道网站每天获得数亿点击量并不麻烦,所以我强烈建议将其拆分,但这对您来说是有意义的,以便更容易维护。

在大多数情况下,额外的硬件比额外的开发时间和/或更多的错误更便宜。可维护性通常是我的最高目标。

Mitchel Sellers 16 年前

对于特定客户的样式,我认为将它们分开是一种最佳实践。

Tor Valamo 16 年前

对不同的媒体使用不同的样式表很容易。

<link href="browser.css" media="screen" rel="stylesheet" type="text/css" />
<link href="mobile.css" media="handheld" rel="stylesheet" type="text/css" />
<link href="print.css" media="print" rel="stylesheet" type="text/css" />

在这种情况下,当媒体类型与设备匹配时,将下载并应用所有样式。

但是,还有另一种方法,如果你的应用是为手机设计的,那就很好了,因为只有当媒体类型匹配时,它才会下载样式表。

<style type="text/css" media="screen">
  @import "screen.css"; /* Note that some (older?) browsers don't support @import, so you may have to download this sheet the traditional way even on mobiles */
</style>
<style type="text/css" media="handheld">
  @import "mobile.css";
</style>
<style type="text/css" media="print">
  @import "print.css";
</style>

Kyle 16 年前

我也会用两个。在编辑每个设备(计算机和移动设备)时,保持事物更整洁。我有一个巨大的CSS样式表,在CSS浏览器选择器脚本的帮助下,我可以为所有浏览器使用,我讨厌滚动浏览6000多行的CSS,所以我想说,最好的方法至少是从经验中分离出来!

Davor Lucic 16 年前

有意义地将您的CSS分组,并小心地提供。

例如,如果您有通过您的站点应用的CSS(例如,CSS重置),请将其作为单独的文件,并将其包含在每个页面中。

然后,为站点的每个逻辑组件创建单独的CSS文件,并将其服务于属于各自逻辑组件的页面。(假设你的网站上有一个博客和民意测验,如果博客从不需要CSS来进行民意测验,你就不需要将其包含在博客中。)但请记住,这对于小型网站来说并不实际。

按所使用的媒体对CSS进行分组。如果您有用于打印的样式表,请在有意义时将其与基本工作表分开(如果您只有一个用于打印的CSS属性,则不要使用单独的文件,因为它不值得请求时间)。

请记住,更多的工作表假设有更多的HTTP请求,每个请求都需要一定的时间。

所以没有明确的方式来处理这些事情,这一切都是为了让您的CSS更容易维护和客户机更容易下载(更少的HTTP请求,更小的大小等)。

GSto 16 年前

我将使用多个样式表来更好地组织事情,然后将它们压缩到一个文件中,然后再将它们放到网站上,以提高性能。

user346173 16 年前

对于各种任务,您应该有一系列CSS工作表,否则事情会很快变得混乱!

no1cobla 16 年前

我认为最好用1代表风格,1代表IE6,1代表IE7。再也没有了。在style.css中组织应该是自动的。使用逻辑类名和注释。

更少的http请求是好的。加价越少越好。:)

Shadeclan 16 年前

我自己喜欢两种样式的床单。第一个是重置样式表,在我的HTML中总是第一个。第一个样式表的实现有助于网页在不同浏览器中更一致地显示。

通常,不需要创建多个附加样式表。通常,特定于IE的CSS命令会被Firefox和其他兼容的浏览器忽略,反之亦然。真正的问题是,当一个页面上的一个项目必须在多个浏览器中定位和调整到完全相同的大小时——此时,需要两个以上的工作表,尽管有时可以通过工作表中的正确排序获得良好的结果。