Leaving out the last semicolon of a CSS block

by

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.

More Related Contents:

  1. How I show div by scale effect and give her text
  2. jQuery Adding new option to select element doesn't pick up the string [closed]
  3. Slide down button to show text HTML CSS
  4. document .click function for touch device
  5. Bootstrap 3 Collapse show state with Chevron icon
  6. Add and remove a class on click using jQuery?
  7. css width: calc(100% -100px); alternative using jquery
  8. Number nested ordered lists in HTML
  9. How do you fade in/out a background color using jquery?
  10. Use jQuery/CSS to find the tallest of all elements [duplicate]
  11. How do I auto-hide placeholder text upon focus using css or jquery?
  12. Set width of a “Position: fixed” div relative to parent div
  13. How to make a hover effect for pseudo elements?
  14. What CSS3 selectors does jQuery really support, e.g. :nth-last-child()?
  15. How do I get a fixed position div to scroll horizontally with the content? Using jQuery
  16. jQuery override default validation error message display (Css) Popup/Tooltip like
  17. What is the simplest jQuery way to have a ‘position:fixed’ (always at top) div?
  18. Can I fade in a background image (CSS: background-image) with jQuery?
  19. Dynamically add a class to Bootstrap’s ‘popover’ container
  20. Getting the actual, floating-point width of an element
  21. Bootstrap 4 with remote Modal
  22. fancybox2 / fancybox causes page to to jump to the top
  23. Change CSS class properties with jQuery
  24. Animate an element’s width from 0 to 100%, with it and it’s wrapper being only as wide as they need to be, without a pre-set width, in CSS3 or jQuery
  25. Changing the child element’s CSS when the parent is hovered
  26. CSS for the “down arrow” on a element?
  27. Justify divs with CSS to fill width of parent container [duplicate]
  28. How to create a diagonal line within a table cell?
  29. Show/ Hide Table Column with colspan using jQuery
  30. CSS Transition Not Firing

Leave a Comment