将 CSS 中的样式添加到 HTML 5 的语义元素中是否正确？答案

【问题标题】：Is it right to add style in css to semantic elements of HTML 5?将 CSS 中的样式添加到 HTML 5 的语义元素中是否正确？
【发布时间】：2017-05-26 11:17:23
【问题描述】：

向 html 5 语义（导航、页眉、页脚等）添加样式是否正确，就像我们将它们添加到 div 一样？要使用它们而不是常规 div？

有一次我从一个我尊敬的人那里听到，我们不应该为 html 5 语义元素添加任何样式 - 仅在确实有必要时添加一些样式，但不要给这些元素添加太多样式。他说的对吗？

例如

<nav>
    <ul>
        ................
    <ul>
</nav>



nav {
    background-color: .....
    width: ....
    height: ......
    margin: .....
    color: ......
    padding: ......
}

而不是

<nav>
    <div id="nav">
        <ul>
            ................
        <ul>
    </div>
</nav>



#nav {
    background-color: .....
    width: ....
    height: ......
    margin: .....
    color: ......
    padding: ......
}

我们应该怎样做才对？对此进行编码的正确方法是什么？什么是完美的处理方式？

【问题讨论】：

标签： css html styles

【解决方案1】：

将结构/内容（您的 html 代码）与您的风格分开的想法正是为您提供了这种能力，并实际上推动您朝这个方向发展。

该结构使多个设备能够更好地理解您的内容，从而为您的用户提供更好的体验。例如 - 如果您只为您的菜单使用 ul > li 结构，则某些不是常规浏览器的设备将无法完全理解这是您网站的菜单，而使用 nav > ul > li 可以完全理解。

样式仅告诉设备应如何显示它们 - 您应该使用它来为您的用户提供更好的体验。

语义元素帮助我们分离页面的结构，例如：

【讨论】：

【解决方案2】：

嗯，HTML5 语义（导航、页眉、页脚等）的创建是为了帮助我们为网页的各个部分提供有意义和自我描述的名称。他们应该是独一无二的。

因此，在引入这些语义之前，部分是这样完成的：

<div id="main-section">
  your content
</div>
<div id="sidebar">
  your sidebar content
</div>

HTML5 语义本应使我们免于上述情况，同时也是描述性的。

样式被添加到上面类似的部分，我不明白为什么我们现在不能这样做。确实没有任何规则反对向 HTML5 语义添加样式，但首先要确保 HTML5 语义用于唯一元素。

【讨论】：

【解决方案3】：

我同意。避免向语义元素添加样式。这是因为当我们谈论事物的“外观”时，这些元素并没有增加任何新内容。

请记住，您要避免冗余。如果您需要一个块元素，您正在考虑“外观”，因此使用 div 和样式。然后立即在该 div 中，如果您愿意，可以添加您的语义元素。将语义元素尽可能地隐藏在您的 CSS 中，甚至从您的选择器中，无论是在 css 中还是在 javascript 中。但是，添加一个标记这些语义元素的自定义类有助于清晰。所以，而不是：

div > * h1,

你会这样写：

div > .semanticElement h1.

这应该更清楚，同时避免引用语义元素。

如果上述某些原因不清楚，请这样想。一个元素的语义发生了变化，现在突然我也不得不在css和javascript中进行更改，这很荒谬。

【讨论】：