How do I deal with [ ] in the CSS in email templates?

Question

How do I deal with [ ] characters in the CSS in email templates?
Example below. It errors out on the [class="btn"]

@media only screen and (max-width: 600px) {
    a[class="btn"] {
        display: block !important;
        margin-bottom: 10px !important;
        background-image: none !important;
        margin-right: 0 !important
    }

    div[class="column"] {
        width: auto !important;
        float: none !important
    }

    table.social div[class="column"] { 
        width: auto !important 
    }
}

Answer 1

[] characters are used as email templates place holders (e.g. [Original.Subject]). If you need to use them directly, you should escape them using '\' char:

a\[class="btn"\]