That ids and classes are CSS features. They're HTML features, for describing the semantics of the page content. It wasn't always wrong. Their purpose got subverted when web page construction got split between content authors and designers, and designers found that CSS provided no good hooks to hang their styles off.
Full-time web dev; JS lover since 2002; CSS fanatic. #CSSIsAwesome
I try to stay up with new web platform features. Web feature you don't understand? Tell me! I'll write an article!
He/him
Can't they be both? CSS is pretty tightly coupled with HTML; is it meaningful/useful to make a distinction about which language they "belong" to? For that matter, what use are classes strictly within HTML, with no reference to CSS or JS? While ids are used by ARIA attributes and in some special cases like <label for="id-of-input-field">, afaik classes don't serve any such purpose. But I love to learn, so am I wrong?
A few years ago I went through the HTML5 (then draft) spec and counted the uses of the id attribute. I found 11 (actually I found 12, but 1 was subsequently removed), only one of which was for use in coupling DOM elements to CSS. As well as Labels and Aria, there's coupling form controls to their forms, fragment identifiers in URLs, connecting table cells to their headers, and so on.
Classes have indeed fewer uses. But even so, besides CSS coupling, they are used in JavaScript via GetElementsByClassName() and querySelectorAll(). They're also used in microformats.
You've probably noticed that I refer to coupling to CSS. That's because I dispute the idea that HTML and CSS are tightly coupled. They're coupled entirely through Selectors (bar some special case behaviours in the overflow and background properties). But most relevant here is the use of id and classes in Selectors. And this is the point - if you look at recent Selectors specs, e.g. the Level 4 spec, they're not called "CSS Selectors", they're just "Selectors".
Selectors are designed to be the binding between DOM elements (for both HTML and XML documents) and other languages including both JavaScript and CSS. The Selectors spec even includes the snapshot profile which is specifically for non CSS uses. Only that non-CSS use contains the :has() pseudo-class.
So it is my contention that HTML and CSS declaration blocks are separate. Selectors provides the binding between the semantics world of HTML and the styling world of CSS, helping enforce the separation of concerns that inspired the invention of CSS, replacing the styling elements and attributes that were creeping into HTML. Selectors use id and classes, but so do other aspects of the web ecosystem. CSS uses Selectors but so does JavaScript.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
That ids and classes are CSS features. They're HTML features, for describing the semantics of the page content. It wasn't always wrong. Their purpose got subverted when web page construction got split between content authors and designers, and designers found that CSS provided no good hooks to hang their styles off.
Can't they be both? CSS is pretty tightly coupled with HTML; is it meaningful/useful to make a distinction about which language they "belong" to? For that matter, what use are classes strictly within HTML, with no reference to CSS or JS? While ids are used by ARIA attributes and in some special cases like
<label for="id-of-input-field">, afaik classes don't serve any such purpose. But I love to learn, so am I wrong?A few years ago I went through the HTML5 (then draft) spec and counted the uses of the id attribute. I found 11 (actually I found 12, but 1 was subsequently removed), only one of which was for use in coupling DOM elements to CSS. As well as Labels and Aria, there's coupling form controls to their forms, fragment identifiers in URLs, connecting table cells to their headers, and so on.
Classes have indeed fewer uses. But even so, besides CSS coupling, they are used in JavaScript via
GetElementsByClassName()andquerySelectorAll(). They're also used in microformats.You've probably noticed that I refer to coupling to CSS. That's because I dispute the idea that HTML and CSS are tightly coupled. They're coupled entirely through Selectors (bar some special case behaviours in the overflow and background properties). But most relevant here is the use of id and classes in Selectors. And this is the point - if you look at recent Selectors specs, e.g. the Level 4 spec, they're not called "CSS Selectors", they're just "Selectors".
Selectors are designed to be the binding between DOM elements (for both HTML and XML documents) and other languages including both JavaScript and CSS. The Selectors spec even includes the snapshot profile which is specifically for non CSS uses. Only that non-CSS use contains the
:has()pseudo-class.So it is my contention that HTML and CSS declaration blocks are separate. Selectors provides the binding between the semantics world of HTML and the styling world of CSS, helping enforce the separation of concerns that inspired the invention of CSS, replacing the styling elements and attributes that were creeping into HTML. Selectors use id and classes, but so do other aspects of the web ecosystem. CSS uses Selectors but so does JavaScript.