Question about heading classes

[Micky Hulse]

Hello,

I've posted an answer on stackoverflow.com related to OOCSS:

"Why use .h1 instead of actual h1?"
<http://stackoverflow.com/a/19166926/922323>

In my answer, I referenced this older file:

<https://github.com/stubbornella/oocss/blob/6e481bc18fea7cae253977ad6b1d9a5bf85a6d24/core/heading/heading.css>

... specifically, I point out this comment:

/* .h1-.h6 classes should be used to maintain the semantically
appropriate heading levels - NOT for use on non-headings */

In the comments of my answer Stackoverflow, someone asked me:

"... I don't at all understand the OOCSS comment "NOT for use on
non-headings" - why not? That honestly makes no sense to me."

My question:

Just curious, but what is the reason to restrict the usage of the
heading classes?

Personally, I like the thought of using those classes only on
headings. To quote Nicole from an older thread "I like that it is easy
to remember. Discoverable.". In other words, if I used ".h6" class on
something other than a heading, I think I would find that confusing
and less logical than just restricting usage to headings only.

On the other hand, I can't think of a reason why one wouldn't be able
to use these classes on other elements ... especially if the class
names were more like ".alpha", ".beta", ".gamma" etc.

Just curious what ya'll think. I'm hoping that Nicole Sullivan is listening. :)

Thanks!
Micky

P.S.

I just found this answer on the OOCSS WIKI page:

"I need more than six (h1-h6) headings on my site. How do I add more?"
<https://github.com/stubbornella/oocss/wiki/faq#i-need-more-than-six-h1-h6-headings-on-my-site-how-do-i-add-more>

... which says:

"If you want more than six heading styles, extend the heading objects
by adding a new class."

But what if you someone wants to use those heading classes outside the
context of a heading tag?

Again, IMHO, using .h1-.h6 on non-headings wouldn't be (to quote
Nicole from an older/related thread) "easy to remember. Discoverable."

[Micky Hulse]

Lol, I did not mean to use the same reference to Nicole's quote! Sorry
about that.

On Wed, Oct 9, 2013 at 3:48 PM, Micky Hulse <rgm...@gmail.com> wrote:
> Personally, I like the thought of using those classes only on
> headings. To quote Nicole from an older thread "I like that it is easy
> to remember. Discoverable.".

> ...

> Again, IMHO, using .h1-.h6 on non-headings wouldn't be (to quote
> Nicole from an older/related thread) "easy to remember. Discoverable."

Since I mentioned it twice, here's that "older" thread I refer to above:

"Headings question: Basic concept/usage?"
<https://groups.google.com/d/topic/object-oriented-css/GE1uzU2Bu48/discussion>

Thanks for listening!

[Nicole Sullivan]

The strict usage on heading elements was just because I didn't want to see a ton of <div class="h3"> and have screen reader users and SEO get messed up. If you had giant unimportant text, it would be fine to use those classes on other elements.

--
You received this message because you are subscribed to the Google Groups "Object Oriented CSS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to object-oriented...@googlegroups.com.
To post to this group, send email to object-or...@googlegroups.com.
Visit this group at http://groups.google.com/group/object-oriented-css.
For more options, visit https://groups.google.com/groups/opt_out.

[Micky Hulse]

Hi Nicole! Thanks so much for the quick reply, I really appreciate it.

On Wed, Oct 9, 2013 at 4:36 PM, Nicole Sullivan <nic...@stubbornella.org> wrote:
> The strict usage on heading elements was just because I didn't want to see a
> ton of <div class="h3"> and have screen reader users and SEO get messed up.
> If you had giant unimportant text, it would be fine to use those classes on
> other elements.

Awesome! Good point about screen reader/SEO.

That answers my question. Thanks again, the pro help is much appreciated!!!! :)

Have a nice day.

Cheers,
Micky

[Nicole Sullivan]

I also edited the answer on stackoverflow

