OO CSS - используйте только класс для стайлинга

Question

Я сейчас практикую ОО CSS, но у меня возникла проблема.

<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

Если я захочу стилизовать эти 3 <li> элементы по отдельности, я сделаю:

li:nth-of-type(1) {}
li:nth-of-type(2) {}
li:nth-of-type(3) {}

Но согласно OO CSS мы должны использовать класс для стилизации элементов, например:

<ul>
    <li class="li-1">a</li>
    <li class="li-2">b</li>
    <li class="li-3">c</li>
</ul>

.li-1 {}
.li-2 {}
.li-3 {}

Теперь все в порядке, но что если у меня есть 10 <li>, мне нужно добавить 10 классов, которые выглядят глупо меня.

Какой стиль я должен использовать? Могу ли я использовать те, которые отличаются от классов, для стилизации элементов на основе OO CSS?

Answer 1

Ну, технически я думаю, что они имеют в виду, что вы должны использовать классы вместо html идентификаторов элементов.

Так, возможно, сделать что-то вроде:

<ul>
   <li class="li">a</li>
   <li class="li">b</li>
   <li class="li">b</li>
</ul>

И затем просто используйте ваши оригинальные стили, такие как:

.li:nth-of-type(1) {}
.li:nth-of-type(2) {}
.li:nth-of-type(3) {}

В вашем случае вы в основном используете классы, как если бы вы использовали идентификатор. Классы должны идентифицировать несколько элементов.