Всем привет!
Совсем недавно, открыл для себя такой подход к написанию стилей как 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, подскажите, может я как-то не верно использую этот подход. Может есть какая-то техника примирения для него или паттерн какой? Или может я применяю его не по назначению (используется для верстки компонентов дизайна интернет-магазина)?
Заранее спасибо!
Простой
Простой
Средний