Comment by rrgok

> 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 `<` because it could harm parsing performance.

- 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.

CSS isn't exactly a clean language. In my experience most projects are write-only... CSS just accumulates. It is rarely refactored or carefully designed. It is only occasionally mass deleted in redesigns and redone. Having a standard namespace pattern eliminates a lot of hierarchical issues, which is a very common issue with CSS.

Utility based libraries tend to avoid this these days and use simpler names, but those are also supposed to be your root libraries, not your custom CSS.

A single global namespace makes you start doing interesting and horrible things when you need to divide it.