Friday, September 2, 2011

How to Write Better CSS in Easy Steps

A clean and proper CSS code can help create a website design faster and with more ease than when you are using tables. However, your first dig at CSS can be a little odd especially if you are comfortable using tables. Nevertheless, in the best interest of clean stylesheets and a more efficient output, here are 10 easy tips that will help you write better CSS:

1.    CSS Reset – is especially useful when you are writing the same code repeatedly to make your design displayable in different browsers. Using a CSS reset stylesheet would mean to build off browsers from zero and ensure your design is properly displayed in all browsers.

2.    Indent Always indent your CSS rules so that when you are writing more than 500 lines of CSS codes, you don’t need to sift through the file to find id’s and classes, and strain your eyes in the process.





3.    Comment These help keep your stylesheets structured. When you comment out blocks of codes, the scanning of classes and id’s become easier. Besides, when your clients go through your codes, they can change what they do not like without having to ask you.

4.    Keep it Clean Always code one rule in one line and multiple rules in multiple lines. That way, not only does your stylesheet look uncluttered, but also it’s easier for you to find items, and change them as required.

5.    Consistency This is not something you will notice as you work on a daily basis, but once you review your stylesheets, you will find a definite pattern you follow in the way you write specific lines of code. The idea is to maintain a single style of coding throughout your stylesheet, and those you will write in future, so editing becomes easier and takes less time.

6.    Separate the CSS hacks and conditional elements from your main stylesheet so their modification or editing can be done without affecting codes in your main style.css file.

7.    Shorthand Code Shorthand increases your speed of writing and also helps keep your stylesheet clean. Follow the clockwise format so each numeric value rightly corresponds to its quality.

8.    TOC A Table of Contents at the top of your stylesheet will allow you to easily find items in your code.

9.    Easy to Follow Names CSS id’s and classes should follow a proper naming structure so they are easy to understand.

10.    Alphabetical Order Following this in your CSS rules will make it remarkably easy for you to pick out specific lines to edit in your code. Haphazard alphabetization means you will have to scan you codes a while before you find a specific line and change it.

Website Design Hyderabad

Levonsys is leading Website Design and Development Company based in Allen, Texas and Hyderabad, India. Levonsys Services includes Website Design and Development, Web applications Development,Search Engine Optimization (SEO), Social Media Optimization (SMO)

No comments:

Post a Comment