add .h1, .h2, .h3, .h4, .h5, .h6 classes

[wujekbogdan]

Sometimes we want to change font size, but not to use h1-h6 headers. I suggest to replace: h1, h2, h3, h4, h5, h6 { margin: 10px 0; font-family: inherit; font-weight: bold; line-height: 20px; color: inherit; text-rendering: optimizelegibility; }

with: h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6 , .h6 { margin: 10px 0; font-family: inherit; font-weight: bold; line-height: 20px; color: inherit; text-rendering: optimizelegibility; }

And do the same with font sizes and line height.

[ghost]

The rule you want to change doesn't apply font-size to the hn tags so adding the classes would not be helpful to accomplish what you need. If it did it would not be correct because would force the user to use a hn class with non hn tags. To change size to non hn element use the correct tag ('p {}' to change size to a paragraph tag and so on) or add a class to the element, it's the right way to go.

The first istance of hn classes I've seen on OOCSS but they are used differently, to do something like that: h1 class='h3' . This is useful when you have an heading in a context where its level is right for semantics but the default size is not for the design of the page because allows to avoid creating additional heading classes and help mantaining consistent the design. (Having more than 5-6 heading styles in a page is counterproductive because the user would not be able to scan them).

[wujekbogdan]

It was just an example, i know that it doesn't change font size. Read the last paragraph of my post ;)

Example usage:

< p class="h1" > paragraph with the same size like h1 tag < /p >

Take a look here: http://www.stubbornella.org/content/2011/09/06/style-headings-using-html5-sections/

[mdo]

I understand the use case, but I don't think this needs to be implemented.

[ghost]

wujekbogdan if you read all my comment I also tried to explain why this approach is not correct. In the post you linked to, headings classes are used on heading elements only, not on other tags.