1

Let's say that I have a big project and that I'm going to customize an element many times within that project, so every time I need to go into CSS and declare that element by its id or class and start customization.

#elemen{...

So what if I had to change the id of that element, isn't going to be much easier if it was declared in CSS as a custom property which I can change easily any time I want.

I tried to do so as follow:

:root{
    --container: "container";
}

body #var(--container){...

But obviously, that doesn't work. Another thing I would really like if it was available is to use these custom properties as keys in anywhere at the CSS document so I could get more flexibility on dynamically changing key values such as @keyvalues as an example as the following:

@keyframes name{
0%{... }
var(--keyframe1){... }
var(--keyframe2){... }

So is this already possible in CSS or not yet and if not then is there any other way so we can go around it?

Tarek.hms
  • 1,243
  • 1
  • 10
  • 15
  • You posit having to change an ID of an element -- why though? IDs must be unique throughout the document for it to validate correctly. Thus, there should never be a **need** to change one. And why not simply set up various classes for your desired logic, and apply your variables to the classes? Then just switch out to the desired class on the element if you want to easily modify the element. – Obsidian Age Aug 16 '18 at 23:45
  • @ObsidianAge, The difference is that the class you have to declare it many times if you want to change any sub-elements within, so you might declare it hundreds of time and the only way to change it if you want to in the future is by using the editor replace all functionality, which is not really satisfying but it could handle the job :) – Tarek.hms Aug 16 '18 at 23:47
  • You should think about restructuring your CSS if it's that laborious to update the identifiers like that and you have "hundreds" of rules applied to any single id/class identifier – HorusKol Aug 16 '18 at 23:47
  • @HorusKol, that's why I'm only talking about really big projects. – Tarek.hms Aug 16 '18 at 23:48
  • I believe @HorusKol's advice was regardless of project size. – Tyler Roper Aug 16 '18 at 23:50
  • Project size shouldn't matter... in any event, there's global find/replace in any modern editor – HorusKol Aug 16 '18 at 23:50
  • @TylerRoper, that's true in principle, but with any change of your layout you might need some time to change some of its structure with keeping some of the styling properties, so then instead of manually adjust your CSS code you can simply change it from one place. – Tarek.hms Aug 16 '18 at 23:52
  • You should check SASS https://sass-lang.com/ or less http://lesscss.org/ – Raúl Martín Aug 17 '18 at 00:00
  • for sure this is impossible with CSS – Temani Afif Aug 17 '18 at 00:09
  • @TemaniAfif do you have any idea of how we can go around it for 'keyframes' it's really useful for dynamic timing in animation – Tarek.hms Aug 17 '18 at 00:11
  • 2
    your only way is to rely on SASS/LESS to generate the code, you cannot with pure CSS – Temani Afif Aug 17 '18 at 00:16
  • @Obsidian Age: What does an ID's uniqueness in a document have to do with changing the ID? You can rename an ID from #foo to #bar as long as #bar doesn't already exist and the element with that ID remains the only one. – BoltClock Aug 21 '18 at 10:27

0 Answers0