custom class vs specific selector for lists (CSS) - html

Question

I've been trying to write better CSS, I've seen some Harry Roberts conferences and read about the BEM methodology.So by now what I understand in general is that:
You should keep things modular and reusable
Make custom general classes and avoid nesting
Never use ID's (or almost never)
My question refers to the second one: in the case of a list, let's say I want to edit the color for both the normal and :hover state. Should I add a custom class to each <li> element or a custom class to the <ul> and refer to the <li> inside it?
Here is an example to better illustrate what I mean.
<h3>Custom class for ul</h3>
<ul class="list">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
<h3>Custom class for li</h3>
<ul>
<li class="list__element">One</li>
<li class="list__element">Two</li>
<li class="list__element">Three</li>
<li class="list__element">Four</li>
</ul>
<style type="text/css">
.list li {
color: black;
}
.list li:hover {
color: red;
}
.list__element {
color: black;
}
.list__element:hover {
color: red;
}
</style>

Answer 1

When you're using BEM, try applying classes to EVERY element. That way you are dealing with the same level of specificity across the board, and you won't have to deal with priority orders.
So to answer your question, having .list__element:hover is exactly what you want.
I provided a more elaborate example, to demonstrate modularization. Notice how I added a new module "utensils".
Hope this answers your question!
.kitchen {
&__utensils {
}
}
.utensils {
&__utensil {
&:hover {
}
}
}
// this gets compiled to
.kitchen
.kitchen__utensils
.utensils
.utensils__utensil
// that is exactly what you want because you are avoiding specificity. Which means you will never have to fight with your selectors, which means you will never have to use important tags.
<div class="kitchen">
<ul class="kitchen__utensils utensils">
<li class="utensils__utensil"></li>
<li class="utensils__utensil"></li>
<li class="utensils__utensil"></li>
<li class="utensils__utensil"></li>
</ul>
</div>