Question

As a CSS newbie I’m wondering if it’s recommended by professionals to repeat specific style attributes and their not inherited but default properties for every relevant selector? For example, should I rather use

body {background:transparent none no-repeat; border:0 none transparent; margin:0; padding:0;}
img {background:transparent none no-repeat; border:0 none transparent; margin:0; outline:transparent none 0; padding:0;}
div#someID {background:transparent none no-repeat; border:0 none; margin:0 auto; padding:0; text-align:left; width:720px; ...}

or

body {background:transparent; border:0; margin:0; padding:0;}
img {background:transparent; border:0; margin:0; outline:0; padding:0;}
div#someID {background:transparent; border:0; margin:0 auto; padding:0; text-align:left; width:720px; ...}

or just what (I think) I really need

body {background:transparent; margin:0; padding:0;}
img {border:0; outline:0;}
div#someID {margin:0 auto; width:720px; ...}

If it’s best practice to go with the first or second one what do you think about defining a class like

.foo {background:transparent; border:0; margin:0; padding:0;}

and then applying it to every relevant selector:

<div id="someID" class="foo">...</div>

Yep, now I’m totally confused… so please advise! Thanks!

Answer 1

Your aim in writing CSS should be the readability and maintainability of your stylesheet. Usually that means writing as few rules as possible, a goal that is helped by using as many shortcuts as possible, and taking advantage of the CSS initial values and the browser stylesheet defaults that are reliable.

(Occasionally you may want to duplicate rules a little because you’ve got two parts of the page that you want to style similarly by coincidence, and you want to split those styles into different sections of the stylesheet so you can manage the sets of rules in groups.)

Not all browser stylesheet defaults are reliable, which is why people use CSS resets. (Although personally I find most of them much too heavyweight and intrusive. Most modern browsers agree on the important stuff, needing just a few hints here and there to fix particular sore points. The overhead of setting a dozen rules like margin: 0 on every element in the document just seems way over the top.)

A lot of the properties in your example are the initial and/or default-stylesheet values anyway, so you gain nothing by including them. (border-width: 0 is not technically the initial value, but since border-style: none is, you won’t notice the difference.) Your rules would be much easier to cope with written minimally:

body { margin: 0; }
#someID { width: 720px; margin: 0 auto; }

what do you think about defining a class like

.foo {background:transparent; border:0; margin:0; padding:0;}

Well, it depends what foo is. If you have many elements on the page that represent the same thing you should certainly mark them up with a class and style them all in the same way.

But if you just want to apply some styles to a load of unrelated elements, you should target them separately (using , in the selector). Don’t pollute the content markup with style concerns by adding bogus classes like class="red_thing big_border".

However as it stands, with those rules which are the same as the defaults for most elements including the <div>, .foo would be useless anyway.