Where to put CSS guidance

As of v1.4 and now 1.5b, I read several discussions on where to put CSS ie: Add custom CSS to Bricks Builder or to style.css file in the Bricks Child theme

What I would request an update on is where is the best place to put CSS and when. Is there any definitive list now as of 1.5b as to where and when to place custom CSS and to what focus of purpose?

I’m still a little unclear.

Is this a problem with bricks?

No, just there is more than one place and so knowing the best place for the task might be helpful.

I usually insert my custom CSS code to Bricks > Settings > Custom Code

Easier for me to manage.
For something really simple, I will insert it in the builder CSS field.

The basis of my question is not so much, (it is some :slight_smile:) about the best place to manage CSS, but the best place to put it for utilizing the CSS in a effective and performant manner.

For example, we could just put everything in the child template’s styles file but I saw some comments about the efficiency or resource usage and execution. In the older ways of Wordpress, that is just what we would do. Putting CSS in the builder on a global or element level makes management more work but is the resulting efficiency gains worth the effort?

That’s the kind of thought I am exploring and asking about.

Just think about the 6 month rule. So you have to update the website or in that case the CSS 6 months after you have built the website. So i recommend to put additional CSS in a central place / global where you find it. And also i recommend to comment everything. To me that’s much more important than any other technical aspect.

So styles sheet external and under the Child theme then yeah?

The performant differences are not worth considering?

WP has done it this way for years and a framework like ACSS puts it in one place basically.

I have had the same question, thinking about the problem from an ease of maintenance point of view. On the one hand, having all CSS in a single location makes it easy to find the location, but perhaps an unwieldy file. On the other hand, I like the idea of a self contained object/element/page with all styling local to the object.

It seems it’s a cost / benefit comparison.

Not trying to argue but objectively, a well documented styles file with all the styles in one place might be more easy to manage than remembering where all the various CSS has been attached throughout the site.

If you were copying objects, would the CSS attached come with it?

I think the discussion here might be helpful in the development process to focus in on some kind of best use case to balance performance and manageability.

Additionally, for those of us using ACSS, this framework is a central yet globally defined set of utility classes that when applied to an element should create a consistent result across the site. When the central interface to that framework are adjusted, again the results will be consistent site wide.

When elements are copied and pasted they should carry with them all the definitions and attributes used in that element.

Overall, this feels to me like a strong case for using a css framework and individual adjustments / definitions applied to an element. If the issues are resolved with ACSS and Bricks which seem to being addressed as Bricks development moves forward, I think this could potentially be a great way to address CSS styling both site wide and locally per element.

I am NOT trying to make an ad for ACSS here but I think it examples efficiency in a centrally located file.