Leaving out the last semicolon of a CSS block
- Is it good practice?
In my opinion, no. If you add a rule below the last rule, it's easy to forget to add the semicolon.
- Will it, on a large scale, result in better load times?
Can't imagine that it would make much of a difference in load time.
- Can it result in browsers 'breaking'?
No, semicolons are only required to separate rules in CSS blocks. Semicolons are delimiters, not terminators.
- Is the same true for the last function in Javascript (/jQuery)?
Yes, don't leave it up the JavaScript interpreter to add semicolons.
No, leaving out that semicolon will introduce a great amount of risk in your application, it will be all too easy to overlook adding it back if you add more styles to your element. At that point, you are relying on your manual processes and attention to detail to ensure you didn't accidentially misplace on of your non-semicolon lines. Worse yet, you would have to physically check your css file every time you were ready to go to production to make sure you didn't screw up any of the final style lines in each element.
Possibly, since the file would be smaller, but the difference should be negligible. If you are worried about load times, Gzipping your files before placing them on the server will serve you well.
Most browsers are smart enough to know what you mean, but you still have to worry about screwing up your CSS file by not being careful about the last style.
It will improve the loading time ever so slightly. With a large enough CSS file(s), it can even be noticeable (well, minification overall can be; I doubt just removing the final semicolon will ever be enough).
If you care that much about the loading times, however, you should be using a program to minify your CSS, not manually attempting to do it. Minified CSS is (all but) impossible to read. It's a bad practice to use this in the "source code" so to speak, because it's all too easy to forget it.
Is it good practice?
It's not good practice to manually exclude semicolons. This is purely because it's easy to overlook when adding more styles, especially if you're working in a team:
Imagine you start with:
.foo {
background-color: #F00;
color: #000 <-- missing semi-colon
}
And then someone adds some styles:
.foo {
background-color: #F00;
color: #000 <-- missing semi-colon
width: 30px;
z-index: 100;
}
Suddenly the other developer is wasting time figuring out why their width
declaration isn't working (or worse yet, doesn't notice that it's not working). It's safer to leave the semi-colons in.
Will it, on a large scale, result in better load times?
Most definitely, for every block, you'd save a couple of bytes. These add up, especially for large style sheets. Instead of worrying about these performance gains yourself, it's better to use a CSS compressor, such as the YUI Compressor to automatically remove the ending semi-colons for you.
Can it result in browsers 'breaking'?
No, it's safe, as browsers implement this part of the specification correctly. The CSS2 specification defines a declaration thusly:
A declaration is either empty or consists of a property name, followed by a colon (:), followed by a property value.
More importantly:
...multiple declarations for the same selector may be organized into semicolon (;) separated groups.
This means that ;
is used to separate multiple declarations, but it is not needed to terminate them.
Is the same true for the last function in JavaScript?
JavaScript is a whole different beast with a completely different specification. This particular question has been answered in depth many times before on Stack Overflow.