TIL: Do not use GUIDS as HTML-IDs

TIL. abbreviation for today I learned
used in writing, for example on social media, before giving interesting new information

It is not logical at all at first sight. Sometimes GUIDS work as IDs for html tags, sometimes not. Today I learned why.

According to the CSS ID selector specification : In CSS, idenfiers […] cannot not start with a digit, two hyphens or a hyphen followed by a digit.

And it seems that querySelector uses the CSS specification and not the HTML5 specification.

document.querySelector ('#foo'); // returns null
document.querySelector ('#123'); // throws a DOMException, not a valid selector

Since guids are hexadecimal, they can start with any digit/letter between 0-F, while 0-9 are invalid and A-F are valid. Bad odds. For me, the Solution to this was to use a prefix for the ids.

You can read more about that at code.fitness (from where I also perkily “borrowed” the code example)