Is this a valid idea for a new CSS value;

HTML & CSS
1

While we have less or sass to set constants while creating css, would it be useful to be able to reference other elements in CSS itself. Like this


.myelement {
  border: 1px solid #333;
  color: border-color;
}

.myelement.variation {
  border-color: #faa;
}

So the text of the second markup would be red since it inherits a text color set to be “border color”

This would be for color values - you could simply state the other property. If a recursive loop is encountered the browser would set the color to black.

Thoughts?

2

You can put a second class on an element

<div class="myelement variation">

and reference it as you did:

.myelement.variation {
  border-color: #faa;
}

If the variation class is on a child element, it would be

.myelement .variation {
  border-color: #faa;
}

I may be missing something in the question, though. Could you give an example of where your idea would apply?

3

I know how to accomplish what I’m after in CSS 3. Typically, using Less, I’ll use variables to store all my key colors. Most of my designs have less than six.

The syntax I put forth above is theoretical. The question is, would it be useful? I’m thinking it might

For example this declaration could be used to set all border colors on the page to the color of the element’s text by default.

  • { border-color: color; }

In the above “color” is a reference to whatever value the color property is set to.

More specific selectors could assign a specific color to the elements affected by that selection.

4

[font=calibri]I’m struggling to see what the advantage would be of just setting

.myelement.variation {
  color: #faa;
  border-color: #faa;
}

given that the extra specificity would override any colour set on .myelement.

Yes, variables are a good idea, but there are easier ways to implement them than this.[/font]

5

It might be worth mentioning here that there are CSS variables on the [URL=“http://www.w3.org/TR/css-variables/”]horizon.

6

If a=b then it follows that b=a.

I very seldom say this… but in all honesty I feel this could be a case of over thinking.

If you have a general rule in which you want the border to be same color as the text you simply don’t declare the border color. What you have suggested actually adds more work to the current process.

.myelement {
border: 1px solid;
color: #333;
}

Yeah, but I want a variation…

IF you want the border NOT TO MATCH then you could do

.myelement.variation {
border-color: #abc; /* color will still be #333*/
}

IF you want TO MATCH then all you have to do is change the COLOR

.myelement.variation {
color: #abc;/* border-color will also be #abc*/
}

I understand the appeal, from “human thinking” a point of view , but it really does encourage a lack of discipline as it creates two distinct ways to arrive at the exact same solution ( and the current way doesn’t even have to worry about possible recursiveness)

CSS variables in general, however, would be cool. Then you could link values between unrelated properties, build easily updatable color pallets, etc.

7

While we have less or sass to set constants while creating css, would it be useful to be able to reference other elements in CSS itself.

I wonder if this would break with the whole idea of declarative language, just stating random things that all blindly apply to the element rather than knowing anything about the other. I think you’d want special syntax if you were going to do that.

I recently saw a talk about Shadow Dom. It’s like a DOM in a DOM. With the stylesheet of the outer DOM, you can refer to the parent element of the inner DOM using
@host

and when I saw this, I wondered if they were running out of keys on the keyboard they could use.