ixf9ja
Last Updated: February 25, 2016
·
4.213K
· stowball

Using heading classes to maintain correct semantics and style

Generally, default heading styles are written like the following:

h1 {
    font-size: 30px;
}
h2 {
    font-size: 26px;
}
h3 {
    font-size: 22px;
}
h4 {
    font-size: 18px;
}

We'll then use headings in individual modules, such as a news list in a sub column. Semantically, the heading may need to be an h4, but look as though it were an h2.

We could do something this, but it's overly specific, and every new module would need a selector added:

h2, .news h4 {
    font-size: 26px;
}

So instead, if we create classes for the heading styles, they can be applied anywhere to make one element easily look like another:

h1, .h1 {
    font-size: 30px;
}
h2, .h2 {
    font-size: 26px;
}
h3, .h3 {
    font-size: 22px;
}
h4, .h4 {
    font-size: 18px;
}

Then our markup could simply be:

<div class="news">
    <h4 class="h2">Latest News</h4>
</div>

Your clients could also use these classes to alter the styling of their content, while not changing the structure of a document:

<h1>Page Title<h1>
<p>Intro paragraph…</p>
<h2 class="h3">An h3 would look nice in this instance, but I know it should be an h2</h2>
Say Thanks
Respond

11 Responses
Add your response

6319
0e2e822d32a7ab3d7f0b7098d03b1d16

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.

over 1 year ago ·
6320

@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.

over 1 year ago ·
6321
0e2e822d32a7ab3d7f0b7098d03b1d16

@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.

over 1 year ago ·
6322

@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.

over 1 year ago ·
6323
0e2e822d32a7ab3d7f0b7098d03b1d16

@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?

over 1 year ago ·
6324

@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

over 1 year ago ·
6325
0e2e822d32a7ab3d7f0b7098d03b1d16

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

over 1 year ago ·
6357
2bebf4cb2fc99965264410111a0d2239

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.

over 1 year ago ·
6416
F700694ebf2911ddfcb0d25c5e0a97b1

@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.

over 1 year ago ·
6577
D42a7264714dee5006b9c99d2567a320

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.

over 1 year ago ·
6803
Profile image 3 gray small

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/

over 1 year ago ·