如何在 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 規則說你不應該嵌套類，即不使行為依賴於類關系不適用於你的情況，因為你沒有在兩個嵌套的類實體之間創建關系。

你已准備好出發。