HTML comments work in JavaScript too

Re:HTML comments work in JavaScript too by err4nt on Tuesday March 08, 2022 @10:30AM (#30600924)

Do not practice writing invalid CSS, if this gets out online on the internet it will prevent any read `todo` property from being used because people are camping on CSS's name space.

Instead, any author is allowed to invent _any_ property, so long as the property name begins with a double-dash (--) and you can put anything inside as a value so long as it doesn't break CSS syntax

    a {
      --note:
    
        So you could do this instead and it would be standard CSS, perfectly fine for all people forever!
    
      ;
    }

[ Parent | on HN ]

Re:HTML comments work in JavaScript too by danShumway on Tuesday March 08, 2022 @02:18PM (#30604908)

Hah, this is my brain thoroughly broken by forced IE-compatibility for so long on legacy apps, but I completely forgot about custom properties when I was writing that comment! You're right, that's a much better solution.

I still don't think I recommend it, because sure it gets rid of the problem of accidentally breaking CSS namespace, but I still think in most cases sticking comments inside of a property is going to end up confusing people on a team more often than it will help, and there are still some syntax issues and conflicts with your own internal variables that can happen.

But for sure, if you're going to use properties for notes, make them custom properties.

----

Edit: I particularly don't recommend this, but off the top of my head using custom properties you also might be able to rig this up with something like `:before` pseudo-classes to even display some of your CSS comments visibly in the page via `content` or by building style toggles[0] or something.

Again, I feel like this is getting too clever for its own good, but as long as we're playing around...

[0]: https://css-tricks.com/logical-operations-with-css-variables...

[ Parent | on HN ]