On the Floor

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

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.

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

Nesting

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

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

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;
  padding:10px;
  @include rounded(6px);
  @include box-shadow(0px, 0px, 10px, $black);
  &:active {
    padding:11px 10px 9px;
    @include box-shadow-inset(0px, 0px, 10px, $black);
  }
}

Communicate

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?