5 Steps to Write Better CSS Part II, Css, Tutorials | Developers Paradise Blog by Ace Infoway India |

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


h2 {font-size:18px; color:#333333; background:#cccccc; }

Bad Code


h2 
{
 font-size:18px;
 color: #333333;
 background: #cccccc; 
}

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


h1, h2, h3 {
font-family: Arial, Helvetica, sans-serif; color:#333;
 }

Bad Code


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;
 }

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


#Container {
margin:0 auto; /* top, bottom - and left, right*/
width:xxxpx;
 }

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 START HERE ********/

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.

Filed under: Css, Tutorials by admin

Promote Us

Tags: Css ,Tutorials

if you enjoyed reading this article, please check out other related articles below:

Untitled Document

10 Comments

Revellsays on : November 27th, 2009 at 9:05 am Said:

Hi,

First of all, nice article! There aren’t many articles that address the writing style of CSS. I do have some thoughts on the first point though. In my opinion it’s better to use the long writing style while developing and have a script “minify” your CSS when using it on a live environment.
Davesays on : November 27th, 2009 at 10:06 am Said:

I completely disagree with point 1. When you’ve got 3 declarations, 1 line of code is great, but when there are 6 or 7, it gets really difficult to read.

All that to save maybe 1KB? I don’t get it.

Other than that one, some decent ideas here.
Dave´s last blog ..2 more must-have CMS enabling plugins for WordPress
Nicolo' Fascesays on : November 27th, 2009 at 10:34 am Said:

I agree with Dave, the point 1 is wrong, simply because if you work on a team it’s very difficult to read a one line code.

You should also write the code in alphabetical order for the same purpose.
E.J. Semeijnsays on : November 27th, 2009 at 10:57 am Said:

Why do we stop posting these tips? Internet is already full of these basics tips. And I also disagree with #1. It doesn’t make your code easier to understand, it just makes it more difficult.

My tips would be to put the page structure in your CSS, make sections for RESET, HEADINGS, FORMS, HTML ELEMENTS, FONTS etc. That way your CSS will be easier to understand.
safetycopysays on : November 27th, 2009 at 9:38 pm Said:

I agree with several other people’s comments - point 1’s example of bad code is not bad code - it’s just an alternate style. This post would only be useful to complete newbies and we don’t want to start teaching them bad assumptions already!
safetycopy´s last blog ..Photo
Joshsays on : November 29th, 2009 at 4:38 am Said:

I do all of these except the last one. I don’t find it useful to compress my css, but unlike all of the previous readers I strongly agree on point #1. I just started writing my CSS in one line and it’s been tremendous. The scrolling has been far reduced. I guess this is a personal preference. Something that helps is that the editor I use wraps the code down to the next line so there is no horizontal scrolling.
Josh´s last blog ..Addicted to Flickr
FAQPALsays on : November 29th, 2009 at 4:06 pm Said:

Good beginner tips, I do not minify my CSS either, perhaps a much larger project would benefit from minifying, but the average site doesn’t really need to.

As far as #1 goes, I think the wording is what is throwing people off, instead of saying, “Bad Code”, perhaps it should say like safetycopy has suggested, “Alternate Code”.
FAQPAL´s last blog ..Bubble Effect with CSS
favSHAREsays on : November 30th, 2009 at 12:49 am Said:

This article has been shared on favSHARE.net. Go and vote it!
favSHARE´s last blog ..25 Web Layout Tutorials
Jean-Patrick Smithsays on : December 11th, 2009 at 11:15 am Said:

I usually create a PHP file that includes all my css files, minifies it, and adds compression + expires headers.

That way I don’t have to agree with point #1…

What’s more important than having all your CSS on one line is reducing the number of HTTP calls with CSS sprites and combining all your CSS/JS into one file.
SmashDesignsays on : January 8th, 2010 at 4:26 pm Said:

Great toturial

Thanks a lot
SmashDesign´s last blog ..How to display HTML , CSS, Scripts code in your Blogger posts ?