How can I effectively utilize pseudo-classes while adhering to the principles of BEM methodology?
I'm facing a specific challenge with creating a custom checkbox functionality. Normally, I would use the input:checked + label selector. However, when trying to apply BEM to this, the best I could come up with is:
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>
This approach contradicts BEM because it uses the sibling selector (~). Additionally, there is uncertainty about using pseudo-classes like :checked and :hover in conjunction with BEM. Are they permitted or not? What about pseudo-elements like :first? Interestingly, they are not addressed in any BEM guides I have encountered.
What is considered the best practice for implementing a custom checkbox using BEM?