Simply style headings within HTML5 sections

CSS 4 October 2011 | 0 Comments

Many of us know that HTML5 sections allow the programmer to restart headings at H1 and still keep proper HTML outline format. What I did not realize is how problematic this can become to style in an active and growing site.

Covering all of your bases develops quite the headache.

Stubbornella develops a brilliant heading class naming convention to handle this new development in front end writing. Typically, I disapprove of classitis in headings. However, with this growth in HTML regarding sections and headings, my opinion must evolve in like manner.

For future reference for myself, in case Stubbornella disappears before I do, the class suggestions are as follows:

CSS:
  1. .tera {}
  2. .giga {}
  3. .mega {}
  4. .kilo {}
  5. .hecto {}
  6. .deca {}
  7. .deci {}
  8. .centi {}
  9. .milli {}
  10. .micro {}
  11. .nano {}
  12. .pico {}

Which is implemented as:

HTML:
  1. <h1 class="giga">Me on the web...</h1>
  2. <section>
  3.   <h1 class="kilo">My Twitter Feed</h1>
  4.   <ul class="tweets">
  5.     <li>Mmmm, cornflakes.</li>
  6.     <li>Something inane...</li>
  7.   </ul>
  8. </section>
  9. <p><a href="more.html">More stuff on the web</a></p>

Please visit Stubbornella and read the whole article. It developed my thinking to a more complete view.

Share and Enjoy:
  • del.icio.us
  • Digg
  • Twitter
  • Google Bookmarks
  • StumbleUpon
  • Facebook
  • email
  • Print

Tagged in , ,

Leave a Reply