Quick CSS Optimization Tip

0 comments suggest edit

When you see the following in your CSS

div
{
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 10px;
  margin-left: 20px;
}

It makes sense to convert it to this.

div
{
  margin: 10px 20px;
}

It’s cleaner and takes up less space.

There are a lot of ways you can optimize your CSS in this way. I’m not talking about compression, but optimization.

Today, The Daily Blog Tips site linked to a website called CleanCSS that can perform many of these optimizations for you. For example, feed it the above CSS and it will make that conversion. Very nice!

Found a typo or error? Suggest an edit! If accepted, your contribution is listed automatically here.

Comments

avatar

14 responses

  1. Avatar for Scott Muc
    Scott Muc March 14th, 2007

    I always prefer using the margin: N E S W; (eg: margin: 10px 20px 0 20px;) format because you never no when you need to change any of them.

  2. Avatar for Ryan Smith
    Ryan Smith March 15th, 2007

    Well, that's nice and all, but do your really need the extra line break after the div?
    div {
    margin: 10px 20px;
    }
    Seems much cleaner to me. It always bugged me that VS tried to format my CSS like that by default.

  3. Avatar for jody
    jody March 15th, 2007

    For optimization purposes, I agree. For readability, I disagree: I can never remember what position the items in the list are for. Specifying "margin-top" is MUCH easier to understand.

  4. Avatar for Haacked
    Haacked March 15th, 2007

    @Ryan: Well that's just a matter of style. It's like C# bracket placement. Ideally, before I deploy my CSS, I'd run it through a CSS compressor.
    div{margin: 10px 20px;}
    @jody: Good point. It is more readable to specify margin-top. I hadn't considered that because it's kind of second nature for me. It works like a clock. Top Right Bottom Left.
    Just remember TRBL! (pronounced Treble)

  5. Avatar for Sean Chambers
    Sean Chambers March 15th, 2007

    A nice optimization I like is for colors:
    .myClass {
    color: #000000;
    }
    is the same as
    .myClass {
    color: #000;
    }
    If the characters is the same for all six, you can just define the first three.
    Only saves typing 3 characters though =(

  6. Avatar for engtech
    engtech March 15th, 2007

    I mentioned on Daniel's site as well, but CSSClean is just using CSSTidy on the backend. You can download it from: http://csstidy.sourceforge....

  7. Avatar for Filini
    Filini March 15th, 2007

    cleaner, maybe... but is it also more readable? if I send the "clean" CSS to a less experienced web developer, he won't probably remember if the 10px padding is Top or Left...

  8. Avatar for Ted Jardine
    Ted Jardine March 21st, 2007

    I use CSSClean all the time (especially with how VS always screws up my CSS formatting). Or yes, CSSTidy.
    As to "less experienced web developer": running the risk of sounding elitist, I would hope that they'd learn it pretty quick or else you have bigger problems (how hard is this basic CSS? Just remember top/bottom and left/right).

  9. Avatar for website design
    website design May 4th, 2008

    CSS optimization is the process of minimizing your markup and CSS files for maximum speed.

  10. Avatar for Ariane
    Ariane July 17th, 2008

    Im sorry but in the context of professional corporate large scale web projects legibility means squat and you better damn well know your shorthand properties or pick them up quick. You should be hand-coding optimized css, if you need to use a compressor you are wasting time putting in those extra returns and typing out full properties and time = money. =P
    .selector {margin:10px 20px; padding:10px;}
    This is how your code should be written from the start.

  11. Avatar for Lee
    Lee November 23rd, 2008

    Ariane,
    It's obvious by your English prose that you don't care about readability. Your message looks like a mobile phone text message from a little girl. (No apostrophes, commas, etc.) Readability matters. Let gzip compress my longhand CSS.

  12. Avatar for jhesqi
    jhesqi January 10th, 2009

    Thanks for the nice article. Will try to use CSS Tidy or Clean CSS and see if it works.

  13. Avatar for zahid
    zahid May 21st, 2010

    This is called shorthand of CSS . Its better to write comment before writing the code for margin or padding . :D

  14. Avatar for salma
    salma July 7th, 2011

    please send the tips of optimization of css