Как работать с Atom CSS?
Вы всем своим вопросом написали себе ответ.
Так сказать, прибили громадными гвоздями крышку гроба «атомарного 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
Да не так уж всё плохо. Это Вам с непривычки кажется, что сущий ад, но потом Вы глядя на разметку будете мгновенно всё понимать, и для этого даже не понадобится смотреть в CSS файлы, чтоб понять что кроется за каждым классом. Внимание концентрируется только на разметке и не надо переключать контекст между CSS файлом и разметкой. В Вашем же примере суммарное количество кода уменьшилось - как ни крутите, и на самом деле всё стало понятнее - просто Вы к этому ещё не адаптировались. Я постоянно юзаю эту методологию, только с технологией MinimalistNotation - рекомендую попробовать, может быть даже понравится. Она гораздо гибче и минималистичнее, чем atomizer.