Title: Need advice with: add functional CSS/ utility classes/ atomic CSS/ immutable CSS
Last modified: October 5, 2017
---
# Need advice with: add functional CSS/ utility classes/ atomic CSS/ immutable CSS
* Resolved [sanla](https://wordpress.org/support/users/sanla/)
* (@sanla)
* [8 years, 7 months ago](https://wordpress.org/support/topic/need-advice-with-add-functional-css-utility-classes-atomic-css-immutable-css/)
* Hi everyone, Anthony,
* I like the idea of functional CSS (or: atomic CSS/utility classes/immutable CSS).
[@anthony](https://wordpress.org/support/users/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](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](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fneed-advice-with-add-functional-css-utility-classes-atomic-css-immutable-css%2F%3Foutput_format%3Dmd&locale=en_US)
to see the link]_
Viewing 4 replies - 1 through 4 (of 4 total)
* Theme Author [Anthony Hortin](https://wordpress.org/support/users/ahortin/)
* (@ahortin)
* [8 years, 7 months ago](https://wordpress.org/support/topic/need-advice-with-add-functional-css-utility-classes-atomic-css-immutable-css/#post-9558702)
* 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…
* ```
```
* 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.
- This reply was modified 8 years, 7 months ago by [Anthony Hortin](https://wordpress.org/support/users/ahortin/).
- This reply was modified 8 years, 7 months ago by [Anthony Hortin](https://wordpress.org/support/users/ahortin/).
* Thread Starter [sanla](https://wordpress.org/support/users/sanla/)
* (@sanla)
* [8 years, 7 months ago](https://wordpress.org/support/topic/need-advice-with-add-functional-css-utility-classes-atomic-css-immutable-css/#post-9559692)
* 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](https://wordpress.org/support/users/ahortin/)
* (@ahortin)
* [8 years, 7 months ago](https://wordpress.org/support/topic/need-advice-with-add-functional-css-utility-classes-atomic-css-immutable-css/#post-9560910)
* 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.
* ```
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.
```
* 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/](https://css-tricks.com/sass-vs-less/)
* Thread Starter [sanla](https://wordpress.org/support/users/sanla/)
* (@sanla)
* [8 years, 4 months ago](https://wordpress.org/support/topic/need-advice-with-add-functional-css-utility-classes-atomic-css-immutable-css/#post-9861284)
* 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.
* 
* Quark
* [Support Threads](https://wordpress.org/support/theme/quark/)
* [Active Topics](https://wordpress.org/support/theme/quark/active/)
* [Unresolved Topics](https://wordpress.org/support/theme/quark/unresolved/)
* [Reviews](https://wordpress.org/support/theme/quark/reviews/)
* 4 replies
* 2 participants
* Last reply from: [sanla](https://wordpress.org/support/users/sanla/)
* Last activity: [8 years, 4 months ago](https://wordpress.org/support/topic/need-advice-with-add-functional-css-utility-classes-atomic-css-immutable-css/#post-9861284)
* Status: resolved