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.

Size values are presentational. OMG y'all are sucking me back in. ahhhhhh

One thing to keep in mind here, I'm no good at the English language, there very well could be a disconnect between what my brain thinks and what you are reading. :)