如何在 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 原则。

此外，任何人阅读你的代码，可以立即明白，你会在上一个元素操纵箱标签元素取决于状态输入元素的内定制复选框块。

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

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

你已准备好出发。