blah blah blah CSS variables

Admittedly, it’s possible I’m missing something, but the talk about CSS variables/constants online sort of confuses me. I can see the utility they’d offer, but I kind of side with Bert Bos on a lot of his points about the trade-offs involved.

I’ve totally been there, trying to find the salmon color used in the header links on version 0.42 of a site that’s grown to encompass ten different stylesheets, unable to accurately pick the color from the image in the third-hand PDF, wishing it just had a simple name defined in the base stylesheet. However, at some point trying to remember the variable name is going to be only slightly easier than remembering the hex color. Moreover, you save no code. You’re just substituting one string for another, you’re redefining whatever you’re going to redefine, the fundamental processes we struggle with now become no simpler.

I’d like to see some sort of CSS micro-style instead of variables. I think this would answer a few of the points I’ve heard raised against variables, and would also save code and be more useful. I’m talking about extending the concept of inheritance so that we can invoke it programmatically instead of having to rely on an element’s position within the document. (Maybe something like this already exists. Maybe I’m an idiot. This is always possible, especially since this seems to me like the obvious thing to do.)

What I’m talking about is something like so:

// here's the variable
$specialNote { font-size: 12px; color: #333; padding: 5px; background-color: #eee; border: 1px solid #ccc; }
// here's its basic implementation
($specialNote) #mainContent p.specialNote { font-size: inherit; }
// here it's used somewhere completely unrelated, and we add only what differs
($specialNote) #rightSide dl.specialList dd span.specialNote { display: inline-block; }

I think that would be really cool.

Advertisements

0 Responses to “blah blah blah CSS variables”



  1. Leave a Comment

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s




RSS Recent posts on the live version of this blog

  • An error has occurred; the feed is probably down. Try again later.

%d bloggers like this: