Hacker News Reader

Comment by danShumway | Hacker News Reader

I would not recommend this, I think it's more trouble than its worth, the syntax highlighting isn't going to be great, and I think you're just going to confuse your coworkers, but if you really want to, you can take advantage of the fact that CSS ignores rules that it doesn't recognize.

  .Component__child {
    TODO: add theming support
  }

Of course, you have some restrictions around syntax here (again, I didn't say I advise doing this), and of course if CSS ever adds a TODO rule you might run into problems.

View on HN

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!
    
      ;
    }

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...

This isn’t much different from the typical JSON comment hack:

    {
      "//": "comment goes here"
    }

Most editors and tooling also know this is commonly use and ignore validation of repeated keys. Unfortunately it doesn’t much help with arrays unless you specifically handle the case (and depending on usage, handle escaped cases as well).

Another downside is that the comments are transmitted to clients, and for closed source that might be a problem, depending on the comment!

For open source, the fake comment won't be removed by CSS compilers, so you end up wasting a little bandwidth.

Reply on news.ycombinator.com