Question

Are there any known issues with putting invalid CSS class characters (@,:,!) in the class attribute of a HTML element? Like this:

<input type='text' class='compare id:txtSecondary'/>
<input type='text' class='compare @txtSecondary'/>

Answer 1

CSS fun fact! In section 4.1.3 of the Syntax and Basic Data Types (of CSS2) recommendation, it says…

Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier “B&W?” may be written as “B\&W\?” or “B\26 W\3F”.

So you can include special characters in your CSS:

<style type="text/css">
    .\@user { /* valid! */
        color:red;
    }
</style>

Additionally, the class attribute is a cdata-list which basically means “any text except new lines and multiple spaces“.

So you can include something like this in your markup:

<div class="@user">
    This is an @user
</div>

Your problem isn’t so much the @ or the : characters, but those spaces   you’ve tossed in. (since in the class attribute spaces mean something special: “Multiple class names must be separated by white space characters.“)