Formatting CSS: Organization and Notes
There are several techniques you can start implementing to help avoid these issues.
1. Plan ahead
Planning ahead will save you a lot of headaches, but for some reason many people don’t believe that it is necessary unless you are creating some large project. This is totally untrue! Even for small projects, the sooner you start developing your own methods for keeping your structure consistent the better.
Just because you are working on a smaller project does not mean that you aren’t going to want to be able to make changes quickly, intuitively, and easily. In your planning, make short notes to help jog your memory next time you come back to the project.
If you plan out each project using the same methods, you will always be able to keep track of where you put those darn font styles. Following the same format (example: global, layout, fonts, extra styles) every time will make your life much easier in the long run.
2. Make notes
Taking notes in class may not be your greatest area in school, but it needs to become a strength in the way you write your code. It may be hard to remember at first, but after your 4th or 5th website with all different CSS styles you’ll start remembering.
How do you write a note in CSS? Easy! To open a note is /* and to close a note */
/* so this would be a note in CSS */Good types of notes to take would be: information regarding the next lines of CSS, such as what does it effect? What should be adjusted to make specific changes?
Try thinking ahead about changes you know you may want to make in the future, and either leave clues or try to answer those questions in the notes. Make it cross-editor friendly. If anybody else needs to edit the file it will be much easier for them if you write notes. Keep in mind that you don’t need to write whole novels, or write a note for every single command.
3. Follow the cascade
CSS stands for Cascading Style Sheets. Keep this in mind when you are formatting and organizing your CSS styles. A style at the bottom will take precedence over a style at the top. This is one of the main reasons it is so important to keep track of your styles and where you are contradicting previously set styles.
If you set all your p tags to be 12px, Verdana, with a margin of 10px at the top of your file, but you forgot and later added another p style changing the size to 10px, that means that the p fonts will be 10px. This is undesirable as it adds file size.
4. Small file size
The reason people love the web is because it is quick and practically instant. The larger your CSS file is, the longer it will take to load. Long load times are undesirable.
There are several ways to cut down on file size. One way is to use short-hand. For example instead of writing
p { font-family: Verdana, Arial, sans-serif; font-size: 12px; line-height: 20px; font-weight: bold; }You might write instead (using shorthand):
p { font: bold 12px/20px Verdana, Arial, sans-serif; }and it will accomplish the same effect in less than half the space. Using a program like Dreamweaver and setting the preferences to use shorthand is one way to learn, but by doing a little research on the web it isn’t too difficult to pick up. I’m sure there will be a whole tutorial on this site about it in the future.
Another way to keep down the file size is to be smart about writing notes. Writing a million wordy notes will greatly increase size. Instead of writing
/* this will style the fonts for the main content paragraphs */You could write
/* content fonts */One last way of shrinking file size is to be efficient. If you have a whole lot of tags that have at least one common style, put them together and apply that style to everything all at once. For instance if your p, h1, h2, and ul tags all of a margin of 10px, instead of listing each individually you could do the following:
p, h1, h2, ul { margin: 10px; }
