Код блоков, элементов и модификаторов можно писать в таких терминах, чтобы финальный HTML/CSS/JS можно было оптимизировать по размеру.

Рассмотрим на примере блока b-copyright с модификатором type=full.

HTML:

<div class="b-copyright"></div>
<div class="b-copyright b-copyright_type_full"></div>

CSS:

.b-copyright {}
.b-copyright_type_full {}

Оптимизировать этот код по размеру можно составив таблицу одно-, двух-, трёхбуквенных замен имён классов.

HTML:

<div class="aa"></div>
<div class="aa ab"></div>

CSS:

.aa {}
.ab {}

Это уже сейчас можно делать с помощью jeanny.

Можно пойти дальше и перейти от использования классов к кастомным тэгам.

HTML:

<copyright></copyright>
<copyright class="b-copyright_type_full"></copyright>

CSS:

copyright {}
.b-copyright_type_full {}

Пока не заметно улучение? А если сминимизировать?

HTML:

<qq></qq>
<qq c=a></qq>

CSS:

qq {}
qq[c~=a] {}

Когда мы минимизируем классы они у нас все находятся в одной общей куче и мы сжимаем их все вместе. При большом количестве классов они у нас дойдут до трёх буквенных или даже четырёхбуквенных. Используя кастомный тэг для блока/элемента его модификатор можно выражать однобуквенным значением атрибута и строить селекторы включающие в себя и имя блока и его модификатор. Т.е. значение атрибута для конкретного модификатора конкретного блока будет чаще всего однобуквенным (в моей практике в Яндексе, конечно, есть модификаторы с больше чем 28-ю значениями, но это скорее исключение, чем правило).

Кавычки у значения атрибута можно не писать, если это значение одно. Если у блока/элемента два модификатора задано одновременно, то код будет таким

HTML:

<qq c="a b"></qq>

CSS:

qq[c~=a] {}
qq[c~=b] {}

MSIE не понимает кастомные теги в default namespace, не позволяет накладывать на них CSS (хотя после createElement его можно использовать, что делают при внедрении новых элементов HTML5).

Но при этом отлично понимает их в custom namespace. Соответственно для MSIE сгенерированный код будет выглядеть так:

HTML:

<x:qq></x:qq>
<x:qq c=a></x:qq>

CSS:

x\:qq {}
x\:qq[c~=a] {}

Для сравнения исходный код, код со сжатыми классами и сжатыми кастомными тэгами:

<div class="b-copyright"></div>
<div class="aa"></div>
<x:qq></x:qq>
<qq></qq>

<div class="b-copyright b-copyright_type_full"></div>
<div class="aa ab"></div>
<x:qq c=a></x:qq>
<qq c=a></qq>

.b-copyright {}
.aa {}
x\:qq {}
qq {}

.b-copyright_type_full {}
.ab {}
x\:qq[c~=a] {}
qq[c~=a] {}

UPDATE

предложил такой вариант:

HTML:

<qq></qq>
<qq a></qq>
<qq a b></qq>

CSS:

qq {}
qq[a] {}

---

Задача состоит в том, чтобы построить работу с кодом так, чтобы писать человекопонятный код в терминах блоков и мочь генерировать из него разные представления (и даже, может быть, мочь менять их на лету):

• полный код
• сжатый код на классах
• сжатый код на кастомных тегах в отдельном неймспейсе
• сжатый код на кастомных тегах в default неймспейсе