[SOLVED] OOCSS - only use class to do styling

OOCSS - only use class to do styling

I am practicing OOCSS now but I meet a problem.

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

If I want to style these 3 <li> items separately I will do:

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

But according to OOCSS we should use class to style the elements, like:

<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 {}

Now seems OK but what if I have 10 <li> I have to add 10 classes which looks dumb to me.

Which style should I use? Can I use those that other than classes to style the elements, based on OOCSS?

Solution

Well, technically I think what they are referring to is that you should use classes instead of html element identifiers.

So perhaps doing something like:

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

And then just use your original styles like:

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

In your case you're basically using classes as you would use an id. Classes are supposed to identify multiple elements.