css and js files: keep minimum bytes or use many spaces, tabs and new lines?

Which way is better:

1)

div#main {
    width: 100%;
    text-align: left;
}

2)

div#main{ //no whitespace before { sign
    width: 100%;
    text-align: left;
}

3)

div#main
{
    width: 100%;
    text-align: left;
}

4)

div#main {widt开发者_JAVA技巧h: 100%; text-align: left;}

5)

div#main {
width: 100%; //no tab or whitespaces before width: 100%;
text-align: left; //no tab or whitespaces before text-align: left;
}

?

The same question is about .js files. The reason I ask is the less spaces (1 byte), tabs(1 byte) and new lines (2 bytes), the less time it takes to upload it to the user's computer. As result, the web-site loads faster. Of course, 200 bytes is not so significant, but who cares what's in javascript file? I mean user prefers speed, not the correct design of javascript files he doesn't see...

As a professional, what would you recommend to a newbie about css and js files? php files are more clear, write php files the way any programmer is able to read them and modify if needed - with comments etc.

---

You should use a CSS Compressor and a JS Compressor and combine your files.

When writing, do whatever is easiest for you, but keep it consistent with Coding Standards.

---

I'd recommend to write what's the most readable, and then use some kind of compressor afterwards. I use YUI Compressor for CSS and Google Closure Compiler for JavaScript. If you really want to minify your page, you can also pngcrush all of your PNGs and minify your HTML/XML. (I haven't used any tool for HTML/XML minification, but tidy may do it.)

---

Go with what will be easiest for you to update in the future, that is, what you find the simplest to decipher.

If you are working with others, take into account how easy it will be for them to read and understand.

If necessary, you can always minify the files with something like this: http://code.google.com/p/minify/

---

Well obviously #3 (jk... that's all preference). If you really want to minimixe your footprint, put your js and css through a minifier

---

It's all up to you concerning the style type, but you should go with what is most readable in case others need to read your work. You shouldn't worry about spacing in a development environment. Once the file is ready for production, you should use a minifier to remove all white spaces.

Personally I prefer.

div#main {
    width : 100%;
    text-align : left;
}

---

You should ideally have two versions of the file. You will have a human readable version of the file in the development environment. And while you are deploying in production you should do so with a minified file. It's a good idea if you can automate the process of minifying and it should be present as part of your deployment script.