Best practice: How to use (repeat) CSS style attributes correctly?

Question

Hi guys! 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

Always use:

border:0;

over:

border:0 none transparent;

If you think about, if the width of the border is 0 (i.e. none) then what use is it to specify the style and color of the border as no border will even be displayed. (The same applies for the background and other properties aswell)

And also, i would go with

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

Its better to apply CSS styles to all elements with a class of "foo" rather than repeating the same CSS code for "someID", "someID2", "someID3" etc.

It will save on bandwidth (as your CSS file will be smaller) and also means that you have to do less work, which is always a bonus.

Answer 2

It's a very common thing these days to use what is called a "CSS Reset". Basically it's just a heap of CSS you chuck at the top of your declarations which resets all the styles to a common base. The idea is to flatten out any differences between the different browsers' default styles. From there, you can be slightly more sure that you'll get what you want from the CSS. One of the more popular ones is Eric Meyer's CSS Reset.

Answer 3

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.