Is using HTML5 tags as CSS3 switches a good practice?

Question

Use the names of tags HTML5 as most CSS selectors is a good practice? Be it because I’m not creative to give names to ids or classes, or by wanting to make HTML code as clean as possible, leaving only the structure and semantics of tags.

Since my apprenticeship, I have always used and abused tags because of its semantics, for example in the place of a <div id="cabecalho"> use only one <header> and things like that (<footer>, <main>, <section>, <aside> and so on...).

In some forums and posts on name sites (Caelum), I read something that implied that practicing this makes your CSS less versatile and with great chances of its early maintenance, as it is totally stuck to the HTML structure.

I always have to use classes and ids, always choose to tags where possible or if there is a middle ground?

Answer 1

Objectively it does not have to use. The use is only necessary when it has a technical reason, has a purpose in why it there. To better understand have some readings:

• What is the purpose of the "id" and "name" properties of an HTML tag?
• What is the HTML priority? "id" or "class"?
• When to use the class attribute in HTML elements?
• Good practices using CSS
• What should I use in CSS, id or class?

The id is when you need a specific stylization of that element. And the class is for any group of elements, often it would be everyone who uses a certain tag, there is no need to use.

So I go in the middle, don’t use until you need to use. There’s no way to style just one element by tag, unless you’re sure you’ll never have another element with the same tag, there is risk. It is very common that the style applies to all elements of that tag, at least within that area of the document. Example:

<div id="produtos">
    <section>
        <h3>Brinquedos</h3>

In CSS you only need:

#produtos h3 { ... }

And there’s no confusion with others h3 of the document outside this div.

I put in the Github for future reference.

Bacco has already commented on what I think, the simpler, the better.

The only case I could possibly use id or class where it can be resolved with the tag is when you’re going to do something for third parties to style as they please. Still, I’d think long and hard before doing it and try to avoid it. You can still let people style it by tags, but it will not always be so practical.

I do not like the source who consulted this, I think there is much wrong there or with opinions complicate too much the development.

There is an important principle which is YAGNI. Don’t do anything until you need to. Just make sure it’s easy to change if you need to.

I consider it a correct choice. There are those who disagree.

Answer 2

No. It’s not good practice. It’s a mistake. Do not style by tags.

You may for example need 2 in the same document, then stylize:

header {

}

You’ll have to "fight" and overwrite unnecessary things. Always style by class or id, but never by tag name.

When you style by the name of the tag vc is doing a "global css reset", in which all the tags of that name will have that style. And you can yes, have more than one , , on the same page, and each have a different positioning and style than the other.