Need advice with: add functional CSS/ utility classes/ atomic CSS/ immutable CSS

  • Resolved sanla

    (@sanla)


    8 years, 7 months ago

    Hi everyone, Anthony,

    I like the idea of functional CSS (or: atomic CSS/utility classes/immutable CSS).
    @anthony, how do you thing about this?

    I understand the bad of this approach when add it to an existing project but is it, to some extend, possible for this theme Quark to add atomic CSS to the child theme?

    Or is this a realy crazy idea? And does anyone has experience with this?

    NB More to find about functional CSS but this is a nice article:

    https://marcelosomers.com/writing/rationalizing-functional-css/#reusability-of-components

    I am very anxious to know. Thank you!

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Theme Author Anthony Hortin

    (@ahortin)

    8 years, 7 months ago

    To add something like atomic css to a quark child theme, you’d basically need to override every single php file, which kinda defeats the purpose of having a child theme in the first place.

    I don’t know a lot about atomic css but from just having a look at their site, my honest opinion is that it looks like a mess. It’s almost like writing shorthand inline-css.

    They give an example like…

    <div class="Row">
    <div class="Fl(start) W(1/2) Bgc(#0280ae.5) H(90px)"></div>
    <div class="Fl(start) W(1/2) Bgc(#0280ae) H(90px)"></div>
</div>
<div class="D(tb) W(100%)" role="presentation">
    <div class="D(tbc) Bgc(#0280ae) H(90px)"></div>
    <div class="D(tbc) Bgc(#0280ae.5) H(90px)"></div>
</div>
   <div class="IbBox W(50%) Bgc(#0280ae.5) H(90px)"></div><!--
--><div class="IbBox W(50%) Bgc(#0280ae) H(90px)"></div>
<div class="D(f)">
    <div class="Flxg(1) Bgc(#0280ae) H(90px)"></div>
    <div class="Flxg(1) Bgc(#0280ae.5) H(90px)"></div>
</div>

    Writing something like that is going to be considerably more time consuming than using standard css classes. Plus, you’re constantly defining things like colour and size on every single element, rather than just on one or two class names and using those throughout the html.

    As I said, I don’t know too much about it and there may be some benefits which I’m not seeing, but it’s entirely up to you if you want to start using something like that. Instead of adding it all to a child theme though, you’d be better off forking my theme and modifying that directly.

    Thread Starter sanla

    (@sanla)

    8 years, 7 months ago

    Hi Anthony,

    Thanks for your response. Yes, I see what you mean!

    I thought I could only add a minimal of atomic CSS (like for color styling and specific branding elements), next to the existing CSS that comes with your theme, and keep that real simple.

    The example you mention here from the website is actually not what I was referring to. My mistake, I was not clear about that! I meant the textual content of the website: the explanation about the ‘good, bad and possible solutions’ when using atomic CSS.

    Does this give you perhaps yet an idea for a possibility to add in a “minimal way” of atomic CSS?

    Sorry if my question seems like a repetition of the first one. Maybe I’m too eager to want this… The atomic CSS approach feels kind of “more natural” to me to – in the first place – get (existing) elements styled quicker. But I do not mean to replease the “good old CSS”.

    Thanks.

    Sandra

    Theme Author Anthony Hortin

    (@ahortin)

    8 years, 7 months ago

    Having a quick read through that other link you provided, I don’t really agree with a number of things he says.

    Shifting our style assembly code burden over to HTML means we lose all benefits of the cascade

    The whole benefit of CSS is the cascading, which is why it’s actually called CSS (Cascading Style Stylesheets). Not taking benefit of that cascading effect is a horrible recommendation and would suggest that he really doesn’t know css that well.

    
<div class="box-component flex p2 bg-blue white h4 bold">
  The .box-component class wouldn't actually style anything, it would merely be a search key for finding instances where the box component gets used.
</div>

    In the above example he’s adding classes that are too specifically named (i.e. bg-blue white bold). It’s never a good idea to name your classes like that. What happens when the client comes along and says, “please change this so it has a yellow background with black text and not bold”. You have two choices. You either have to change every occurrence of bg-blue white to something like bg-yellow black, along with also removing the bold class, or you change the bg-blue white classes to the new colours, which means that they don’t actually reflect the proper colours anymore. No matter what solution you choose, they’re both horrible.

    If you want to improve your speed when it comes to using css, you’d be much better learning either sass or less. https://css-tricks.com/sass-vs-less/

    Thread Starter sanla

    (@sanla)

    8 years, 4 months ago

    Hi Anthony,

    Thanks for the further reading you did and your response on that.
    I’m sorry for my late reply!

    But I did some more “investigations” on this. And it changed my mind about the benefits with the “Atomic way”. I agree, they had to with avoiding the CSS:

    • Less switching between HTML and CSS while coding;
    • Classnames are clear when keep following the Atomic convention and adding more classnames with the same name-structure and replacing classes (in the HTML) seemed to me not a hell of a job.

    Now I weighed up with what you said about loosing the benefit of cascading and the drawbacks for maintainance (ps, my short recap of your explanaition). And also I examined sass. Great! Also I came along PostCSS…. Choice-making keeps on going.

    😉

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Need advice with: add functional CSS/ utility classes/ atomic CSS/ immutable CSS’ is closed to new replies.