Atomic CSS


  • I survived the hour long Uno hand

    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>


  • That's not "modular", that's fucking stupid. It's like listening to a radio with bad reception and only catching half the words.


  • sockdevs

    I like how they collapsed all the rules into a smaller set of rules, and messed up the number of - on the way :laughing:

    <!-- Emoji'd by MobileEmoji 0.2.0-->


  • @Yamikuronue said:

    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.


  • I survived the hour long Uno hand

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



  • @Yamikuronue said:

    There is one small advantage of atomic CSS over inline

    Yes, it's a small step up.



  • @Yamikuronue said:

    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.

    @Yamikuronue said:

    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 alerts to have padding 15, or all labels. It's all or nothing, unless you want to spend a good portion of the day figuring out where you need to change pa-l to pa-xl (or pa-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 survived the hour long Uno hand

    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.



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

    Problem 1: Terribad naming convention (What the fuck is Fs-M when it's at home? East German secret police?) Non-intentional obfuscation is bad..

    Seriously, Bootstrap was criticized for mucking with semantic classes, and those guys are lightyears ahead of this "atomic CSS" shtick.

    Problem 2: By so much that it honestly hurts. Who the hell creates a design so bad that they need to repeatedly create similar elements with differing padding? Do you have 17 different container divs of the same class that need 8 different types of padding? Seems unlikely (Or you're a retard).

    Problem 3: Fs-s, Fs-m, Fs-l? So redundant it stings. Why reinvent text styling for no apparent reason? What's wrong with h2.name, h3.address for example? Do we need to obfuscate text styles now?



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


  • Grade A Premium Asshole

    @Maciejasjmj said:

    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.



  • @Captain said:

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


  • Discourse touched me in a no-no place

    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.



  • @Captain said:

    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.


  • BINNED

    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.

    :trolleybus:



  • @Onyx said:

    We should just use IDs on all elements.

    DRINK!


  • Grade A Premium Asshole

    @Onyx said:

    We should just use IDs on all elements.

    Paging @lucas.

    Damn, he left...



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


  • Discourse touched me in a no-no place

    @dimapopov said:

    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!!! :smiley:


  • Grade A Premium Asshole

    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


  • Grade A Premium Asshole

    Nonsense! This shit is !important



  • If that is true, none of the other rules will matter now :smile:


  • Discourse touched me in a no-no place

    @Polygeekery said:

    !important

    Is that CSS or C?...


Log in to reply
 

Looks like your connection to What the Daily WTF? was lost, please wait while we try to reconnect.