Can I include a css definition in another css definition?

Question

So let's say I have the following in 'foo.css':

.border { border : solid 1px; }
#foo { color : #123; }
#bar { color : #a00; }

Now let's say that I have two divs I want borders for, so I do:

<div id="foo" class="border">Foo</div>
<div id="bar" class="border">Bar</div>

This works fine, but I find that when defining #foo and #bar in my css file, I would rather give them the characteristics of .border than give the div's the class, like so:

.border { border : solid 1px; }
#foo {
  <incantation to inherit from .border>
  color : #123;
}
#bar {
  <incantation to inherit from .border>
  color : #a00;
}

and then my html would just be:

<div id="foo">Foo</div>
<div id="bar">Bar</div>

Anybody know what that magic incantation is?

Answer 1

That is not supported by css. The best you can do is something like:

#foo, #bar, .border { border : solid 1px; }
#foo { color : #123; }
#bar { color : #a00; }

Answer 2

You might be interested in mixins with Sass. Sass lets you write css style sheets in a more efficient way, using tricks like this. Mixins let you define a group of attributes (say, to do with borders), and then include those attributes within certain css classes.

Answer 3

As Wsanville said, you can't use the class. But normal CSS inheritance does work - say if your html was

<div class="border">
    <div id="foo">
       hello
    </div>
    <div id="bar">
       world
    </div>
</div>

You could say

.border {border: 1px solid #f00;}
#foo {border:inherit;}

Which in some cases might be good enough

Answer 4

If you're looking to push your CSS further instead of using some of the tricks outlined in earlier posts, you should look into CSS Compilers. They take CSS-like code you've writen, usually CSS with a few tricks added in, and turn them into normal CSS for the web.

David Ziegler wrote about some of the cool featured CSS compilers offer:

• Variables - Good programmers don’t like to hardcode. In many cases you can avoid this in CSS by using good inheritence, but sometimes it’s unavoidable. With variables, changing your color scheme means updating one variable instead of 13 attributes.

• Math - This goes hand in hand with variables. Say your left column is 100px, your right column is 500px, and your wrapper div is 600px. Well, maybe you decide to change it to 960px. Wouldn’t it be awesome if the width of your columns adjusted automatically? The answer is yes.

• Nested Styles - This is probably the most important. CSS is flat, which means complex sites end up with CSS that is a pain to go through.

You can read about popular compilers in his blog post on the subject, or do some searching and find one that works best for you.