BEM, Cascading styles and Classitis?

Question

I'm trying to return to front end coding for the web. The last time I tried write CSS was 10 years ago, and back in that time, there was a disease called classitis. My comprehension of classitis maybe wrong, but I took it as to not litter your HTML document with too many CSS classes, and try to use cascading rules to keep your HTML mark up clean and lean.

For example, this could be classitis

<ul class="feed">
<li class="item">
<img src="" class="thumbnail"/>
<a href="" class="read-more">Read More</a>
</li>
</ul>

Using the advantage of cascading rules in CSS, we could remove all the classes except class="feed" and then write CSS rules such as

.feed li img {/*style*/}
.feed li a {/*style*/}

This way, there's a greater degree of separation between content and presentation.

However, I admit that on very large web applications, it can be easy to forget what cascades what, and when other team members join the project, they are even more likely to have difficulty grasping the entire front end architecture. And it gets even more challenging when trying to re-factor the project if you didn't select the best root element to tag your class.

I see BEM being very useful in that the class naming conventions clearly identifies what every block and element is supposed to do. But doesn't that mean you're reintroducing classitis and also admitting that separating presentation from content is an unachievable fantasy? So that's my question.

Note - I see some people defined classitis as repeating class names within elements of a block (eg. parent, child and grand child are all mention the same class). Not sure if that was the industry accepted definition at the time, or if the definition of classitis was more generic to mean the the introduction of CSS classes/ids when you could have used cascading rules instead.

Answer 1

Anything more recent that says whether classitis, divitis, non-semantic elements and anything that encourages the merger of presentation and content is a GOOD thing?

OOCSS and BEM are two CSS methodologies that emerged a few years ago. They have reversed good practices.

The CSS code is used to dress content blocks. Imagine that we have to create two different clothes for Albert and Nicolas. The naive method is to name these two clothes so: "Albert's habit" and "Nicolas' habit". It is a naming according to the semantics of the content.

Then Pierre arrives and we have to dress him up. But our naming prevents reuse. It is necessary to create a new "Pierre's habit" even if this one would be very similar to Albert's one.

If clothing design becomes our business, then we will change the way we work to make it easier for us to reuse our work. We will intentionally avoid naming by the content (the dressed person). We prefer to name the clothes themselves. It could be abstract names: "Habit 001", "Habit 002", etc. Why not? It would be reusable. But a more intuitive naming will require less effort of memorization and we will name according to what we see: "The large and blue habit", "The small but wide habit", etc. And so Albert will wear "the large and blue habit" rather than "Albert's habit". It is not about mixing presentation and content. The semantics used to name the packaging is no longer that of the contents but that of the packaging.

With the naming by content semantics, the CSS code was in fact totally linked and dependent on HTML code. While, with the naming of the wrapping, the CSS code becomes a code that exists by itself, separate from the HTML code, and this allows distinct blocks in the HTML code to better reuse the same appareance.