CSS 在头上添加一个 id答案

【问题标题】：CSS in head over adding an idCSS 在头上添加一个 id
【发布时间】：2017-07-18 17:35:42
【问题描述】：

我正在开发具有 100 个页面的响应式网站。它是使用 CMS 实现的。问题是，我只需要为主页应用一些样式。

在 CMS 中为一个页面添加类或 id 有点麻烦，因为它使用模板来呈现页面。

我在 head 部分添加了 css。我不想添加外部文件的原因是因为可能在其他页面上使用了相同的 id。

在这种情况下，在 head 部分添加 CSS 是一种不好的做法。

<head>
    <style>
        //my css
    </style>
</head>
<body>


</body>

谢谢

【问题讨论】：

你说的是内联 CSS吗？一个内联的<style> 标签应该放在头部。在其他的任何地方都包含它是不好的做法。
我已经加在了头部
不一定。您可以在主页上的容器或正文中添加 class="home" 并在您的 css 存储库中为 .home.classname 构建自定义样式。这样，除了为主页添加自定义类时，您可以使用所有相同的样式。
我不认为在您的特定情况下这是不好的做法。在外部文件中包含 CSS 的重点是可维护性。能够修改该文件并使其结果反映在整个站点中。在您的情况下，该 CSS 特定于主页，因此只需与其余样式分开更改，因此主页头标签可能是它的最佳位置。并不是说没有任何仍然使用外部 CSS 文件。你只是真的不需要它。
这是什么内容管理系统？可能有一种直接的方法可以在标记上添加一个类以在 CSS 中识别它。

标签： html css head

【解决方案1】：

总之，是的。出于可维护性的原因。最好使用 css 的级联特性来定位特定页面的特定样式，而不是使用大量内联样式。

例如，考虑：

<body class="my-page">
<h1 id="myId">Title</h1>


<body>
<h1 id="myId">Title</h1>

h1#myId{ font-size:12px; }
body.my-page h1#myId{ font-size:14px; }

后一种风格优先。 h1#myId 将是全局的，但在特定页面上，您可以覆盖此样式。有没有办法弄清楚使用的是什么模板，并调整body类？

【讨论】：

这是最难的部分。此外，由于很多人在同一个网站上工作，我不能确定有人没有使用相同的类/ID 或将来会使用

【解决方案2】：

如果您的 CMS 使用 PHP...
您可以检测您是否在 homepage 中，然后调用您的自定义外部样式表，例如：

<?php
$page = $_SERVER["REQUEST_URI"];
$isHomePage = $page==="/" || $page==="/index.php" || $page==="";

if( $isHomePage ) {
   echo '<link href="homepage.css" rel="stylesheet" type="text/css" />';
} else {
   echo '<link href="style.css" rel="stylesheet" type="text/css" />';
}
?>

</head>

【讨论】：

【解决方案3】：

拥有内联 CSS 非常好。您应该使用内联 CSS 还是简单地为页面设置唯一 ID，取决于您使用的 CMS 的复杂性和灵活性。使用内联 CMS 只是意味着您必须从每个单独的页面更新 CSS，而不是从所有单独页面的单一来源更新。

至于您的第二点，在 <style> 标签的头部添加 CSS 是不错的做法。事实上，<style>必须成为<head> 的子级才能正确验证。根据the HTML 5.2 specification，<style> 可以是任何元素的子元素，只要它是scoped，尽管目前，Firefox 是可以使用scoped 属性的the only browser。

除此之外，由于页面的加载方式，在<body> 中使用<style> 标记可能会导致flash of unstyled content。因此，如果您使用内联 CSS，请始终在头脑中这样做，以正确验证并改善用户体验 :)

希望这会有所帮助！

【讨论】：