Priority / Hierarchy: Quick CSS vs. style.css vs. Additional CSS vs. CSS Hero

Indicating which are “from the theme” and which are “not from the theme” doesn’t help indicate hierarchy. I’ve read several places to keep “Enfold Theme Options > Performance > JS & CSS file merging and compression” turned off while developing the site.

Then, another Moderator, Mike, wrote this

“If you are using a child theme, typically when css is added to the child theme style.css and the css merging is on in the Enfold Theme Options > Performance > JS & CSS file merging and compression the merged file needs to be re-built by saving the theme options again. Sometimes the big blue button “save all changes” is not available to click, so try adding a blank space to the Quick CSS to active the button.”

Here https://kriesi.at/support/topic/column-colors-dont-change/

Now, totally confused and would imagine others are too who use the theme. Would appreciate a ranking of these as to employ best-practices on Enfold, or any other approaches.

— General Styling > Quick CSS
— Theme Editor > style.css
— Customize > Additional CSS
— CSS Hero, if installed

What does “the specificity of the selector” mean?

Maybe the question can’t be answered: please rank them. Or, maybe developers can help?

There are also statements otherwise – that css placement does matter – in responses from other moderators on other questions. I’ve read that the styles.css has precedence over the Quick CSS. And then some settings matter.

Then it appears toggling on/off the setting | CSS file merging and compression | does have an impact as well per this support response. …here by Mike (Moderator).

And another: “I disabled this setting in Performance -> CSS file merging and compression and now I see the custom.css file as the source file.”

And here: “If you are using a child theme, typically when css is added to the child theme style.css and the css merging is on in the Enfold Theme Options > Performance > JS & CSS file merging and compression the merged file needs to be re-built by saving the theme options again. Sometimes the big blue button “save all changes” is not available to click, so try adding a blank space to the Quick CSS to active the button.”

And here “Often if someone adds css into their child theme style.css via WordPress > Appearance > Editor > Child Theme > Stylesheet and then checks their site it seems that the css is not working, this is because adding the css this way doesn’t rebuild the merged files to add the new css. by Victoria (Moderator).

I can’t be the only one confused by all of this, struggling with css, and wanting to use “best-practice” for Enfold. Would appreciate some clarity on it all. Steps or settings for best-practices, i.e, only add css here, turn this setting on, keep this off, hit the blue button when…?

Tks

• This reply was modified 5 years, 6 months ago by Jen.