You are the third reader to reply to this article, and the third to complain about cryptic class names. This means 100% rejection.
It shocks me a bit because abbreviation/atomic-classes is not the main part of the article. The main part is handling the overriding of the classes.
To me, it is pretty obvious that "Overflow X Auto" becomes "oxa" and "Text Align Center" becomes "tac". In case "oxa" and "tac" seems weird, one can create his own convention.
I have just answered a post of another reader, that imagined that I was proposing something in the Tailwind way. Fortunately, he gave an example about two buttons (primary and secondary). I will paste here my answer to him, without atomic classes because they wouldn't help in this case.
-primary {
border: 1px solid #000;
border-radius: 4px;
color: #fff;
font-weight: bold;
background: #ffa500;
}
-secundary {
border: 1px solid #000;
border-radius: 4px;
color: #000;
background: #808080;
}
<button class="-primary">... </button>
<button class="-secondary">... </button>
