Quick CSS Optimization Tip

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!

Comments

14 responses

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.

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.

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.

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)

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

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

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

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

website design • May 4th, 2008
CSS optimization is the process of minimizing your markup and CSS files for maximum speed.

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.

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.

jhesqi • January 10th, 2009
Thanks for the nice article. Will try to use CSS Tidy or Clean CSS and see if it works.

zahid • May 21st, 2010
This is called shorthand of CSS . Its better to write comment before writing the code for margin or padding . :D

salma • July 7th, 2011
please send the tips of optimization of css