Subscribe To Our Blog

10 Nov / 2010 56 views

Best CSS Practices To Declutter Your CSS File

Posted by : Under : Web Design No Comments

A messy CSS is the last thing on earth that a website designer or developer would like to encounter. Numerous changes, sloppy coding etc may be the reasons behind this website design disaster. But what will happen if you have to deal with a clumsy CSS file whose code is as good as Hebrew. You will launch a tirade against it, wade through the jungle of incomprehensible codes and eventually come to the conclusion that you are unable to make it work. Since there is no shortcut route to having a clean, super-manageable CSS, you need work honestly and sincerely. Here we are going to share some CSS practices that can prove immensely effective to keep the codes under control:

Keep a Template Library
You can save a good amount of time by selecting a structure and then stripping out everything that is not generic and then save the file as CSS template that can be used later. Mobile, print, blog layout, two-column layout etc are some of the unique variations into which a CSS template can be saved. You can try Coda (an OSX editor) for performing this task. It is meaningless to rewrite the same code over and over again when the methodologies and the conventions are basically the same.

Make It Look Organized
You should not use id’s and classes in the CSS file haphazardly since it will lead to confusion. Try to feature generic items at the first of the CSS document and then you can use the rest of the other elements. Try to create a structure that is easy to understand and that does not conflict with logic.

Date, Sign and Title
This can come in handy when a developer has to make some changes in the CSS file but he/she has no idea where to start it after all. Try to add your name so that people can contact you if they have any problem with the file. You can leave the modification date and sign for the same purpose as well.

Use Hyphens
CSS with underscore elements are likely create serious problems with old browsers as most of them do not offer any support for them. To reduce the chances of falling prey to browser compatibility issue, you should make it a habit to use Hyphen as opposed to underscore.

Do Not Repeat
Try to reuse the existing attributes whenever possible rather than creating new styles over and over again. It will only increase complexities. Try to group same elements if possible.

Lightweight Style Sheets
You can trim down the size of the CSS file as it will help your website to load faster. A short style sheet means, you will not have to waste your time and effort while maintaining and updating your website.

Leave a Reply