5 Steps to Write Better CSS Part II

Posted on by

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.

13 thoughts on “5 Steps to Write Better CSS Part II”

  1. 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.

  3. 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. 😉

  4. 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.

  5. 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 =-.

  6. 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 =-.

  7. 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 =-.

  9. 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.

Leave a Reply

Your email address will not be published. Required fields are marked *