- From: Lea Verou via GitHub <sysbot+gh@w3.org>
- Date: Sat, 02 Mar 2024 18:57:06 +0000
- To: public-css-archive@w3.org
@romainmenke > I am strongly in favor of more powerful tools for attribute selectors but I do wonder if the use case is valid. > > Encoding a lot of key/value pairs in class names seems like the wrong approach. Is there a reason that frameworks like Tailwind, Bootstrap do not use attributes? > > Maybe because attributes are supposed to have a `data-` prefix, whereas classes are always user defined. The `data-` prefix makes them much more verbose. > > `pt-6` -> `[data-pt~="6"]` `<div class="pt-6">` => `<div data-pt="6">` > > Styling the commonalities then becomes trivial with `[data-pt]` I cannot speak on behalf of every author, but I suspect the reasons are multi-fold: 1. For certain things, classes feel more semantically appropriate. Basically, ask yourself why would you use classes over `data-` attributes (providing a value is not the only reason, since you can have boolean attributes!). The exact same reasons apply to these use cases. These are not just key-value pairs, they are opting in to a certain style AND parameterizing it. 3. Verbosity, yes. Using a `data-` attribute is 6 extra characters. For something as short as `pt-6`, that's 175% (!) more reading & typing. 4. In some cases the parameterization even evolves from a single class name. E.g. `columns`, with later variants `columns-3`, `columns-4` etc. The fact that authors are willing to go through the pain of currently using this pattern *instead* of using `data-` attributes where they could get this for free is a testament to how important this is to them. So the answer cannot just be *you’re doing it wrong*. That said, being able to target attributes based on a prefix of their *name* is also needed, though less frequently. @Crissov For some of these use cases, the weight of having to specify the mixin on all of these would produce *far* more code than having a separate base class. Consider e.g. Bootstrap Icons. They have over 2000 icons. The mixin approach would add 2000 * 13 = 26,000 characters to their CSS code. In contrast, their base `.bi` class is 4 declarations… -- GitHub Notification of comment by LeaVerou Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10001#issuecomment-1974878537 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Saturday, 2 March 2024 18:57:07 UTC