Tag Archives: importRule

CSS 3 and where we shouldn’t be

Allowing dependencies between CSS rules really isn’t so different (with all the advantages and dangers) from using multiple classes on the same element.

<p class="highlight updated updatedByOthers">my paragraph text</p>

They’ve suggested importing rules into other rules, like so:

.highlight {
color: red;
text-decoration: underline;
}
.updated {
@importRule '.highlight';
background-color: yellow;
}
.updatedByOthers {
@importRule '.updated';
color: #3f5070; /* a nice dark blue */
}

Both can easily end in a rats nest of styles that each do only one thing and make your site unmaintainable. After all, it really isn’t that different from using inline styles or font tags.

If we started using the importRule technique, what happens if you need to use updatedByOthers class independently from the highlight class? The importRule solution would allow you to reorganize the dependencies without touching the HTML, but is it worth losing the independence of the two classes? Especially if they would then author even more CSS to achieve what we already can with a multi-class system:

.updatedByOthersNotHighlighted{}

Does that make anyone else’s stomach turn?

Variables would be lovely, but they can be achieved with some server-side CSS processing. Why add unnecessary complication to the CSS specification? I don’t think any truly viable justification for a massive overhaul of the CSS specification has been made here.

It amuses me that someone who says,

CSS 3 is a joke. A sad, sick joke being perpetrated by people who clearly don’t build actual web apps.

wouldn’t see the irony in suggesting,

Since we can’t reasonably expect IE to support things in a timely fashion, do we owe it to ourselves to start building apps for browsers that will give us what we want?

The emergence of CSS Frameworks doesn’t prove the necessity of a major overhaul of the CSS Spec. Rather it is indicative of the maturity of the medium. Java programmers don’t rewrite the math class every time they code a new application. If you are reinventing the wheel each time you write CSS, you’re doing it wrong.