• Article Written 
  • on 27.11.2009
  •  at 07:37 AM
  •  by admin

5 Steps to Write Better CSS Part II

This is the second part of 5 Steps to Write Better CSS. There are plenty of CSS tutorials are available on internet but the few tutorials are useful. In this tutorial you will find 5 steps to write better css code for your next website project. I hope you will enjoy this tutorial.

1. Keep CSS declarations in one line

you should always keep CSS declarations in one line, it helps in keeping your CSS file clean and smaller. It also helps to remove unwanted spaces and characters.

Good Code

[code lang="css"]
h2 {font-size:18px; color:#333333; background:#cccccc; }
[/code]

Bad Code

[code lang="css"]
h2 
{
 font-size:18px;
 color: #333333;
 background: #cccccc; 
}
[/code]

2. Combine Elements

One of the best way to save lines of code is by grouping selectors. There are some examples below of what I am referring to.

Good Code

[code lang="css"]
h1, h2, h3 {
font-family: Arial, Helvetica, sans-serif; color:#333;
 }
[/code]

Bad Code

[code lang="css"]
h1 {
font-family: Arial, Helvetica, sans-serif; color:#333; 
}
h2 {
font-family: Arial, Helvetica, sans-serif; color:#333;
 }
h3 {
font-family: Arial, Helvetica, sans-serif; color:#333;
 }
[/code]

3. Use “Margin” to Center Layout

Many beginners to CSS can’t figure out why you can’t simply use float: center to achieve that centered effect on block-level elements. If only it were that easy! Unfortunately, you’ll need to use.

Code

[code lang="css"]
#Container {
margin:0 auto; /* top, bottom - and left, right*/
width:xxxpx;
 }
[/code]

4. Comment your CSS

It’s a great idea to comment your code in sections. To add a comment, simply add /* behind the comment, and */ to close it, like so:

Code

[code lang="htmlstrict"]
/******** CODE START HERE ********/
[/code]

5. Use CSS Compress Tools

if you don’t want to waste your time in modifying your old style sheets you can simply use online css compress tools, it make your work in seconds.

check this online css compress tools…

Css Tidy

Clean Css

Css Optimiser

Flumpcakes Css optimizer

cssdrive Css Comperasor

W3C Css Validator


Conclusion

These are just some of the tips that help me to write better code. I hope that tutorial will also help you to write better and clean code. Apply these Tips to your current and next projects, and you will surely appreciate the efforts.

If You Think that tutorial can be more better , Please share with us. Comment us

if you would like to receive more tutorials from us, please consider subscribing to our feed by RSS or by email.

Promote Us

  • Add to Mixx!
Ace Hosting India

Tags: ,