Formatting css
CSS may be formatted in a number of ways and all of them seem to have their problems. The most popular way is to have a style on each line:
#some_div {
border: 1px solid #111111;
background: #eeeeee;
padding: 5px;
}
#another_div {
height: 34px;
width: 52px;
font-weight: bold;
font-size: 1.2em;
}
The biggest problem with the above format is that the CSS files become large, usually a few hundred lines, if not more. Scrolling up and down in the CSS file is a pain. You could do a quick search for class and id names instead, but this also can become annoying.
An alternative approach is to lay the styles all along 1 line:
#some_div { border:1px solid #111111; background:#eeeeee; padding:5px; }
#another_div { height:34px; width:52px; font-weight:bold; font-size:1.2em; }
This rectifies the scrolling problem but creates another. The styles are hard to read. Skimming over each line will not help you out and you become annoyed once more. There doesn't seem to be another approach that solves both problems, but there is a trick that will help out. I format all my CSS this way and after a while I realised it became a lot easier to skim over and find the styles I needed to edit.
#some_div { background:#eeeeee; border:1px solid #1111111; padding:5px; }
#another_div { font-size:1.2em; font-weight:bold; height:34px; width:52px; }
Place styles in alphabetical order. After a day or two of reading styles in that order you will skim over your formatted CSS and find what you need very quickly. Each time I add or edit a style, my eyes move to the correct place each time.