Garrett Murphey

Photoshop Plugin: Simple Sprites

Posted July 07, 2011 | Cascading Style Sheets, Plugins

I’ve been working on a site recently that’s needed a lot of pseudo sprites, and I was getting frustrated with creating sprite maps by hand, so I created simple Photoshop plugin that takes a directory of images and merges them into a CSS friendly sprite map.

Download the Plugin

I’ve added the plugin to GitHub, so download now and fork away!

My Ideal Cascading Style Sheet: Organization

Posted March 12, 2007 | Cascading Style Sheets, Random

I am not the most organized person and I’m not afraid to admit it. It’s one of the things that has drawn me to designing with HTML and programming with Javascript and PHP. With HTML things are designed to fit into a hierarchy of nested tags, and most programming languages are organized by functions and methods. There’s inherent organization. But one crucial piece of the web developer’s toolkit is missing syntactical design — that being Cascading Style Sheets (CSS).

Here’s how I write my most of my CSS now.

#menu ul {
 list-style: none;
 margin: 0;
 padding: 0;
}

#menu ul li {
 height: 1.2em;
 line-height: 1.2em;
}

#menu ul li a {
 color: #006699;
}

#menu ul li a.here {
 color: #999999;
}

Now that’s not very hard to read, but amongst hundreds, if not thousands, of other lines of CSS, it’s quite easy to lose track of those 18 lines. And I, being the unorganized designer I am, tend to throw lines of CSS in the middle rules that should otherwise be grouped together. And those relationships are quite important when we need to debug a design issue caused by a child inheriting styles from a parent. The CSS syntax really lends nothing to natural organization.

One way I’ve tried to become a more efficient with the current CSS model is through rule and style separation by files. For instance, I may create files like design.css, typography.css, etc. But then I run into scenarios where I can’t decide which files to keep certain rules in, since they may apply to both, and eventually that system collapses upon itself.

I’ve thought long and hard about how CSS can improve (and hopefully make us more productive). One idea is illustrated below.

#menu {
 ul {
  list-style: none;
  margin: 0;
  padding: 0;
  li {
   height: 1.2em;
   line-height: 1.2em;
  }
 }
 a {
  color: #06699;
  .here {
   color: #999999;
  }
 } 
}

As you can see, I’ve nested my styles within parents to show relationships more efficiently. Nothing can come between any of the rules for the #menu element.

Another way this solution could help is by making it much easier to collaborate. My colleagues rarely organize their CSS files exactly like mine, and when we’re trading these files back and forth, there’s a lot of time spent familiarizing ourselves with each other’s personal style. I’m not saying that a syntax like this would completely cut out a “familiarization period”, but it would definitely reduce it by creating a rule-grouping standard.

I’m curious to know how you think CSS could be made more efficient and cleaner. It’s definitely a subject I want to discuss more.