> What goes in some people's mind when they come up with these ugly conventions and rules?
The earlier versions of the CSS spec had no double dash prefix sigil for custom properties.
You could just make up a value like: "bigger", "accent", etc...
The problem is that CSS needs to be able to add new properties overtime, and we don't want any name collisions with variable names that web developers have already taken.
So we need a sigil that only custom properties and that regular properties can't use.
- We can't use `$` because that would conflict with SCSS, and we wouldn't be able to use custom properties in the same file as scss variables
- We can't use any of the following symbols because they're already used in CSS itself: !@#.,%^&>~:?\|{}`()+*/"';
- We can't use `- We can't prefix with `-`, `_`, or `__` because developers have already used them in their files.
- That seems to leave just: `--` or something even weirder.
So `--` is longer but in the context of not breaking anything, it's the best option on the table.
-------------
Now we're in this unusual spot where custom properties are genuinely more useful then what came before (they're like scss vars but they can update live and cascade too!), but they're a little wordy.
Probably not for long though, the upgraded attr() function will remove a lot of the massive walls of definitions that too many design systems and methodologies are relying on, and the upcoming functions used with the conditionals (if, media, where, not etc...) will take that further.