Question

我有一个index.html页面和一个style.css文件。

我有一个名为.slider的样式类和一个名为.logo的样式类。我应该将.slider和.logo都放在style.css页面中，还是应该将.slider放在index.html和.logo里面.css？

我问这个是因为我不知道我是否应该只将样式与一个页面相关联在一个全局的style.css中，或者我应该将它内联在它适用的页面中？

Answer 1

通常，您嵌入了特定于页面的css。这是我如何做我的CSS：

全局css（单独的文件）：

<link type="text/css" rel="stylesheet" href="css/style.css" media="all" />

注意：在今天的网络世界中，我们使用大量的插件/主题，这些插件/主题往往会推出更新的版本，所以当你覆盖这些插件/主题时，请确保你创建特定于该主题的css文件。

例如，

Bootstrap 3.1

<link href="/css/bootstrap.3.1.css" rel="stylesheet" type="text/css">

为所有引导程序覆盖创建此项，以便在出现时使用最新版本。

<link href="/css/bootstrap.overrides.css" rel="stylesheet" type="text/css">

页面特定的CSS（嵌入式）：

<head>
<!-- last element in head //-->
<style type="text/css">
        .pageSpecific
        {
         color: red;
        }

    </style>
</head>

当我处于开发阶段或html元素不需要css分类时。

简单样式格式（内联）：

<th style="min-width: 65px;">Column Header</th>

您也可以打印特定的CSS ：

  <link href="/css/print.css" rel="stylesheet" type="text/css">

并在此文件中包装您的css：

@media print{
<!-- print specific css here//-->
}

请记住，您可能希望在以后可能看起来特定于页面时使用css分类。始终为可重用性编码！

<强>最后：

当我将文件投入生产时，我喜欢使用css minifier。我使用UglyJs对我的javascript文件执行相同的操作。你也可以使用LESS css，但现在我会坚持这些简单的约定或类似的东西。

Answer 2

样式可以在三个地方之一进行。

我建议将其放在html的<style>中的<head>标记中，或者将其放在单独的文件中，或者也可以正常工作。显然，将样式放在单独的文件中意味着如果需要，您可以在另一个页面上重用这些样式。

Answer 3

无论哪种方式，它都不会有所作为。就个人而言，我喜欢将所有CSS放在一个地方，但你可以随心所欲。如果您确实将所有CSS放在一个文档中，请使用注释将其分成组，这样一切都很容易找到。

Answer 4

你永远不应该有内联或页面CSS。它应该全部放在样式表中（每个媒体类型应该只有一个） - 为什么？因为样式表是缓存的，并且缓存比HTML文件更好地保存它（它们也可以通过各种方式缓存，但是使用动态内容，它们通常比CSS更频繁地加载）。

其次，更新和更改是一场噩梦，如果不是所有内容都在一个文件中。