CSS * Linking a class definition to another

[b4u]

Hi,

I'm looking into a way of doing this in CSS:


.someClass {
background-color: red;
}

.anotherClass, .someClass {
width: 200px;
}

.otherClass {
* Make a "Link" to .SomeClass definitions *
}



The result:

If I apply "otherClass", it will gather it's info from the above definitions, meaning it will end being something like:


.otherClass {
background-color: red;
width: 200px;
}



Is it possible?

 

[screw3d]

There's something like background-color: inherit; but that'll require you to set .otherClass as a child of .someClass and/or .anotherClass.

I'm not really sure where you're going with this though

 

[kamper]

Originally posted by: screw3d
I'm not really sure where you're going with this though

This is something that I've always wondered why you couldn't do as well. The idea would be to group a set of style parameters so that you can quickly assign them to a specific class with one line.

I think the answer is just to add ".otherClass" to the blocks that contain the styles you need. Seems a little bit messier, but it's just a very different paradigm than the object oriented programming that most of us are used to.

 

[stndn]

i don't think there is a way to do that with CSS. well, at least none that i know of....

However, there are two options you can do:

1. in your html, instead of using class="otherClass", just use both the classes you wanted to be inherited. Something like class="someClass anotherClass"

2. Dynamically generate the content of 'otherClass' via server-side or client-side scripting, although i think this solution is more troublesome than helpful

 

[kamper]

Originally posted by: stndn
1. in your html, instead of using class="otherClass", just use both the classes you wanted to be inherited. Something like class="someClass anotherClass"

That's called mixing content with presentation

 

[b4u]

Originally posted by: kamper
I think the answer is just to add ".otherClass" to the blocks that contain the styles you need. Seems a little bit messier, but it's just a very different paradigm than the object oriented programming that most of us are used to.

That's the problem ... make a mess out of code ...

Originally posted by: screw3d
There's something like background-color: inherit; but that'll require you to set .otherClass as a child of .someClass and/or .anotherClass.

I'm not really sure where you're going with this though

The problem is that I have custom components made, which apply their classes, so I cannot change their coding (I'm not interested in doing that, although I was the developer).

Now for a specific need, I need to apply some different styles. It would be fairly easy to do the following:
.someClass, .otherClass {
background-color: red;
}

.anotherClass, .someClass, .otherClass {
width: 200px;
}

It would be quite easy to maintain this approach with these 3 classes ... but we're talking about potentially hundreds more classes. On top of that, if one day someone decides to extend ".someClass" definitions, I will miss the changes, and this makes it some hard code to maintain. Example, someone can add:

.someClass {
height: 50px;
}

And ".otherClass" will not get these settings.

That's the problem ... that's why I would prefer to have "link" option.

My only hope was CSS2 would allow it.

 

[kamper]

This is a little radical, and I'm not sure I completely understand the situation, but ideally you could change the way components render their css. Instead of building a string and spitting it out, tell the rendering system you want such-and-such elements under a certain name (give the rendering system some css brains). Another component can come along and say "I want the same style as that component" and the renderer can just insert the class name in that block.