Proper CSS Naming Styles!

[jpfotoz]

Hi – newbe here, first forum posting, so forgive if this is answered already.

I’ve notice css styles like the sample below on a site I work on (but didn’t develop).
Is this a current best practice?
Is there a downside?

Coded CSS:
.h4,h4 {
font-size: 1.125rem;
line-height: 1.4;
margin-top: 0;
margin-bottom: .5rem
}

Provided HTML:
<p class="h4">Apple </p>

When this would have been fine:
<h4>Apple</h4>
and the css is:
h4 {…}

[Paulie_D]

There’s no real downside as such.

It’s a matter of how semantic you want to be.

Sometimes you don’t want to use an actual heading element but you want it look like you have.

That’s the use case….generally.

[mikelothar]

It does not look like best practice, also considering the CSS affects both .h4 classes as well as <h4> elements. My guess is that the developer tried to style a <p> tag to look like an <h4> tag which might be located somewhere else on the page.. Or..I don’t know. :)

I would go with the <h4> styling in this case, and skip the class all together.

[Author]

Posts