Why do people have a problem with this? It allows for visual correct with correct semantics. This imo is necessary code.

I'd prefer a more descriptive class name - that's my problem with it.

To add more to this, we use very descriptive names with our css variables which power the classes. --heading-1: 1.953rem; --heading-2: 1.563rem; --heading-3: 1.25rem; ..ect That's what we're editing and relying on in our css.

That doesn’t describe the content, that describes the design.

It's CSS. CSS should describe the design no? HTML describes the content.

Class and ID declarations are HTML and used for purposes beyond CSS. They should be semantic. A good test is if you can swap out your style sheet and display a completely different design, without affecting the HTML.

It is semantic. Heading 2 size is not the same thing as <h2>. Wether you call it Heading 2 or Level 2 Heading or whatever, those are just different ways of describing visually the same thing.

In my world, .h2 .heading-2, or anything else describing a scale of type is doing exactly what you are talking about. .h2 !== <h2>. I'm not applying the semantics of one element to another, I'm describing one element as having the 2nd largest size a heading can have. Ya dig?

That’s a self conflicting answer. If the item can semantically be described as the second most important hierarchical header on the page, it belongs in an <h2> tag, ya dig?

Hierarchical size order and semantic order aren't always tied together. Size !== semantic importance.