Question

A colleague just added this to our project.

<ol class="numbered-list list-inside" start="1">

.numbered-list
{
    list-style-type: decimal;
}
.list-inside
{
    list-style-position: inside;
}

Am I missing something here or is this just as bad as inline CSS? How do I explain this to my colleague?

Edit Perhaps my question is misunderstood. Shouldn’t it be something like this instead?

<ol class="info-list" start="1">

.info-list
{
    list-style-type: decimal;
    list-style-position: inside;
}

The point I’m trying to make is, the class names just represent the rule they apply. So if you want to change the representation of the list, you have to change the HTML (or change the CSS so you end up with a class name that does the opposite of the rule it contains).

Another edit Perhaps this will further help you understand my question.

<p class="red">Hello</p>

.red
{
    color: red;
}

Now, you want to change the text to be green. See the issue?

Answer 1

An article confirms my doubts about this style. The most relevant example is this one:

<div class="hyphenate"></div>

Unsemantic. Trying to specify the behavior of the content inside, instead of describe what it actually is.