html - 如何在 BEM 中使用伪类？

Question

我如何有效地使用伪类，同时遵循 BEM methodology ？

我的具体示例如下 - 我需要创建一个具有自定义外观的复选框功能。为此，我通常会使用 input:checked + label 选择器。我正在尝试将其转换为 BEM，但我能做的最好的是:

CSS:

/*.custom-checkbox 
{
}*/

.custom-checkbox__input
{
    display: none;
}

.custom-checkbox__input:checked ~ .custom-checkbox__box-label
{   
    background-image: url("../../images/pro/check.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}

.custom-checkbox__box-label
{
    width: 1.4rem;
    height: 1.4rem;
    position: relative;
    top: 0.2rem;
    
    display: inline-block;
    background: white;
    border: 0px solid;
    border-radius: 0.2em;
}

.custom-checkbox__box-label:hover,
.custom-checkbox__txt-label:hover
{
    cursor: pointer;
}

HTML:

   <li class="custom-checkbox">
     <input class="custom-checkbox__input" type="checkbox" id="distinctcat_cb1" checked>
     <label class="custom-checkbox__box-label" for="distinctcat_cb1"></label>
     <label class="custom-checkbox__txt-label" for="distinctcat_cb1">Categories</label>
   </li>

由于兄弟选择器 (~)，这与 BEM 相矛盾。另外，我不确定一般情况下 BEM 的伪类(:checked、:hover)，它们是否被允许？是否允许使用伪元素 (:first)？由于某些原因，我能找到的任何 BEM 指南中都没有提到它们。

使用 BEM 制作自定义复选框的最佳做法是什么？

Answer 1

创建 BEM 的主要原因之一，如果不是最重要的话，就是要有 block ，您可以将它们几乎放在前端的任何地方，而不必担心类层次结构或任何类型的样式取决于类嵌套。

因此，当您在一个 block 中表达某种元素行为时，例如使用某种复选框 hack

.custom-checkbox__input:checked ~ .custom-checkbox__box-label

这不仅是实现该行为的唯一方式，而且也在 BEM 约定的范围内。

这样做的原因是:只要您可以在代码中的任何地方移动您的“自定义复选框” block ，而无需任何行为或渲染更改，您仍然遵守 BEM 原则。

此外，任何阅读您的代码的人都可以立即了解您要根据 input 元素 中的状态对 box-label 元素 进行元素操作自定义复选框 block 。

你的代码是可读的，它表达了 block => 元素结构。

BEM 规则说你不应该嵌套类，即不根据类关系做出行为并不适用于你的情况，因为你没有在两个嵌套类实体之间创建关系。

一切顺利。