Feature: auto-escape special-characters in selectors

Large-scale css codebases need special class name patterns that provide better structure. For instance two white-paper-like sites on the topic:

• http://bem.github.com/bem-method/html/all.en.html
• http://smacss.com/

One major problem I see with these systems is the convoluted syntax, i.e.:

• smacss sugests to call layout styles like .l-<class-name> (http://smacss.com/book/type-layout)
• bem suggests to represent bem elements with a class like <block-name>__<element-name> or menu__item

Looking through either it is clear that expressive syntax is a real issue. Yet it shouldn’t be since we can use any characters in our selector names!

• http://mathiasbynens.be/notes/html5-id-class
• http://mothereff.in/css-escapes

We could create much nicer class naming systems with more characters. For instance if we wanted bem block-names to be indicated with a class name like .@<block-name we could write it like this in our css code:

.\@block-name
    color red

.\@block-name {
    color: #f00;
 }

Escaping our css selectors sucks and scares away a good idea. It’s also error-prone to try and remember how to correctly escape every possible character. But there is a perfect solution: let stylus do the escaping for us! I’ll rewrite the above code for example:

.@block-name
    color red

.\@block-name {
    color: #f00;
 }

I think this would be an awesome feature of stylus because it woud make an awesome feature of css available to the masses.

[ianstormtaylor]

Was just wondering if Stylus supported this today. It is actually a good (imo) way to write more readable selectors. I could see it being used for module:marked-list or m:marked-list.

At least, while reading SMACSS I personally really didn’t like the way prefixing different types of selectors by b- instead of b: looks. A colon is much more descriptive and not easily confused with the name of the item.

[kreo]

simple workaroud .{class}\@xs