How to work with Atom CSS?

Question

css

Hello!
More recently, I discovered such an approach to writing styles as Atom CSS. I liked the idea right away, so I decided to put this case into practice.
Connected the plugin https://github.com/acss-io/webpack-atomizer-loader and started working with https://acss.io/.
At first I liked it, it's cool, css is written directly in HTML and there is no need to split files into styles. Straight super.
But as the code and styling grew, my code began to turn into real HELL, after a couple of hours, it became simply impossible to read and understand it!
For example code

.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;
}

Steel looks like this:

<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>

It's not that tin, but just a nightmare. I have no idea how to refactor it all, after a couple of months, when it will be necessary to fix something.
And when there is a bunch of such rubbish in one component, it's just awful.
My question is to those who have already worked with Atomic CSS, tell me, maybe I'm somehow not using this approach correctly. Maybe there is some kind of reconciliation technique for him or what pattern? Or maybe I'm using it for other purposes (used for layout of online store design components)?
Thanks in advance!

Answer 1

Atomic CSS as the main methodology is nonsense even for landingos, and in large projects it is just an apocalypse.
But it has the right to exist in small doses, as local refinements for handling all sorts of exceptions and details.
How much salt and pepper do you put in your food relative to the volume of other foods? This is how many atomic styles should be in the page code.

Answer 2

You wrote your own answer to your question.
So to speak, they nailed the coffin of “atomic CSS” with huge nails.
Nuclear game and shit this “atomic CSS”, if you use it the way the sick fantasies of its creators-ideologists say.
Atomic CSS should be used as a small extension, as a kind of addition of universal functional styles to normal project styles.
In other words, limit their use to .hide-xs, . visually-hidden - something like this.
Yes, of course, one must be able to work with this “atomic” misunderstanding. But this skill is akin to the ability to make holes in a loaf of bread with the little finger.
PS I'm crying:

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

Answer 3

It's not all that bad. Out of habit, it seems to you like a living hell, but then looking at the markup you will instantly understand everything, and for this you don’t even need to look at CSS files to understand what lies behind each class. The focus is only on the markup and there is no need to switch context between the CSS file and the markup. In your example, the total amount of code has decreased - no matter how you twist it, and in fact everything has become clearer - you just haven't adapted to it yet. I use this methodology all the time, only with MinimalistNotation technology - I recommend trying it, maybe even like it. It is much more flexible and minimalist than atomizer.