Метод html-верстки кнопок с применением псевдоэлементов

Коллеги, у меня складывается смутное ощущение, что не все из вас до конца понимают механизм работы селектора «звёздочка».
Согласно данным w3.org запись вида "*.warning" полностью эквивалентна ".warning", а запись «div.warning» означает ровно то же, что и «div[class~=warning]» иначе говоря, ".warning" есть то же самое, что и "[class~=warning]".
Как совершенно правильно было сказано, поиск элементов в DOM идёт слева на право. Это значит, что запись вида ".warning" указывает выбрать ВСЕ элементы у которых имеется атрибут class с именем «warning». Заметим так же, что запись подобного рода абсолютно всех устраивает.
Очевидно, что запись "*.warning" делает абсолютно то же самое — выбирает ВСЕ элементы у которых есть атрибут class с именем «warning».
Теперь анализаруем всё прочитанное и приходим к выводу, что запись вида *[class~=warning] аналогична записи ".warning".
Единственное отличие моего примера в том, что значение атрибута ищется как подстрока в имени класса.
Практические замеры подтверждают сказанное — 1000 кнопок прорисовываются в ИЕ7 за 800 мс, что в среднем сопоставимо со скоростью прорисовки в этом же браузере но при использовании идентификаторов класса.

использование псевдоэлементов — плохая практика. визуально они есть, но в доме их нет. как следствие нельзя через инспектор посмотреть какие именно стили к ним применились, какая у них реальная ширина, высота, отступы, об их существовании можно догадаться только лишь из исходников или визуально. короче, при отладке от них только геморрой. чистота хтмл — это конечно хорошо, и надо стараться минимизировать число дополнительных элементов, но не стоит впадать в крайности. в век шаблонизаторов совершенно не важно будет ли 1 элемент и 2 дополнительных или же 1 элемента и 2 псевдоэлемента. браузеру монописуально. в шаблонах — одинаковые вызовы подшаблонов.

касательно селекторов — ты играешь с огнём. лучше писать что-то типа class=" b-mybutton m-green " а потом в цсс: .b-mybutton {} .b-mybutton.m-green {}