对 BEM 感到困惑：如何用 BEM 处理 body 元素？答案

【问题标题】：Confused with BEM: How to address body element with BEM?对 BEM 感到困惑：如何用 BEM 处理 body 元素？
【发布时间】：2017-11-13 05:29:39
【问题描述】：

在我最近的项目中，我有这样的 scss 文件：

CSS

body {
  background: url('https://...jpg') bottom center no-repeat;
  background-size: cover;
  min-height: 100vh;

  h2 {
    font-family: 'Work Sans', sans-serif;
    font-weight: 700;
    margin-bottom: 24px;
  }
  [rest of code]
}

现在我正在尝试重写为 BEM。我想解决全身元素。也许这违反了 BEM 原则，我不应该这样做？

【问题讨论】：

您可以随时向 body 元素添加一个类。
@mpen 所以这样做没有错： ?
不确定。我不使用 BEM。我会说，如果你想为身体设计风格，请继续为身体设计风格；不需要上课。我认为 BEM 主要是一种让您避免与类名发生命名冲突并保持井井有条的方法，这并不是要阻止您对想要设置样式的元素进行样式设置。
@mpen 是对的，但我们通常将page 类添加到body 元素以使其与其他选择器保持一致。

标签： html css sass bem

【解决方案1】：

<body class="body"></body> 很好。

实际上，BEM 中的body 标签通常使用"page" 类。所以你会有<body class="page"></body>。

这听起来更好，因为通常在身体内部我们有<header class="header page__header"></header>、<main class="content page__content"></main> 和<footer class="footer page__footer"></footer>。

【讨论】：

感谢您的澄清！