8 Simple and Useful CSS Tips
Here are some simple Tips you could implement in your CSS. If you are a starter in CSS, this is a must read article for you.
1. Structure
Follow the simple CSS Structure. This will help you the keep the CSS simple and doesn’t confuse you when you refer or make changes in future. In this way your CSS will be syntax-error free too.


2. Simplify
Keep the code simple. This would reduce the file size drastically.


3. Padding vs. Margin
Margin is a browsers worst companion. This is because it has got too many cross browser compatibility. So the only way to overcome this is to use Padding wherever possible.
4. Generalize
Generalize your code. Don’t define the same code in many places, instead define such attributes in a common class as in the example. Here color is defined as a common attribute.


5. Comments
Adding a simple line of comment is not going to burst your filesize. This will not only help you to understand the code. Others who see the CSS will understand better.

6. Validation
Always validate your CSS as you build it. This will help know where you have made an error. Also you will finally land up with a W3C Valid CSS Site.
http://jigsaw.w3.org/css-validator/
7. XHTML Styling
Try never to use styles in your XHTML code. This will not only increase your XHTML filesize, this will also mess up your code and complicate it.
8. Terminology
Use standard ID and Class names which literally describe the tag content instead of Codenames.




(3 votes, average: 3.33 out of 5)











LukasS Said:
May 7th, 2007 at 3:47 pm
You’re telling how to use CSS to save some code, but on the other hand you compress your simple graphic examples in jpeg, which is best used in complex images. You should use GIF more often in these kind of images, will save you bandwidth and loading times.
Mark Mc Said:
September 3rd, 2007 at 11:22 pm
Number 3 is incorrect. This is such a fine site I don’t want you guys to look bad. The Box Model is incorrect in IE. Padding and Borders are included in the width. So padding is only good for top and bottom padding and bad for left and right padding as it is included in the overall width by IE5&6. You should change number 3 accordingly. Check the Box Model Hack for more info.
df Admin Said:
September 4th, 2007 at 11:28 am
@Mark Mc - True. But I have created number of sites only using padding. You can play around to get the right layout.
I suggest this cos its pain to use the box model number of times in a site… (just my thought)