Using CSS For Better Coding
Kabir Bedi
Messy CSS is one of the most common complains developers have. And more often that not it is the result of a bad coding job that has been done. However, writing clean and manageable CSS is not a difficult job when you know how to go about things.
Here ares some tips that will helps you write slimmer and faster CSS and also ease the process of the same.
Be Organized
Organization is important in all the processes of the design and development procedure. Use a coherent structure instead of randomly specifying id's and classes. This subsequently helps the stylesheets to benefit from the style inheritance. Always specify your most generic forms before the non-generic ones so that your CSS can inherit attributes properly. This will make it much more easier to edit the CSS later on and make any changes there.
Specify the Credentials
Don't forget to assign the time, date and sign credentials for your CSS. Its important to let people know who wrote your CSS, the date when it was written and who can be contacted in case of any queries. This becomes especially useful when you design templates or themes.
Save Templates
When you finalize the structure of the CSS, remove all the non-generic elements and save the file as a CSS template that can be used afterwards also. In fact, you can save a number of templates as and when you create something different. For example, two-column layout, mobile, print etc. When you have saved templates you would not have to re-write each and every stylesheet. Instead, you can just make some changes on the template and customize them for use.
Use Naming Conventions
Instead of specifications like col-left and col-right, use some generic naming conventions using alpha, beta etc. This avoids any confusion in the HTML and makes it easier for you to alter the positions of the same. CSS allows for the separations of style from the content which further enables you to redesign an entire website just by modifying the CSS. This is why it is important to use versatile and consistent naming conventions.
Use Hyphens in place of Underscores
Older browsers don't render well when CSS contains underscores and don't support them either. Therefore, it is always better to use hyphens in order to gain some compatibility.
Avoid Repetition
Instead of specifying the styles again and again, learn to re-use the CSS attributes by grouping elements together. For example, if all your h1 and h2 elements have the same font size, colors and margins, it would be better ti group them using a comma instead of repeating it over and again.
Optimize further
When you have lightweight stylesheets, your website would load faster and also it would be easier to maintain and make updates. The most important thing while shrinking the size of stylesheets is trimming off whatever you don't need and them merging similar items under groups. Also, you can skip specifying a unit if measure when using 0. This is because zero is always zero by default irrespective of the unit of measure.
|
