Headings question: Basic concept/usage?

Micky Hulse

unread,

Sep 27, 2012, 5:49:07 PM9/27/12

to object-or...@googlegroups.com

Hello,

Sorry in advance if this is documented somewhere... If such a page
exists, I'd love a link to read the details.

This article has been very helpful:

<http://www.stubbornella.org/content/2011/09/06/style-headings-using-html5-sections/>

Looking at OOCSS "Headings" css, I see:

h1, .h1{ ... }
h2, .h2{ ... }
h3, .h3{ ... }
h4, .h4{ ... }
h5, .h5{ ... }
h6, .h6{ ... }

For some reason I'm having a hard time wrapping my head around how to
use the above classes...

So, is the concept/practice to use .h1 on an h3, that is if you want
that h3 to have the h1 look/feel?

Or, better example, would I use a .h3 class on an nested <h1> (in a
nested html5 <section>) if I want that <h1> to look/feel like a <h3>?

What's the rule of thumb here?

Sorry for my ignorance. :(

Thanks!
M

Nicole Chung

unread,

Sep 27, 2012, 6:23:12 PM9/27/12

to object-or...@googlegroups.com

I'm taking it right from this article

another way to write it is this:

h1,.alpha { [font styles] }

h2,.beta { [font styles] }

h3,.gamma { [font styles] }

h4,.delta { [font styles] }

h5,.epsilon { [font styles] }

h6,.zeta { [font styles] }

In which case you can use it like this:

<h1>Lorem</h1>

</div>

<h2 class=alpha>Lorem</h2>

</div>

<h4 class=gamma>Lorem</h4>

</div>

I find this method a tiny bit easier to conceptualize.

M

--
You received this message because you are subscribed to the Google Groups "Object Oriented CSS" group.
To post to this group, send email to object-or...@googlegroups.com.
To unsubscribe from this group, send email to object-oriented...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/object-oriented-css?hl=en.

Jamund Ferguson

unread,

Sep 27, 2012, 6:59:33 PM9/27/12

to object-or...@googlegroups.com

That's how we use it at odesk. Slightly larger example:

<body>
<div class="main">
<h1>Main Heading</h1>
<section>
    <h1 class="h2">Section Header</h1>
</section>
</div>
<aside class="side">
<article class="widget">
   <h1 class="h3">Sidebar Headings</h3>
</article>
<article class="widget">
   <h1 class="h3">Sidebar Headings</h3>
</article>
</aside>
</body>

Micky Hulse

unread,

Sep 27, 2012, 7:06:20 PM9/27/12

to object-or...@googlegroups.com

Hi Nicole! Thanks so much for your quick and helpful reply, I really
appreciate it. :)

On Thu, Sep 27, 2012 at 3:23 PM, Nicole Chung <nicole...@gmail.com> wrote:
> I'm taking it right from this article

Oh, nice! I had not seen this article before. Thank you for the
linkage, reading now.

> another way to write it is this:
>
> h1,.alpha { [font styles] }
> h2,.beta { [font styles] }
> h3,.gamma { [font styles] }
> h4,.delta { [font styles] }
> h5,.epsilon { [font styles] }
> h6,.zeta { [font styles] }

Awesome, that is more understandable.

In fact, based on Nocole's article (the one I linked to in my first
post) I played around with this naming convention:

"Jim Blower's Extended System of Units"

.lunto {}
.mikto {}
.nekto {}
.otro {}
.pekro {}
.quekto {}
.rimto {}
.sotro {}
.trekto {}
.unto {}
.vunkto {}
.wekto {}
.xonto {}
.yocto {}
.zepto {}
.atto {}
.femto {}
.pico {}
.nano {}
.micro {}
.milli {}
.centi {}
.deci {}
.deka {}
.hecto {}
.kilo {}
.mega {}
.giga {}
.tera {}
.peta {}
.exa {}
.zetta {}
.yotta {}
.xona {}
.weka {}
.vunda {}
.uda {}
.treda {}
.sorta {}
.rinta {}
.quexa {}
.pepta {}
.ocha {}
.nena {}
.minga {}
.luma {}

-- rgne.ws/PqkGvg

