Question

Say I have two classes in my CSS, say .classA{} and .classB{}, and I’ve defined and tailored classA to however I like it. Now I’d like classB to be mostly like classA, with a couple of changes. Since they will be used separately (i.e., A is not the parent of B), B won’t inherit properties from A in the layout. Can I do something like

.classB{
    from .classA inherit *
    some additional changes
}

while writing the CSS, which will avoid having to copy/paste and also ensure that if I were to change A sometime later, B changes automatically and I don’t have to keep track of it.

Answer 1

CSS has no concept of variables to allow for the adjusting of one CSS measurement to influence others automatically. However, there are CSS writing systems that allow for variables (that are then ‘compiled’ and spit out plain CSS). Those are useful, but require use of the particular framework. (one example: http://lesscss.org/ )

If you are using a server side scripting language such as PHP, you could write your CSS files as PHP files, using variables within.

Barring that, I’d use multiple classes:

.sharedStyles {...the styles to be the same on elements}
.uniqueStylesA {...}
.uniqueStylesB {...}

Then apply as such:

<div class="sharedStyles uniqueStylesA">...</div>
<div class="sharedStyles uniqueStylesB">...</div>

Or…if you can nest in your HTML:

<div class="sharedStyles">
    <div class="uniqueStylesA">...</div>
    <div class="uniqueStylesB">...</div>
</div>