Sprite image - how to organize?

HTML & CSS
1

Could anybody explain how is a good way to group css style rules please.

I will give some examples:

h1{
font-size:14px;
color:blue;
}
h2{
font-size:14px;
color:green;
}

Both have the same font-size. Should I put extra h1,h2 rule and put there font-size?

I use 2 different color rules for anchor texts. Should I create extra class only for color?

<a class="index colorA" ...
colorA{
font-color:green;
}

I have on different pages different side bars. Sidebar 1 is on index and sidebar 2 on other pages. Both have in common their width and background color, but have also 3 different rules. Should I create extra class for width and background color?

It would be really helpful if you can give some your examples what you group and what not.

Thank you!

2

In my personal experience i prefer to stack rules together if they share common properties, stacking them together will decrease the amount of time it takes to load the page because it means the browser has less CSS to parse and will improve the time it takes to update the rules. Below is an example of your example…

h1, h2 { font-size: 14px; }
h1 { color: blue; }
h2 { color: green; }


.index, .other {
    background-color: grey;
    width: 200px;
}

.index { /* More CSS properties here */ }
.other { /* More CSS properties here */ }
3

But the problem could be that you need to change html in order to change particular font-size or background-color if you choose that way. That is the reason why I am confused about how to group rules.

4

Grouping rules together will make it easier to update rules, if you ever needed to update or add a new rule then all you would need to do is group the new rule with the current ones and add the correct properties to it.

Inheritance isn’t an evil thing in CSS and HTML, it will be the best thing you will ever use while developing with CSS and HTML.