acidcrash
@acidcrash
Frontend Developer

Как работать с Atom CSS?

Всем привет!

Совсем недавно, открыл для себя такой подход к написанию стилей как Atom CSS. Идея понравилась сразу, по этому решил применить это дело не практике.

Подключил плагин https://github.com/acss-io/webpack-atomizer-loader и начал работать с https://acss.io/.

По началу понравилось, круто, css пишется прям в HTML и не нужно дробить файлы на стили. Прям супер.

Но по мере роста кода и стилизации, мой код начал превращаться с сущий АД, уже через пару часов, читать и понимать его стало просто не возможно!

К примеру код
.class{
  display:flex;
  justify-content: center;
  align-items: center;
  font:400 15px Montserrat;
  margin: 10px 0; 
}

.class:before{
  content: "";
  background-color: #ccc;
  width: 1px;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
}


Стал выглядит так:
<div className = '
  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
 '>
  <a
   className = '
   D(f) Ai(c) Jc(c)
   Trs(T025) Td(n) C(C1) C(C1H):h'
   href = '/'>
     Аккаунт
     <i className = 'icon-arrow Rotate(-90deg) Mstart(8px) Fz(10px) D(b)' />
 </a>
</div>


Это не то, что жесть, а просто кошмар. Я не представляю как это все рефакторить, спустя пару месяцев, когда нужно будет, что-то поправить.

А когда в одном компоненте будет куча такого хлама, это же просто ужас.

Мой вопрос к тем, кто уже работал с Atomic CSS, подскажите, может я как-то не верно использую этот подход. Может есть какая-то техника примирения для него или паттерн какой? Или может я применяю его не по назначению (используется для верстки компонентов дизайна интернет-магазина)?

Заранее спасибо!
  • Вопрос задан
  • 2515 просмотров
Решения вопроса 1
dom1n1k
@dom1n1k
Атомарный CSS в качестве основной методологии - это бред даже для лендосов, а уж в крупных проектах это просто апокалипсис.
Но он имеет право на существование в малых дозах, как локальные уточнения для обработки всяких исключений и частностей.
Сколько вы кладете в еду соли и перца относительно объема остальных продуктов? Вот столько в коде страницы должно быть атомарных стилей.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
SmthTo
@SmthTo Куратор тега 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
Ответ написан
@mr_amirka
Да не так уж всё плохо. Это Вам с непривычки кажется, что сущий ад, но потом Вы глядя на разметку будете мгновенно всё понимать, и для этого даже не понадобится смотреть в CSS файлы, чтоб понять что кроется за каждым классом. Внимание концентрируется только на разметке и не надо переключать контекст между CSS файлом и разметкой. В Вашем же примере суммарное количество кода уменьшилось - как ни крутите, и на самом деле всё стало понятнее - просто Вы к этому ещё не адаптировались. Я постоянно юзаю эту методологию, только с технологией MinimalistNotation - рекомендую попробовать, может быть даже понравится. Она гораздо гибче и минималистичнее, чем atomizer.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы