Using heading classes to maintain correct semantics and style

I'd have to disagree. You're using a class that is descriptive of what the element is supposed to look like, which is a big HTML/CSS no-no that violates the basic tenet of "separation of concerns". That's no different than calling your H4 "biggreenheader" (if you wanted it to be big and green).

A better approach might be ".moduleheader" and styling your module headers differently (in a different location than your default styles). That way if you change your design, you don't have to change your class if it is no longer the size of an H2.

@ultimatedelman I suppose using a class that refers to the appearance of an element does stray slightly further away from "seperation of concerns", but whether that writes off this technique completely depends on the context and your priorities. I've done things this way before, because realistically we know we have control of the markup and can change the class to .h3 or .h4 at any point if needed (probably quicker than moving a selector from one part of the css to another - although either is a non-event really), and what we gain is a piece of clean and maintainable CSS (as opposed to having potentially hundreds of classes being explicitly stated). Obviously this wouldn't work for say a hosted ecommerce platform that needs to be user styleable, but that's what I'm saying about the context determining whether or not this approach will work. Either way we know the semantics of the elements themselves are correct, and IMO that's more important than the classes applied to it.

@samuelmealing the only time I would ever be ok with this technique (I would never recommend it) is if you're writing prototype throwaway code, as this is not scalable in any way. Even then, you're bound to get screwed up. Should this be an H2 or an H4?

IMO, this is just laziness and inexperience.

@ultimatedelman I think that's a bit harsh; I'm neither btw.

Clients also use this technique in the main content area. For example, they know what an h2, h3, h4 look like, and how to markup a document correctly, but sometimes they'll feel that an h3 would look better in a particular instance than an h2, so use the .h3 class. There's no "semantic" class name that would suit that purpose, so .hX works fine.

@stowball I'm not intending to insult you, I'm just being honest about this technique. You want a "semantic" class name? I gave you one in my first comment. Try "moduleheader" or "moduletitle". Add that class everywhere you'd add "hX" instead and now you can do

h4 { font-size: xpx; }

.moduleheader { font-size: ypx; }

and it will be ypx! Now if you decide to change .moduleheader to zpx and make it red, you have a place to do it, and it will uniformly affect all your ".moduleheader"s. If you wanted to do that with your way, you'd either have to make all hX's red or add another class (what would you call it? "redfont"?) to all of your HTML elements. What if you have 10 of these h4.h2 elements and your designer says, "Actually, these are more of an h3?"

I'm sorry, but you won't convince me to accept this concept as a good idea. This violates web development 101.

On a side note, have you ever used SASS? I'm assuming you haven't, because if you had, you could fix this problem in your actual CSS without even repeating any font sizes:

$h1: wpx;

$h2: xpx;

$h3: ypx;

$h4: zpx;

h1 { font-size: $h1; }

h2 { font-size: $h2; } // etc

.news h4 { font-size: $h2; }

Easy, no?

@ultimatedelman Consider me insulted & I do use Sass, by the way :P Anyway, I just changed my headings in my current build to use .module_header, so thanks for the input

Again, not trying to insult you, just disapproving of the method outlined in this post. I'm glad I could help you, though :)

h1-h6 should be using em scaling. This will allow for easier use and font scaling wherever the tags are being used. Simply increase the font percentage on the parent or the context.

@milesj plain ems would cause issues when nested, probably better to use rem that way it's pegged to the body's font-size instead of it's parent element.

I don't see a problem with .news h4 but if you have several modules with a similar look, why not use "OOP inheritance" principle in CSS to let them share some common styles?

For example your HTML might look like

<section class="widget news">...</section>
...
<section  class="widget featured">...</section>

So now the news and the featured elements would be subclasses of the widget element.
And if you want both elements to share a header style, your CSS would start like this:

.widget h4 {
    /* styles for h4 within any module that is a widget */
}

This way you don't have to modify CSS as you add new modules on the page that share the same style.

Alternatively, instead of having a confusing [and non-semantical] <h4 class="h2"> (if you count classes as part of semantics which I believe you should) you can have <h4 class="widget-header"> as suggested by @ultimatedelman. This way you "mix in" the styles inside .widget-header into your h4 styles.

Here's the approach I use. Similar concept, but it's starting to become more of a widely accepted approach:

h1, .alpha {
    ....
}
h2, .beta {
    ....
}
h3, .gamma {
    ....
}
h4, .delta {
    ...
}
h5, .epsilon {
    ...
}
h6, .zeta {
    ...
}

http://csswizardry.com/2012/02/pragmatic-practical-font-sizing-in-css/