Add comments

Do your future self a favor and add comments to your code so you know what the heck it does and why you put it there when you come back to tweak it 3 months or 3 years from now.

Anything in between /* and */ are comments.

CSS
/* Comments can be on their own line like this. */
.widget {
    text-align: center; /* Comments can be appended to any line. */
}

You can also "comment out" CSS rules to disable them without deleting them.

By line:

CSS
.widget {
    /* text-align: center; */
}

By section:

CSS
/*
.widget {
    text-align: center;
}
*/

If you're working with other people, consider adding your name and the date to comments so they know who to blame/thank later. 😉

Keep it organized

Do your future self another favor and organize your code. Group CSS rules by their purpose and comment liberally to make them easier to find and understand later.

State what it does in English (e.g. "make page heading larger") not how it does it (e.g. "increase font size").

CSS
/* ===== Theme adjustments ===== */

/* ----- Front page ----- */

/* Add a background to the main content area */
.home .content-area {...}

/* ----- Archive page ----- */

/* Increase the margin on the post archive page */
.archive .content-area {...}


/* ===== Plugin adjustments ===== */

/* Add a border to My Contact Form */
.contact-form {...}

/* Remove the border on My Facebook Widget */
.facebook-widget {...}

Indent well

Tabs or spaces? Two spaces or four? Pick one and be consistent. WordPress prefers tabs.

Like this:

CSS
p {
    color: #111;
    margin: 1em 0;
    padding: 0;
}

Not like this:

CSS
p {
color: #111;
margin: 1em 0;
padding: 0;
}
p {
  color: #111;
    margin: 1em 0;
padding: 0;
}

Maybe combine

When experimenting, it often makes sense to keep rules separate even if they all have the same property and value.

CSS
p {
    color: #111;
}
a {
    color: #111;
}
.contact-form {
    color: #111;
}

The final set of rules are often combined. Less code usually means easier maintenance.

CSS
p,
a,
.contact-form {
    color: #111;
}

Remember the cascade

The C in CSS stands for "cascading". Rules are applied from first to last and later rules can override earlier ones. That goes for stylesheets too. If two rules have the same specificity, the second one wins.

CSS
p {
    font-color: blue;
}
p {
    font-color: red;
}

Result? The paragraph will be red.


Disable all caching

To make sure you will see your custom CSS in action, disable caching while making modifications. In general, it's a good idea to disable caching during development or troubleshooting.

Steps

  1. Where to put custom CSS code
  2. Take care of your code — you are here
  3. Get familiar with the elements
  4. Examples for the Default template
  5. More examples on the way
  6. Resources for information and inspiration