how do you group style rules

[junior_]

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

I will give some examples:

1.

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?

2.
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;
}

3.
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!

[scottloway]

1) In general, I try and and use the cascade where possible; for example:

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

2) You should use class names that are semantic to function or content vs. something like color. In other words, I'd suggest NOT using something like "colorA" (though what you have is better than something like class="green"). Hopefully your HTML provides enough structure to select your differently styled anchors. It's difficult to tell with your examples here, but let's assume you have all anchors as blue, and just your anchors of class="index" as green:

a {
color: blue;
}

a.index {
color: green;
}

Alternatively, maybe you don't even need an "index" class on your anchors at all, and can utilize your page structure to select your anchors. Let's say you want all anchors within <div class="index"> to be green:

.index a {
color: green;
}

3) You could certainly have a different class for each of your sidebars, though a nicer solution may be to change the page container to something unique by page. For example maybe you have something like <div class="pageContent"> that contains the content for each page; you could add a unique ID to this div for each page in your flow; e.g. <div id="homePage" class="pageContent">, <div id="detailsPage" class="pageContent">, etc. This would then allow you to select your sidebar uniquely by page; for example:

.sidebar {
color: red;
}
#homePage .sidebar {
color: blue;
}

Hope this helps.