I’ll still be hosting and supporting the plugin here for any of you that like to go straight to the source, but I’m hoping it will be easier to find and discover by other WordPress users over on the plugin site.

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

#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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

#menu {
	ul {
		list-style: none;
		margin: 0;
		padding: 0;
		li {
			height: 1.2em;
			line-height: 1.2em;
		}
	}
	a {
		color: #06699;
		.here {
			height: #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.