Arranging your CSS in the stylesheet

HTML & CSS
1

Hi,

Im just wondering how important is it to arrange your CSS properly in a css stylesheet.

Basically when I add a new CSS rule in dreamweaver I tend to add it anywhere in the list, yet the css still has the desired effect. Is there anything wrong with not ordering it in a logical format?

Are screen-readers affected by this?

Thanks a lot for your advice.

2

In technical terms, the only thing to note is that if you have two conflicting rules that have equal specificity*, the one the comes second will outrank the one that comes before it. But unless you have any conflicting rules, it doesn’t make any technical difference what order the rules come in.

On the other hand, it might make a huge difference to you in terms of maintaining the site. One of my websites has a stylesheet with 100 rules, and that isn’t anything particularly exceptional. Because I’ve tried to group related rules together, it makes it easy to find what I’m looking for if I need to check or edit anything. If I’d just slapped those rules down any old how, I’d have driven myself mad long ago trying to track down what rules are doing what.

* in other words, if you have

p span {color:blue;}
span {color:red;}

then the first rule will win for anything in <p><span>, no matter which one comes first in the CSS. But if you have

p {color:blue;}
span {color:red;}

then whichever one comes second will win for <p><span>, because they both have equal ‘specificity’, or power.

3

Thanks Stevie,

Had to read that a few times but finally understood. :cool: