CSS why add whitespace before rules?

Question

CSS code formatting question: I have an old habit of adding a single space before the { starts a new CSS rule, like this:

body {
  font-size: 16px
}

the whitespaces like this one between body and { add up throughout the css.

Ideally, i'd prefer writing my rules like so (and thus saving whitespace):

body{
  font-size: 16px
}

Actually, I forget why I do that?

Note that I intentionally simplified the example here to show the whitespace. Of course there is no need to remove the space here from the file. But in real life projects with 2-3,000 rules, it might add up. Also, i presume that a single whitespace at that position will compress badly compared to the situation where it is removed.

I have long forgotten why I add that odd whitespace. Is it safe to remove? Which browser needed the whitespaces?

Answer 1

it is very safe to remove it. If you did minification of you CSS it would remove them anyway and its good practise to do minify your CSS because it uses less bandwidth to move the CSS.

Answer 2

CSS skips any whitespace just like most programming languages. The extra space between the rule and the opening brace makes it easier to read. Personally the body{ looks ugly.

Where you put whitespace is up to you in CSS but it helps to make it readable.

Would you rather this:

body{
text-align:center;
font-size:10pt;
}

Or this?

body {
  text-align: center;
  font-size: 10pt;
}

Answer 3

Some people to save space with css will put the rules on one line. This saves even more space as you don't have the new line characters and it's still quite readable.

body { font-size: 16px; font-weight: bold; }

Given that css is cached on most websites, even 2-3000 lines is not going to save you much space, and the performance increase will probably be negligible anyway.

EDIT: Changed most people to some people.

Answer 4

Yes you can delete the spaces, in fact if you really want to save bytes, you could delete the space in "font-size:16px" as well.

Having said that, most servers and browsers gzip web content over the wire anyway, so the actual space saving would be minimal, probably not worth the cost in readability.

Answer 5

body {

Looks nicer (at least I think so).

Don't think about saving a few bytes, no matter how you format your code you should run it through a css compression utility before deploying it. Depending on your development environment you might be able to automate this task.

You should also configure your http server to use gzip compression for css (which will save a lot more than the whitespace between body and {).

Answer 6

You probably add the space because it reads/looks better.

Is safe to remove, no browser cares about the spaces. Any CSS compressor/optimizer will remove all those spaces, line breaks, etc.

Nowadays is rare for people to hand optimize their css, my suggestion is that make your css readable and mantainable and afterwards use an compressor/optimizer like YUI.

http://developer.yahoo.com/yui/compressor/

Answer 7

Internet connections are fast. What kills you is the latency, sometimes a couple of seconds, while the server is waiting for your reply to make it across the net. The actual file transfer only takes a small fraction of the total time spent.

Given that a decent server setup will also send the css file gzipped I really don't think it'll make much difference in the greater scheme of things, considering all the other overheads involved. I'd stick with whatever looks best.

If the CSS file does get to the point where you think this would make a difference - as another poster said - minification is the way forwards. And don't forget a line break or tab takes as much space as a space.

Answer 8

I would actually prefer the third option:

class
{
    ...
}

I find it more readable in the case where you have a style that applies to several classes, like this:

classA,
classB,
classC
{
    ...
}

But of course, in the end it's all about personal preference. Write the code in a way that is easy to read, understand and maintain and use a minifier/compressor to optimize for performance in a production environment.

Answer 9

my favorite format is like so:

body{ margin:0;
      font-family:Verdana, Tahoma, Arial, sans-serif;
      padding:0;}

it just seems silly to me to create a new line only for the last '}' char. It still seems readable enough for me, but the downside is that not many CSS editors that try to auto format your CSS do it like that. I usually have to turn off CSS auto formatting or space it out manually.

Answer 10

if you have to worry about the number of unneeded spaces in a CSS file contributing to download bulk, you likely have additional issues brewing elsewhere ..

personally i always go for readability over worrying about these sorta things. i like spaces myself

Answer 11

Well I personally don't use white space on CSS at all and I don't find it hard to read, it is just a matter of getting used to it!