Factor[e] is now Parallel. Find out more at parallelmade.com

Everyone has their own way of working and I'm not foolish enough to think these tips are universal, but here are a few things I do/use all the time that I find make my job a little bit easier.

Break it up

Think of your content in chunks or blocks that can move around and be manipulated independantly of each other. Write your CSS the same way.

Object orient your CSS

The crux of this is to keep your CSS DRY. Look for patterns. Define repeating styles once. Don't use location specific styles if at all possible. Keep it simple.

Jump on the LESS or Sass train


Variables will make you life so much easier. Define that red colour you're using once. If the client wants to change it orange, just replace the value of the variable and you're done. No more find and replace.

	a { color: $red; }
	h1 { color: $red; }


Nesting makes things easier to read and find.

.banner {}
.banner .title {}
.banner .title a {}
.banner .title a:hover {}
.banner .title a:active {}

/* vs. */

.banner {
  .title {
    a {
      &:hover {}
      &:active {}


Mixins keep cumbersome CSS3 out of your stylesheet and make it easier to update. What if you want to change the rounded corners in the following example from 10px to 20px?

.box {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -webkit-background-clip: padding-box;
  background: $black;
  border-radius: 10px;
  color: $red;
  height: 30px;
  width: 100px;

/* vs. */

.box {
  background: $black; 
  color: $red;
  height: 30px;
  width: 100px;
  @include rounded(10px);

@mixin rounded($radius: 5px) {
  border-radius: $radius;
  -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
  -webkit-background-clip: padding-box;


Sprites are your fast little friends.

Minimize image use

While sprites can be fast, I try not to use images if I can use CSS. CSS is faster to load and it makes updating so much easier because you don't have to open photoshop or talk to a designer.

For example, that rounded button with the drop shadow and the inset click state? Easy.
Now what if the grey colour needs to change? Easy.

Note: If you are developing for a browser that doesn't support CSS3, sprites may be the way to go.

/* I threw a few mixins in to make it easier to read */
/* Also added a little padding style to make it look compressed on click */
.button {
  background: $grey;
  border  :1px solid $black;
  @include rounded(6px);
  @include box-shadow(0px, 0px, 10px, $black);
  &:active {
    padding:11px 10px 9px;
    @include box-shadow-inset(0px, 0px, 10px, $black);


Working with a designer? Talk to them. This isn't entirely a CSS tip, but it will make your life so much easier. Ensure you can do what they are asking. Make sure they know about all the cool stuff you can do.

And the list goes on...

As this is a blog post and not a book, I'll leave it there. Anyone have any other tips?

Share this post:

Let's Talk

We want to help businesses get where they want to go by developing one awesome website at a time. A customized website that is designed to meet your business’ needs is an integral aspect in achieving your goals and reaching your maximum potential.

factor[e] design initiative
The Empire Times Building
301-41 King William St.
Hamilton, Ontario L8R 1A2
Office hours:
Monday - FrIday: 9:00 am - 5:00 pm
Phone: 905 522 7894
Fax: 905 522 0060
Email: info@factore.ca
Get Directions
Thank you for sending your contact request!