Синтаксический сахар в именах CSS классов

Вам когда-нибудь не хватало выразительности CSS в области именования селекторов? А вот мне не хватало. Еще когда-то давно, кода я только экспериментировал с разными методологиями и еще не познал дзен в виде независимых блоков мне хотелось как-то более наглядно отделять классы-модификаторы от имени модуля и тому подобные вещи. Мало кто знает, но в названиях классов, помимо букв и символов -, _, можно использовать любые спецсимволы. Благодаря этому можно добавить немного выразительности в разметку.

<div class="@sidebar $main">
  <div class="@sidebar $wrapper">
    <div class="@sidebar $text color:red"></div>
  </div>
</div>

Причем такой код будет на 100% валидным и даже будет отлично работать в вашем любимом IE. Темная сторона медали в этом случае заключается в том, что все левые символы нужно экранировать, из за этого ваш CSS начинает выглядеть как говно. Однако, проблема, в принципе, решаема с помощью препроцессоров.

.\@sidebar.\$main  { ... }
.\@sidebar.\$wrapper  { ... }
.\@sidebar.\$wrapper.color\:red { ... }

Еще нужно будет что-то придумывать с селекторами в JS, например, навернуть обертку вокруг jQuery, которая будет экранировать спецсимволы.

Ходят слухи, что все это выглядит как какой-то велосипед и тимлид вам свернет шею быстрее, чем вы успеете доверстать проект, если подобные выкрутасы будут использоваться необдуманно. Однако, если поэкспериментировать, договориться и вырастить какую-то свою определенную методологию на основе подобного сахара, может даже получиться что-то хорошее.