> No matter how you sell it, what you have here is a css tautology. It's a "list item", the element name is right there for all to see and use, including the machine.

The names are similar because they've created a general framework. They should have probably name-spaced the component as well with prefixes.

Using class names creates a scope so your rules don't spill out and pollute everything else. It's like local variables in a function, and it's also a hack to behave more like XML. For example:

<li class="product-sku">

is approximating:

<sku>

Maybe web components will fix this, but I'm not up-to-speed with that technology.