But, at least from what I have experienced so far, the major drawback
to the above naming system/convention is that it is hard to remember.
:(

> In which case you can use it like this:

> ... <snip> ...

> I find this method a tiny bit easier to conceptualize.

Definitely! Thank you so much for the clarification, I really appreciate it. :)

Based on the little testing I've done so far, I think I might go with
the .h1, .h2, .h3, .h4, .h5, .h6 classes, just because I feel like
that's something that I can remember.

Would you think it was crazy to have .h7, .h8, .h9 classes? Or, would
it make sense to just "extend" existing classes and call the new
headings something like ".category" (I think that was what Nicole's
article was hinting at)?

Thanks again! Much appreciated.

Cheers,
Micky

Micky Hulse

unread,

Sep 27, 2012, 7:09:29 PM9/27/12

to object-or...@googlegroups.com

On Thu, Sep 27, 2012 at 3:59 PM, Jamund Ferguson <jam...@gmail.com> wrote:
> That's how we use it at odesk. Slightly larger example:

Awesome! Thanks Jamund and Nicole for the examples! I really appreciate it.

So, Jamund, does your CSS have .h7, .h8 (and above) named heading classes?

I think the major thing that threw me off before asking you folks is
that the class names appear to be tied to the HTML element names...
But I don't see why I could not do .h7 and above for names (or, does
that sound kinda wacky?).

Sorry if I sound like a lunatic... I tend to over-think these types of
things. :D

Cheers,
Micky

Jamund Ferguson

unread,

Sep 27, 2012, 7:16:18 PM9/27/12

to object-or...@googlegroups.com

Micky,

We have about 10 headers, but they're all variations of h1 through h5.

I don't think there's a right and wrong about this, but you'll see things like this

.h1 // page headers
.h1High // highlight version
.h1Low // lowlight version
.h2 // section headers
.h3 //sidebar headers
.h4 // section sub-headers
.h5 // sidebar sub-section
.h5lrg // larger version

Then we use sass and will do this .h1High { @extend .h1; color: white; }

Here's a screenshot from our components library:
http://cl.ly/image/27430v0O1m3q

Micky Hulse

unread,

Sep 27, 2012, 7:28:30 PM9/27/12

to object-or...@googlegroups.com

On Thu, Sep 27, 2012 at 4:16 PM, Jamund Ferguson <jam...@gmail.com> wrote:
> We have about 10 headers, but they're all variations of h1 through h5.
> I don't think there's a right and wrong about this, but you'll see things
> like this

Ooh, that's cool! Great tips and very inspirational. :)

Thanks for sharing!

Thanks to OOCSS, you and Nicole, I'm feeling better about the
direction I'm heading in... Thanks again!!!!

Cheers,
Micky

P.S.

I'd still be interested in seeing other folks CSS variations on this
topic... I find this kind of stuff fascinating. Btw, Nicole, that
http://csswizardry.com article was a great read, thanks for the
linkage!

Andrew Abogado

unread,

Sep 28, 2012, 9:46:55 AM9/28/12

to object-or...@googlegroups.com

This is very helpful. Thanks

Aeron Glemann

unread,

Sep 28, 2012, 1:13:41 PM9/28/12

to object-or...@googlegroups.com

I like to take my cues from the W3C and HTML itself... ie they decided a long time ago not to do:

<h-primary>

<h-secondary>

or

<h-alpha>

<h-beta>

They did something much simpler, more performant (smaller) and universally easier to understand and remember:

<h1>

<h2>

FWIW, I tend to do it like this:

h1, .heading-1 {}

h2, .heading-2 {}

h1 = something that is semantically the most important heading on the page

.heading-1 = something that just needs to look like the most important heading on the page

Nicole Sullivan

unread,

Sep 28, 2012, 6:58:37 PM9/28/12

to object-or...@googlegroups.com

I don't think h7 is whacky. I like that it is easy to remember. Discoverable.

Nicole

Sent from my iPhone

Micky Hulse

unread,

Sep 28, 2012, 7:05:51 PM9/28/12

to object-or...@googlegroups.com

Thanks Aeron and Nicole!!!!

On Fri, Sep 28, 2012 at 6:46 AM, Andrew Abogado <m...@andrewabogado.com> wrote:
> This is very helpful. Thanks

+1000 :)

You OOCSS guys/gals rock. :)

Reply all

Reply to author

Forward