Question

Long story short, I’m placing a bunch of css styles within a javascript variable and then dynamically injecting the css style node within the head element. I’d like to encode a recurring container .someContainer ideally using one character and then do a search and replace within my javascript. This would reduce my total css bytes by a bunch. So i’m trying to figure out which character I would never come across in a stylesheet. I can’t think of when I’ve seen the ~ character in css and think it might be a good candidate. Anyone have a clue?

Answer 1

The tilde is a bad call for two reasons:

E[foo~="bar"]
an E element whose “foo” attribute value is a list of whitespace-separated values, one of which is exactly equal to “bar”

E ~ F
an F element preceded by an E element

You can’t guarantee that anything else won’t be used because of :before and :after pseudo-elements:

span:before {
    content: "anything is possible in here (or at zombo.com)";
}

You can run into similar issues with url(). You might be able to get away with < (but not >) but you’d still have the content problem with :before and :after.

You’re probably better off setting everything up to use gzip compression for your stylesheets and possibly offloading it to a CDN.