css - 标记作为列包装器

Question

假设我有一个带有标题的网站，它下面有两列(一列作为文章的包装，另一列作为侧边栏)。现在，我可以使用 main 吗？作为这些文章的包装:

<main>
    (articles here)
</main>
<aside class="sidebar">
    (sidebar here)
</aside>

或者我应该包装这个 <main>与 <div> ？

<div id="left-column">
    <main>
        (articles here)
    </main>
</div>
<aside class="sidebar">
    (sidebar here)
</aside>

一般来说:我们是否可以将语义标签也用于 CSS 的样式/显示目的(通常是 div 元素的域)？

Answer 1

你不应该仅仅因为你需要 CSS 钩子(Hook)就添加那些语义元素，但是如果你对这些元素的使用是合适的，那么使用它们是非常好的，也是一个很好的做法也作为 CSS 的钩子(Hook)。

如果您出于样式原因需要比现有元素更多的元素，请添加 span/div 元素(因为它们是唯一的“非语义”/meaningless 元素).

在您想要设置样式的每个语义元素周围添加 span/div 会使您的标记膨胀，并使其更难理解/维护。不过，对于 HTML5 引入的元素(如 main)，这样做可能有一个原因:如果您需要在不支持这些新元素的旧浏览器中实现某种样式。