<< Year of the Starving Pig? | Home | Dashes Vs Underscores In URLs >>

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!

Technorati tags: CSS, Tips

What others have said

Scott Muc Mar 15, 2007 10:52 AM

# re: Quick CSS Optimization Tip

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 Mar 15, 2007 11:45 AM

# re: Quick CSS Optimization Tip

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 Mar 15, 2007 11:49 AM

# re: Quick CSS Optimization Tip

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 Mar 15, 2007 11:55 AM

# re: Quick CSS Optimization Tip

@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 Mar 15, 2007 1:40 PM

# re: Quick CSS Optimization Tip

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 Mar 15, 2007 5:32 PM

# re: Quick CSS Optimization Tip

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

Filini Mar 16, 2007 7:43 AM

# re: Quick CSS Optimization Tip

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 Mar 21, 2007 9:43 PM

# re: Quick CSS Optimization Tip

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 05, 2008 12:25 AM

# Re

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

Ariane Jul 17, 2008 2:46 PM

# re: Quick CSS Optimization Tip

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 Nov 23, 2008 11:05 AM

# re: Quick CSS Optimization Tip

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.