CSS

The Basics

Grouping Properties

If you only need to modify the padding, margin, etc of a single side of an element, specify that side. If you need to do two or more, then using the shorthand property will server you well.

/* LONG CODE IS LONG */
padding-top:1px;
padding-right:2px;
padding-bottom:1px;
padding-left:2px;

/* BETTER */
padding:1px 2px 1px 2px;

/* BEST */
padding:1px 2px;

The same logic goes for “0″ values and hex values.

/* BAD */
padding:0px 10px;

/* GOOD */
padding:0 10px;

/* BAD */
color:#ffffff;

/* GOOD */
color:#fff;

Single vs. Multi-line and Spacing

Each developer has personal preferences when it comes to CSS markup. I’m firmly in the “single-line” camp and suggest you try it. Not only does it make your CSS much easier to scan, but it eliminates a lot of white-space that can affect file size. The only exception to this is when we get into the muck of vendor prefixes (more on that later). My recommended format is include whitespace between properties, but not between a property and its value. The reason for this is that it more closely associates a property and value visually.

/* Too much space */
.mystuff { margin: 10px; padding: 10px; }

/* This is what Goldie-locks would choose */
.mystuff { margin:10px; padding:10px; }

A good way to visually keep an element and its descendents visually together is to indent the descendents like so:

.article {}
  .article h1 {}
  .article h2 {}

Property Order

In order to maintain sanity in a single-line document, make sure you follow a specific order for your properties. My recommended order is:

  • float, display, position
  • width/height
  • margin/padding
  • borders
  • text
  • everything else
  • background

Vendor Prefixes

There’s an exception to everything in the world of code, and CSS in single-line format is no exception. With the advent of so many vendor prefixes, it makes a lot of sense to break into multi-line format when dealing with a lot of them. Take background gradients for instance. If you include all the vendor prefixes available, you could end up with as many as seven declarations. In this case, it makes sense to break lines:

background:#1e5799; /* Old browsers */
background:-moz-linear-gradient(top, #1e5799 0%, #7db9e8 100%); /* FF3.6+ */
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8));/* Chrome,Safari4+ */
background:-webkit-linear-gradient(top, #1e5799 0%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top, #1e5799 0%,#7db9e8 100%); /* Opera11.10+ */
background:-ms-linear-gradient(top, #1e5799 0%,#7db9e8 100%); /* IE10+ */
background:linear-gradient(top, #1e5799 0%,#7db9e8 100%); /* W3C */

If we were to put all of that in a single line, it would be a serious pain to maintain.

Comments

Comments are your friend when it comes to scanning a document quickly. Break-up major sections with a format style that is easy to spot such as :

/* NEWS ----------------------------------------------------*/

Within those sections, break up content with slightly less distracting comments:

/** Other Stuff Here **/

Reference and Resources