HTML code as a feature for your CSS

I will never stop repeating that you should think at your HTML code before even write a single tag.

I think it is wrong to simply assume that your DOM will change and throw tons of classes on your code.

Let me explain better (with some code) what I mean.

Let's assume we have an article:

<div class="article">
  <h1 class="article-title">The Title</h1>
  <div class="article-content">
    The content
  </div>
  <div class="article-footer">
    Social links
  </div>
</div>

As you can see, there are a lot of classes. This is great if you think your DOM will change in the future.

You can apply the same classes on your new elements and you are done.

The question I would like to raise with this post is, however:

"Why the hell don't you write an HTML code that will not change in the future?"

There is a right way to write an article in HTML. So, why don't write HTML the right way, and assume that it will not change?

You won't change a well written code, right ?

This is how I would write an HTML article:

<article class="type-of-article">
  <header>
    <h1>The Title</h1>
  </header>
  <div class="content">
    the content
  </div>
  <footer>
    Social links
  </footer>
</article>

As you can see, I gave the article a semantic class, which specifies the kind of article.

There are a lot less classes involved. And I can use a bit of encapsulation sass side to style things.

This is the scss code related to the HTML snippet above:

.type-of-article {
  h1 {
    color: yellow;
  }

  > header {
    background: red;
  }

  > .content {
    background: blue;
  }

  > .footer {
    background: green;
  }
}

I love to wrap elements in a "superclass". I love to style elements using the DOM as a feature, not as a thing that will change tomorrow.

It is important, however, to keep in mind that this approach must not be abused. Extreme nesting is a bad practice and you need to keep it under control using a linter tool.