-1

It sounds like this is something that sass/less/mixins/jquery are required for right now.

What I'm looking to do is something like this:

.myClass {
    color: blue;
}

h1 {
    class: myClass;
}

I'm curious why this was not done already, given that CSS seems to be about inheritance/aggregation if nothing else.

Does it not make sense for some reason?

Or maybe it's just too complex?

Thanks!

...I don't know if this is the first '@extend' proposal, but it comes out because of its popularity in sass, apparently: http://tabatkins.github.io/specs/css-extend-rule/

and there is an early discussion of the proposal in this list thread: https://lists.w3.org/Archives/Public/public-houdini/2015Jan/0005.html

Peter Smith
  • 534
  • 2
  • 8
  • 19
  • 1
    Does this answer your question? [Is it possible to reference one CSS rule within another?](https://stackoverflow.com/questions/4060405/is-it-possible-to-reference-one-css-rule-within-another) – Charlie May 01 '21 at 08:41
  • It does seem to answer a part of it, but not the core question -- which is, 'Is this feature coming in the new CSS?' I was not 100% certain it could not be done without scripting, so your referenced question answers that part. The reason I ask is because, like other folks asking, it just seems like this is behavior/functionality that most of us would naturally want, and even expect, to have out of the box. Not a complaint - was just hoping to get some of the background on why CSS works like this. – Peter Smith May 01 '21 at 08:58
  • 1
    You'll want to give your question a less speculative title. Speculative questions about the development of web standards are off-topic, and the actual question you're asking is about the existing design philosophy of CSS, which is right on the borderline but at least *somewhat* answerable with references (if they exist). – BoltClock May 01 '21 at 17:53
  • i'm assuming changing the title now will make it completely discombobulated, but i'll try it anyways. – Peter Smith May 02 '21 at 04:30
  • 1
    Looks better. I'm still cautious as your question is sitting on 2 close votes and may well receive a third. It's still somewhat opinion-based - only a WG member would be able to provide an authoritative answer from *their* perspective. As to why it wasn't in CSS to begin with, honestly, I just doubt they really thought about this until Sass came along. Things were simpler back then. – BoltClock May 02 '21 at 05:00

2 Answers2

1

Not sure if it is going to be a future CSS standard. But you can already do it with SASS and SCSS. Here is SCSS syntax:

.myClass {
    color: blue;
}

h1 {
    @extend .myClass;
    ...
}

Documentation: https://sass-lang.com/documentation/at-rules/extend

Charlie
  • 22,886
  • 11
  • 59
  • 90
0

Well, in effect what you are trying to do is to make your CSS properties defined in the .myClass block, apply in your h1 block, (correct me if I'm wrong).

If that's what you meant, you can already do that by simply adding myClass to your h1 tag like <h1 class="myClass">Header</h1> and in your CSS you would do this:

.myClass {
  color: blue;
}

// or

h1.myClass {
  color: blue; // To only target h1 that have the 'myClass' class
}

Will future CSS standard allow applying classes to elements in a style declaration?

Well as you can see we can already do that with HTML, so I doubt it.

geauser
  • 1,005
  • 8
  • 20
  • The idea is to not have to redeclare the style attributes -- in this case, 'color:blue;'. – Peter Smith May 01 '21 at 08:36
  • 1
    Well you only declare the `color: blue;` property once here, all you have to do after is putting your css class where you need them. But maybe I got your question wrong... – geauser May 01 '21 at 08:41
  • i think you got the gist of my question correct, but imagine a more complex example. i have 10 classes defined, called myClass1, myClass2, etc. I would like to be able to assign all those classes to my 'h1' elements by doing something like `h1{.myClass1 .myClass2 .myClass3}` -- and that's it. Each of those classes can have 1-100 rules. – Peter Smith May 01 '21 at 09:06
  • So you're not talking about having the same behavior as @extend? Because otherwise if I understand it right, you're proposing to have the same feature as `

     – geauser May 01 '21 at 09:16
  • yep, same behavior as @extend -- just without any extra tools like sass, less, etc. – Peter Smith May 01 '21 at 10:02