[Micky Hulse]

Hi,

On Wed, Oct 9, 2013 at 4:51 PM, Nicole Sullivan <nic...@stubbornella.org> wrote:
> I also edited the answer on stackoverflow

I saw that, thank you!!!! I gave you props in the comments (though,
I'm not sure if I got your Stack username right as it did not auto
fill-in for me).

I hope you don't mind, but I wrapped backticks around your code
examples (specifically, the <> characters were not visible as I think
the Stack markdown parser thought it was an actual tag of some sorts).

Thanks so much for you help, I owe you several Oregon micro brews!!!!!!!!! :)

Have an awesome day.

Cheers,
Micky

[Brian Moon]

On 10/9/13 18:36 , Nicole Sullivan wrote:
> The strict usage on heading elements was just because I didn't want to
> see a ton of <div class="h3"> and have screen reader users and SEO get
> messed up. If you had giant unimportant text, it would be fine to use
> those classes on other elements.

Yep, I learned this the hard way. A user had to tell me I broke the site
for his screen reader.

We actually do this:

h1.section-heading,
h2.section-heading,
h3.section-heading,
h4.section-heading,
h5.section-heading,
h6.section-heading {
@include fontSizeXXXLarge;
font-weight: 300;
color: $bgTextColor;
border-bottom: 1px solid $bgBorderColor;
margin: $boxMargin 0 $boxMargin/2 0;
}

h1.lead-heading,
h2.lead-heading,
h3.lead-heading,
h4.lead-heading,
h5.lead-heading,
h6.lead-heading {
@include fontSizeXXXLarge;
font-weight: 300;
background-color: $leadHeadingBgColor;
color: $leadHeadingTextColor;
padding: $boxMargin/2 $boxMargin;
margin: 0 0 $boxMargin;
}

h1.headline-large,
h2.headline-large,
h3.headline-large,
h4.headline-large,
h5.headline-large,
h6.headline-large {
@include fontSizeXLarge;
font-weight: 700;
margin: 0 0 $boxMargin 0;
}

etc.

I find the names to be more descriptive. Headings are different than
headlines for us semantically. So, having clear usage for the different
ones is good. Headings are usually in a box or have a bottom border of
some kind. Headlines, even if they are the lead heading of a page,
should not be treated like a heading, but instead a headline. We can
then apply those to any h1-h6 tag. This let's people using screen
readers skip to through headings looking for content they want to read
and then they can progress from there.

The names could be cleaned up a bit. I need to pick a naming scheme
there and stick with it.

Brian.

[Kristina Auckland]

Hi Brian

Just out of curiosity why don't you write those classes as:

.section-heading {
@include fontSizeXXXLarge;
font-weight: 300;
color: $bgTextColor;
border-bottom: 1px solid $bgBorderColor;
margin: $boxMargin 0 $boxMargin/2 0;
}

.lead-heading {
@include fontSizeXXXLarge;
font-weight: 300;
background-color: $leadHeadingBgColor;
color: $leadHeadingTextColor;
padding: $boxMargin/2 $boxMargin;
margin: 0 0 $boxMargin;
}

.headline-large {
@include fontSizeXLarge;
font-weight: 700;
margin: 0 0 $boxMargin 0;
}

The example you gave seems overly complex and specific to me. I'd love to know if I'm missing something obvious?

Thanks
Kristina

[Brian Moon]

Hi,

Good question. It's really a discipline thing. We had issues with
developers (me included) doing things like:

<div class="section-heading">
<!-- huge block of HTML here with a OOCSS template layout -->
<h1>Foo</h1>
</div>

Also one could use the heading and headline classes without using a
heading tag. And we don't want that. If its important enough to be given
a heading class, it should use a heading tag so that screen readers and
search engines know those are important break points in the document.
So, using the CSS I showed below enforces a convention for us.

Brian.
--------
http://brian.moonspot.net/