Основное отличие версии 2.2 от 2.0 заключается в том, что блок восприимается всего лишь как один из модификаторов!
Наименование элемента размещается в атрибуты, модификаторы в значение этих атрибутов.
В принципе, в качестве блока мы указываем лишь какой-либо нужный нам родительский элемент.
То есть фактически, по сравнению с 1.0, мы переносим всё в общую строку контекста элемента - и блоки и модификаторы,
что хуже с точки зрения миксов блоков.
Реализовать эту идею, в принципе, можно и старым способом при помощи множественных классов, например
.b-tab.e-list, .b-tab.e-item, .b-tab.e-item.-active- и .b-tab.e-panel.-active-
а ещё наглядней
.labels.in-wgt-tabs, .label.in-wgt-tabs, .-active-.label.in-wgt-tabs, .-active-.panel.in-wgt-tabs
но этот вариант накладен с точки зрения нарастания веса селекторов.
При помощи атрибутов css-селекторы получаются следующие:
*[am-labels *= "^am-wgt-tabs^"], *[am-label *= "^am-wgt-tabs^"], *[am-label *= "^am-wgt-tabs^-active-"], *[am-label *= "^am-wgt-tabs^-active--dark-"] *[am-panel *= "^am-wgt-tabs^-active-"]
Основной profit атрибутивных селекторов в том, что можно искать только часть строки на совпадение, таким образом в наших руках появляется инструмент, позволяющий написать сколь угодно сложное значение атрибута и перекрыть ниже простейшим значением части атрибута, не наращивая для этого специфичности!
Все названия пишутся в нижнем регистре, так как атрибуты регистронезависимые, и заглавные символы не воспринимаются браузером таковыми.
Сложные названия пишем через нижнее подчёркивание, а не дефис, чтобы проще было копировать строки (обсуждаемо). Префиксы отделяем минусом.
Каждый модификатор оборачиваем в - или ^, чтобы исключить совпадения части строк, как в данном случае:
*[item *= active], *[item *= inactive]
При помощи ^ указываем, что селектор надо применять только к элементу расположенному в другом конкретном элементе (блоке), например:
*[am-labels *= "^am-wgt-tabs^"]