Question

I new to CSS/CSS3 and I read in many places different way to build CSS files. Some people all tags in the same elements and some people divide elements and then use different classes in the HTML code.
eg:

// css

h1 { font: normal 20px Arial; color: black; margin: 1em 0; padding:0; border-bottom: solid 0.1em #ddd; }
h2 { font: normal 16px Arial; color: black; margin: 1em 0; padding:0; border-bottom: solid 0.1em #ddd; }

so in the HTML they just have to put and that’s it. If you need to change the border color then you have to change ALL tags that has the border-bottom.

OR

h1 { font: normal 20px Arial; }
h2 { font: normal 16px Arial; }
.colorBlack { color: black; }
.headers { margin: 1em 0; padding:0; }
.borderBottom { border-bottom: solid 0.1em #ddd; }

and in the HTML you use:

<h1 class="black headers borderBottom">h1</h1>

Very easy but everytime you have to put all the CSS you need

Is there any Best Practices on how to build CSS? Which way is better for performance or loading time?

Answer 1

I recommend to use:

h1, h2 {
    color: black;
    margin: 1em 0;
    padding: 0;
    border-bottom: solid 0.1em #ddd;
}
h1 {
    font: normal 20px Arial;
}
h2 {
    font: normal 16px Arial;
}

The best practice: Keep your code readable. Readability is not achieved by separating a style definition in several useless classes.

Usually, you want the h1 and h2 tags to have similar styles. For that reason, I’ve grouped the styles. When you want another property value for a certain element, you can add another CSS definition. When the selector has a higher specificity, the new declaration will override the previous one(s).