如何在 BEM 中使用伪类？

Question

如何在遵循BEM 方法的同时有效地使用伪类？

我的具体示例如下 - 我需要创建一个具有自定义外观的复选框功能。 为此，我通常会使用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 的主要原因之一（如果不是最重要的）是具有块，您几乎可以将其放置在前端中的任何位置，而无需担心类层次结构或任何类型的样式（取决于类嵌套）。

因此，当您在块中表达某种元素行为时，例如使用某种复选框技巧

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

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

其原因是：只要您可以在代码中的任何位置移动“自定义复选框”块，而无需任何行为或渲染更改，您仍然遵守 BEM 原则。

此外，任何阅读您代码的人都可以立即理解您将根据custom-checkbox块中输入元素的状态对box-label 元素进行元素操作。

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

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

你已准备好出发。