Вы всем своим вопросом написали себе ответ.
Так сказать, прибили громадными гвоздями крышку гроба «атомарного CSS».
Ядерная дичь и говно этот «атомарный CSS», если использовать его так, как гласят больные фантазии его создателей-идеологов.
Атомарный CSS стоит использовать как небольшое расширение, как некая надстройка из универсальных функциональных стилей среди нормальных стилей проекта.
Иными словами, ограничить их использование до уровня .hide-xs, . visually-hidden — что-то типа такого.
Да, безусловно, работать с этим «атомарным» недоразумением надо уметь. Но умение это сродни способности мизинцем делать дырки в батоне хлеба.
P. S. Рыдаю:
D(f) Jc(c) Ai(c)
Ff(Mon) Fz(15px) Fw(400)
Pos(r) My(10px)
Cnt(empty)::b D(b)::b Pos(a)::b End(0)::b T(0)::b H(100%)::b W(1px)::b Bgc(#ccc)::b