Organizing Your CSS
I think that it's too often when I visit sites and their premade layouts are poorly organized. I'm guessing that the people they were intended for wouldn't
give a care on how the actual coding looked, just as long as the coding worked. Now when I see the unorganized coding, CSS in particular, I wonder if the
webmaster/mistress has the same form of jumbled mess.
So this is a little snippet of an example on how one's CSS would look without radical organization.
textarea{ color:#000000; border:1px dashed #FFFFFF; text-transform:lowercase; background-color:#F3F3F3; height:25px; width:100px;}
See what I mean? What an eyesore... But we can fix this! Yes, we can. All you need to do is remember this one little guidance rule: Seperate at the {, ;, and }. Don't quite get what I mean? Well for instance, let's take the first part of our CSS into our lair...
I've hilighted all of the parts where you should divide the coding; so first let's look at the sloppy version;
textarea{ color:#000000; border:1px dashed #FFFFFF; text-transform:lowercase; background-color:#F3F3F3; height:25px;width:100px; }
And now we have our organized version. Remember, Seperate at the {, ;, and }!
textarea{
color:#000000;
border:1px dashed #FFFFFF;
text-transform:lowercase;
background-color:#F3F3F3;
height:25px;
width:100px;
}
And what's the use of changing the organization of my CSS? Well, the most important is probably the fact that you'll easily be able to edit your CSS without
having to use your horizontal scrollbar, and also that you'd know exactally where to find it. For instance if you're using notepad it'll be a lot easier
to find the problem spots that a HTML Validator has pushed up.
Good luck with your organizing. ;D