Will CSS 3 Still Allow Omitting Final Semicolons

Will CSS 3 still allow omitting final semicolons?

Looks like there currently is an ambiguity in the spec.

You correctly pointed out that 2. Syntax Description section prescribes ending every rule with a semicolon:

Each declaration has a property name, followed by a colon and the property value, and finished with a semicolon.

And at the same time, description of the parsing automaton in section 3.6.8. Declaration-value mode reads that a closing brace without a semicolon correctly ends a declaration and current rule at the same time:

} token

Append the current declaration to the value of the current rule. Pop the current rule from the stack of open rules, and append it to the value of the new current rule. Switch to the current rule's content mode.

So according to 3.6.8 trailing semicolon is optional.

I can't say about actual intention of the specification authors. But current situation should probably be reported and fixed. Most certainly they don't have intention of breaking the compatibility with CSS 2.1 and will reword their Syntax Description section in the final version.

Leaving out the last semicolon of a CSS block

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.

Do you recommend using semicolons after every statement in JavaScript?

Yes, you should use semicolons after every statement in JavaScript.

Semicolon in CSS

True, it is not required, but I like to leave it in case I want to add any more attributes later. The page weight that it reduces by removing these is negligible.

Do we need semicolon at the end?

The concept is known as JavaScript Semicolon Insertion or "Automatic Semicolon Insertion". This blog post: JavaScript Semicolon Insertion: Everything you need to know (archived from the original) outlines the concept well in an understandable manner using examples under the headings:

• Where Semicolons are Allowed
• Where Semicolons May be Omitted
• The rules

It even digs into the official ECMAScript specification about the topic.

---

Related Topics