Html - Correct use of markup tags ,CSS and OCSS -

i'm interested in correct way of writing markup, rollup of html5. , found it's hard write markup doesn't looks of content. , after reading on object oriented css , use of classes, it's not easier. come programming world variables , logical structure of code key. while trying keep in mind, here thoughts on whole topic.

i tried several things, reusing classes, example creating set of classes color palettes. such as:

.color_pr1 {       color: blue; }  .color_pr2 {       color: red; } 

and quick classes such as:

.left {           float:left; }  .right {           float:right; }  .bold {           font-weight:bold; } 

the old philosophy of "markup shouldn't dictate how content displayed", classes .left .right , .bold should big no-no. reusable arent they? reusable code great! but, found end bloated markup might kinda this:

<div class="color_pr1 bold right">     <p>lorem ipsum</p> </div> 

or have written markup this:

<div clas="right">   <p class="color_pr1 bold">lorem ipsum</p> </div> 

in way, think it's clutter. why not give parent div id or class , write specific subclasses within id/class in css?

consistency must key here, , without it, end markup bloat end damaging workflow of project alltogether.

so i'd create set of color palettes variables in sass. basic set of sizes , assign h1 h6 default values. if i'd need mix these bit, i'd either assign tags new color class, or create css looks this:

#somediv, .someclass {   h1 {      color: $color_pr1;   } } 

isn't way better ending markup that's got huge amount of classes tied it? scenario, have layout kinda looks this:

15.03.2013

some image

music news

the beatles reunited

lorem ipsum dolor sit amet

in example, exact markup:

<h3>15.03.2013</h3> <img>some image</img> <h5><strong>music news</strong></h5> <h1>the beatles reunited</h1> <p>lorem ipsum dolor sit amet</p> 

first of all, when appropriate use <h> tags?the first h3 tag used on date. heading? h5 tag? it's not heading it? defines category article published under. should use <strong> tag? not really, it's nothing important it, markup wise. it's bold text bacause it's designed that.

would better approach?

<section id="news_articles">   <article>    <h3>15.03.2013</h3>    <img>some image</img>    <h5>music news</h5>    <h1>the beatles reunited</h1>    <p>lorem ipsum dolor sit amet</p>   </article> </section> 

and write css looks more this?

*/ default values */ h1 { font-size: 16px; }

h3 {   font-size: 12px; }  h5 {   font-size: 10px; } 

*/ specific id subclasses */

#news_articles {   h3 {     font-weight: bold;   } } 

so it's down balancing of writing simple markup, reusing css code that's main issue here. thoughts on this?

i'm not sure if answer satisfactory you, while there plenty of best practices, comes down case-by-case scenarios.

as youself, reusability great, is. "left", "right", "bold" among lesser evil kind of presentational class names because they're easy understand , easy remember , therefore re-use.

however entire point of using class names describing element's function rather looks markup make sense when site running under a, instance, responsive layout, or entire design overhaul. if new design has blockquotes floated left rather right, you'd either have dig through of pages/templates/databases remove left/right class names or you'd find in either of these 3 scenarios:

accept having css

.left { float: right } 

or

.general-class blockquote { float: left !important; } 

or end unused css-selectors written in markup and/or stylesheets.

it's not end of world, hey, every bit helps if want create semantically correct, easy use projects or snippets. in smaller projects may find it's easy change markup manually, in cases it's less of deal.

as other questions: comes down case-by-case scenarios. while writing markup, keep asking purpose fills. "is percieved header?", "is used navigation?", "is different section of article (or different article on section)?".

if answer such question "yes", won't go wrong sectioning markup such.

for more detailed information of when html element may appropriate, refer to: http://dev.w3.org/html5/html-author/

and quick note on css-selectors; strive towards writing short, efficient selectors possible. don't specific in general selectors, doing global:

h2 { text-transform: uppercase; } 

and have uppercase h2s on 1 part of site dozens of other h2s without makes no sense, since you'd have reset text-transform whenever create new section.

but makes no sense loose selectors; if find writing class names on many of content elements (headers, images, paragraphs instance) may want consider writing more efficient markup/selectors.