Question

我正在更新网站以添加一些适合移动设备的网页。

目前我们有一个大的css页面，其中包含所有内容。我的想法是将所有特定于移动设备的css放入单独的文件中，然后链接两个工作表。移动css将覆盖默认css中的任何内容（更大的按钮等）。

我对css很新，最佳做法是什么？

Answer 1

一个大型CSS文件可以减少HTTP请求，从而提高性能。

几个较小的文件使组织更容易，这将使开发和维护更便宜，更容易。

Answer 2

我有一些样式表适用于我曾经使用的任何重要应用。

base.css - 始终应用。
print.css - 这会隐藏菜单和屏幕的其他部分，不适合打印页面。由media属性触发。 <link rel="stylesheet" type="text/css" media="print" href="print.css" />
ie6.css - 应用第二个，当且仅当它是IE6时。我希望有一天能把它扔掉。
＆lt; clientname＆gt; .css - 每个客户希望网站拥有徽标/等的样式表。

如果我试图快速表现，我会把它们结合起来。但是，我知道每天获得数亿次点击的网站都不会打扰，所以我强烈建议拆分它们但是对你来说很有意义，以便更容易维护。

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

Answer 3

是的，你应该使用多个css文件，而不是使用一个大文件。它可以帮助您在维护您的站点时在不同的css中使用不同的定义（classe或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>

Answer 4

对于特定客户的样式，我会说最好将它们分开。

Answer 5

可以轻松地为不同的媒体使用单独的样式表。

<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>

Answer 6

我也会使用两个。在编辑每个设备（计算机和移动设备）时保持更加整洁。我有一个巨大的CSS样式表，我在css浏览器选择器脚本的帮助下用于所有浏览器，我讨厌滚动6000多行CSS，所以我想说至少从经验中最好的方法是分开他们出去了！

Answer 7

有意义地对CSS进行分组并仔细提供。

例如，如果您有通过网站应用的CSS（例如CSS重置），请将其设置为单独的文件并将其包含在每个页面中。

然后，对于站点的每个逻辑组件，创建单独的CSS文件，并在属于相应逻辑组件的页面上提供它。（假设您的网站上有博客和民意调查，如果博客从不需要CSS进行民意调查，则不需要将其包含在博客中。）但请记住，这对小型网站来说并不实用。

按照使用它们的媒体对CSS进行分组。如果您有用于打印的样式表，请将其与基本表格分开（如果有意义的话，请不要使用单独的文件，如果您只有单个CSS属性进行打印，因为它不值得请求时间）。

请记住，更多工作表会承担更多HTTP请求，每个请求都会花费一定的时间。

因此，没有明确的方法可以处理这些事情，这是为了让您的CSS更容易维护，并且客户端可以轻松下载（减少HTTP请求，减小尺寸等）。

Answer 8

我会使用多个样式表来保持更好的组织，然后在将它们放到网站上之前将它们压缩成一个文件，以提高性能。

Answer 9

你应该拥有一系列用于各种任务的CSS表格，否则事情会变得很乱！

Answer 10

我认为最好使用1代表样式，1代表ie6代表ie7。而已。组织应该在style.css中自动进行。使用逻辑类名和注释。

较少的httprequests是好的。减少标记是好的。：）

Answer 11

我自己更喜欢两种样式表。第一个，也是我的HTML中首先出现的那个，是一个重置样式表。第一个样式表的实现可以帮助网页在不同的浏览器中更加一致地显示。

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

我应该使用多个CSS表吗？

11 个答案: