CSS Classes Within Classes

You know what would be awesome? This:

.text-right { text-align: right; }
.sidebar-text { font-size: 1.2em; include: text-right; }

See what I did there? Now, how is that helpful? I mean, it would surely be just as easy to type text-align: right rather than include: text-right. Where I think it’s helpful is in dealing with things like this:

.rounded-1em {
              -moz-border-radius: 1em;
              -webkit-border-radius: 1em;
}
.rounded-right-1em {
              -moz-border-radius-topright: 1em;
              -webkit-border-top-right-radius: 1em;
              -moz-border-radius-bottomright : 1em;
              -webkit-border-bottom-right-radius: 1em;
}

If all you wanted to do was round one side of a box (which I do, actually) do you really want to type all that out? What if that’s your site’s motif? Do you want to type that out for your content box, your headings, your subheadings and all the other elements that need it? You could set up a bunch of rounded corner classes with names like .rounded-right-1em, .rounded-right-2em, .rounded-left-1em, etc. All your other classes or IDs would be simpler to edit down the road. And, okay, I know – copy and paste, right? But come on, that’s not exactly the most elegant solution.

In most programming languages, you can nest functions within functions. This is kinda like that. Being far from an expert, if there this kind of functionality is already available in CSS (or if there’s a suitable workaround), I’d love to hear about it – please let me know in the comments!

Spread it around!

Comments

  1. Brian Arnold says:

    There's a lot of pushback on the idea of doing things like this (or things like adding variables, so one could declare a color and reuse that over and over) because it makes CSS more like a programming language, which it isn't.

    However, both Sass ( http://sass-lang.com/ ) and LESS ( http://lesscss.org/ ) are kind of like workarounds. Both have Ruby implementations but I've played a bit with a version of Sass for server-side JavaScript and rather liked it. Both have the concept of inclusion of parts like you want, and both refer to them as mixins.

    Both also support variables and things like nested declaration, so you can easily specify sub-styles on elements within the one.

    Having not used either, I kind of like the feel of Sass's SCSS format, which is basically just a superset of CSS3 with all of the other stuff going on. Raw Sass does away with semicolons and such, which is elegant in a way, but I like that SCSS looks like CSS, just with a bit more going on in how it gets interpreted.

  2. From a certain point of view, declaring a variable is more or less exactly what I did, isn't it? Huh. That didn't really occur to me when I was thinking about it earlier. You're right of course, that CSS isn't a programming language… so maybe I'm overthinking it a bit. But you know, if they would just finalize CSS3 already, none of this would matter! Come on, give me border-radius, would ya???

    I'll definitely check out Sass and LESS, sounds interesting!

Previous post:

Next post: