Tachyons – A CSS Toolkit

Re:Tachyons – A CSS Toolkit by CSSer on Wednesday July 19, 2023 @09:56AM (#36786419)

I have no idea what "invalid per the CSS spec" is supposed to mean but if you need a selector add one.

[ Parent | on HN ]

Re:Tachyons – A CSS Toolkit by WhatWorkingOn on Wednesday July 19, 2023 @10:02AM (#36786505)

Invalid per the CSS spec is pretty self explanatory. There is a common CSS spec used by the JS engine and web browser. When the class used does not comply to that defined standard, the class is invalid.

You can see this when trying to trying to use querySelector with responsive:property-[arbitrary] classes (I think, or it might be a different pattern of which I'd have to go back and check) and other cases where the JS engine will throw an error for trying to use a class Tailwind encourages you to write.

[ Parent | on HN ]

Re:Tachyons – A CSS Toolkit by CSSer on Wednesday July 19, 2023 @10:44AM (#36787261)

Okay, but I struggle to see how this has a meaningful impact given that you can simply just add a different class to use when selecting with JS.

[ Parent | on HN ]

Re:Tachyons – A CSS Toolkit by dspillett on Wednesday July 19, 2023 @11:33AM (#36788101)

Perhaps because that would be wasteful if what you want to select already has a class that identifies all the elements you want and only the elements you want? Adding an extra class for your JS might mean adding it in several places around your work too, not just in a single template. Why define .things-to-select-when-I-look-for-red-things when .red-things already exists and could do the job?

There is also the matter of separation of concerns, not wanting to add classes specifically for particular bits of code where possible to avoid it, but given the sea of classes generated by frameworks these days I'm not sure that is an ideal which is much followed ATM.

[ Parent | on HN ]

Re:Tachyons – A CSS Toolkit by CSSer on Wednesday July 19, 2023 @01:40PM (#36790249)

It’s a fair thought, and it’s interesting you mention that. I do think of it as separating concerns. I think of CSS for styles and JS for dynamism that can’t be achieved out of the box. Classes are only attributes, after all. Hypothetically, if you remove the JS-dependent class it doesn’t break any styles (unless of course, you’re using JS to apply styles, which is another conversation). That being said, if someone still felt strongly I’d concede this is subjective and only relevant to developer experience.

I think you touched on an objective subjective, however, if you were alluding to performance. Classes are generally free and cheap. I’d be very interested in evidence to the contrary if anyone could share.

My last, somewhat random, thought is that it does indeed seem that who likes TW and who doesn’t does seem to depend a lot on the stack they’re thinking of when they mull over its (de)merits.

[ Parent | on HN ]

Re:Tachyons – A CSS Toolkit by dspillett on Thursday July 20, 2023 @06:35AM (#36798760)

> if you were alluding to performance

It isn't as much about performance (the small amount of extra network transfer is likely to be brought close to zero if compression is used, the extra CPU load might be measurable on low-spec devices but on top of all the junk already in sites using heavy frameworks this is not going to make/break anything) as maintainability. You have something extra to make sure is set everywhere it needs to be.

[ Parent | on HN ]

Re:Tachyons – A CSS Toolkit by kid64 on Wednesday July 19, 2023 @11:10AM (#36787756)

No. As of 2022[1], the CSS spec defines a class-name (in a .css rule's selector) as "." + ident, and the lexical scanner rules for ident specifially allow any character outside of 0x00-0x7F in a class name after an initial [_A-Za-z] character.

[1] https://www.w3.org/TR/selectors-3/#w3cselgrammar

[ Parent | on HN ]

Re:Tachyons – A CSS Toolkit by dspillett on Wednesday July 19, 2023 @11:24AM (#36787970)

From my reading you can use any valid non-ascii character for the initial one too:

  ident     [-]?{nmstart}{nmchar}*
  nmstart   [_a-z]|{nonascii}|{escape}
  nonascii  [^\0-\177]
  unicode   \\[0-9a-f]{1,6}(\r\n|[ \n\r\t\f])?
  escape    {unicode}|\\[^\n\r\f0-9a-f]
  nmchar    [_a-z0-9-]|{nonascii}|{escape}

(nmstart being the key definition for this point)

[ Parent | on HN ]

Re:Tachyons – A CSS Toolkit by WhatWorkingOn on Wednesday July 19, 2023 @04:18PM (#36792596)

So why does this tailwind class fail?

document.querySelector('.[&_a]:underline')

[ Parent | on HN ]

Re:Tachyons – A CSS Toolkit by dspillett on Wednesday July 19, 2023 @11:27AM (#36788012)

> Invalid per the CSS spec is pretty self explanatory.

It is, but in the same way “I received an error” is not an incorrect error report it just lacks specificity.

I think what CSSer was asking (though the question itself was not worded as precisely as it could be) is: can you give examples of the invalid identifiers that it encourages?

[ Parent | on HN ]