TIL: Don’t use GUIDs as HTML IDs

02-16-2021 - 0 minutes, 46 seconds - Web

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 my GUIDS work as IDs for HTML tags, sometimes not. Today I learned why.

According to the CSS 2.1 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 old CSS 2.1 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.

Please read more about that at code.fitness (from where I also perkily borrowed the code example)

Previous Post