My Ideal Cascading Style Sheet: Organization
Posted on March 12, 2007 by Garrett MurpheyCascading 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 {
-
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.
One Response to
“My Ideal Cascading Style Sheet: Organization”
Hi!
Isn't that invalid css?
I'm sure organizing css and minimizing requests per page is a hot topic on large sites, where perfomance matters. So the more @imports you use the more requests and slower response times are expected. The only way solving this issues is to use a php stylesheet.
Which consists of this modules:
- code optimizing and compression
- css imports
- putting all css together into one compressed, gzipped and cached stylesheet and serving to the client.
This way you can still use your css files and forget the php file, while categorizing the css into modules like layout.css typography.css forms.css etc. without wasting requests with @imports.
PS: Dave Chapelle -> "Charly Murpheyyyyyyyy", hehe