Atomic CSS
-
This article came across my reader the other day. What the hell is going on in the world of CSS?
.box { } .box--xs { padding: 6px; } .box--s { padding: 12px; } .box--m { padding: 24px; } .box--l { padding: 36px; } .box--xl { padding: 48px; }
.alert { }
.alert--xs { padding: 6px; }
.alert--s { padding: 12px; }
.alert--m { padding: 24px; }
.alert--l { padding: 36px; }
.alert--xl { padding: 48px; }.label { }
.label--xs { padding: 6px; }
.label--s { padding: 12px; }
.label--m { padding: 24px; }
.label--l { padding: 36px; }
.label--xl { padding: 48px; }became an atom called .pa (padding-all):
.pa--xs { padding: 6px; }
.pa--s { padding: 12px; }
.pa--m { padding: 24px; }
.pa-l { padding: 36px; }
.pa--xl { padding: 48px; }Which produces HTML like: <div class="d-bk p-md bg-w"> <a href="#" class="p-sm fs-m d-bk c-gn">Log in</a> </div>
-
I like how they collapsed all the rules into a smaller set of rules, and messed up the number of
-
on the way
-
What the hell is going on in the world of CSS?
FTFA:
Atomic CSS ... replicate[s]/emulate[s] inline styles)
I think the author went a long ways out of his way not to call those atomic guys idiots. It was so far that it was hard to read it all.
-
There is one small advantage of atomic CSS over inline: you can easily change every element with a 10px padding to 15px, if you so desire.
The more I read about CSS patterns, the more it feels like re-inventing the wheel every few years. "What if I want roller skates? I can't use the same wheel there as I did on a car. Let's try square shaped."
-
-
became an atom called .pa (padding-all):
And fucked up the whole "CSS classes describe what the element is, rather than how it looks like" perk. We can as well go back to using
<font>
and doing search-and-replace.There is one small advantage of atomic CSS over inline: you can easily change every element with a 10px padding to 15px, if you so desire.
And you can't change all
alert
s to have padding 15, or alllabel
s. It's all or nothing, unless you want to spend a good portion of the day figuring out where you need to changepa-l
topa-xl
(orpa-kinda-xl-but-really-more-l
if you're unlucky).Seriously, Bootstrap was criticized for mucking with semantic classes, and those guys are lightyears ahead of this "atomic CSS" shtick.
-
I'm not arguing in favor of atomic CSS, just being pedantic about it being exactly the same as inline XD It's obviously fucking terrible.
-
Agree with thegoryone.
OP shows an example of atomic design and OOCSS being followed through to its absolute, but horrific and non-sensical end. The idea and concept of these techniques is good, but like all good things: you can have too much of it.
When applied with moderation you get a really robust set of ground rules with which to assemble a website in a way that leaves it highly mallable, stylistically highly cohesive and ultimately far more maintainable than the mess of conflicting specificities any project of comparable size using 'classic' CSS would eventually devolve towards.
-
And fucked up the whole "CSS classes describe what the element is, rather than how it looks like" perk. We can as well go back to using <font> and doing search-and-replace.
That perk never really existed. Sure, you can get a decent enough rendering of the same page in the browser and on the printer, but getting the same HTML to render nicely on the desktop and tablet and phone impossible. So you have to abuse CSS to hide and show fragments of HTML depending on the device. And then you end up using different styles for the different devices, too, for usability.
-
Seriously, Bootstrap was criticized for mucking with semantic classes, and those guys are lightyears ahead of this "atomic CSS" shtick.
I have heard that before, but I just cannot be bothered to give a shit about "semantic correctness" in CSS.
Does it work? Yes? Good enough for me.
-
@Maciejasjmj said:
And fucked up the whole "CSS classes describe what the element is, rather than how it looks like" perk. We can as well go back to using and doing search-and-replace.
That perk never really existed.
-
I wonder if you can use CSS to add and remove classes on elements? Then you'd be able to use βsaneβ classes and have these βsemanticβ classes added or removed as necessary.
-
That perk never really existed. Sure, you can get a decent enough rendering of the same page in the browser and on the printer, but getting the same HTML to render nicely on the desktop and tablet and phone impossible.
It's not about different devices - though the describing way is definitely helping with that. It's about the fact that when you want all your, say, error messages to be red instead of black, you can either make it a one-line change, or have a lot of scouring in the codebase.
-
Classes in general are just a bad idea. They tend to cause too many unintended consequences when they change because you never know if and where someone applied them.
We should just use IDs on all elements.
-
-
-
Atomic CSS it's one of best model for CSS structuring and it has good future. It's not inline style!!! All classes written into stylesheets. It gives universal name of classes and classes. Few classes and lots of combination. Orna and Atomizer it's good tools for Atomic CSS. If you learn the model you will understand that it very easy and you also don't need write many classes. But many people don't understand this fully.
http://ornaorg.github.io
-
Atomic CSS it's one of best model for CSS structuring and it has good future.
FTFA:
Abstracting classes out as far as Atomic CSS (or any other similar approach) suggests will sacrifice (at the very least) context, readability, and maintainability
-
Don't get me fucking started!!!
-
Welcome back. Can I get you a 750ml of brandy?
-
Thanks.
I think we all know that the brandy isn't a good idea :D
-
Nonsense! This shit is !important
-
If that is true, none of the other rules will matter now
-