Leaving out the last semicolon of a CSS block

Question

Couple of questions concerning this:

• Is it good practice?
• Will it, on a large scale, result in better load times?
• Can it result in browsers 'breaking'?
• Is the same true for the last function in Javascript (/jQuery)?

What I mean is stuff like this:

#myElement {
  position: absolute;
  top: 0;
  left: 0
}

Answer 1

Is it good practice?

It's not good practice to manually exclude semi-colons. 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 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 are 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.

Answer 2

This is a duplicate question. See here:

Semicolon in CSS

Regarding applying a semi-colon in JavaScript, functions should not end with semicolons unless they are assigned declaratively, viz. var a = function() {}; However, browsers perform automatic semi-colon insertion if you inadvertently (or purposely) leave them out.

Answer 3

• 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 the JavaScript interpreter to add semicolons.

Answer 4

For CSS, I tried this out on IE9, FF, GC, Safari, and Opera, and it didn't make a difference.

As for Javascript, I got an error on FF and GC, so I would say don't do this on scripts. As for load time, the difference will not be in any way noticeable.

Answer 5

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

Answer 6

Is it good practice?

I'd shy away from it as a smart minification process will handle this for you and it'd introduce errors if you forgot to place the semi-colon when adding new definitions.

Will it, on a large scale, result in better load times?

Yes, smaller file size. Though, the difference is negligible and minification processes will automatically do this.

Can it result in browsers 'breaking'?

No

Is the same true for the last function in Javascript (/jQuery)?

No, it'd be "invalid" to exclude semi-colons at the end of a function statement.