Ideal CSS file structure in parent theme

[ryanve]

action should use the CSS file setup that best enables child-theme flexibility while still remaining maintainable and performant. The parent CSS is organized and modular. For performance it is usually ideal for all CSS to be combined in 1 file. 2 files is reasonable and easier to maintain. It helps separate base from theme styles.

0.x file structure

• base.css (base styles agnostic to WordPress)
• style.css (WordPress theme styles)

1.0 file structure

• style.css (not loaded, but must exist for header info)
• css/
  • base.css (base styles agnostic to WordPress)
  • main.css (WordPress theme styles)

Both queue setups (0.x, 1.0) allow any file to be overrided by a child theme. A WP problem is that child themes must contain style.css. The setups above allows modular overriding without needing @import. They rightfully nudge child-theme devs towards cascading rather than editing base styles.

What setup provides the easiest usage to child themes?

One alternative is manually combine everything into style.css and not use a css folder. If a child wants to use the parent stylesheet, it can enqueue it via its functions.php. It'd simplify the parent file structure and improve front-end performance. But it'd make customization less modular and the parent CSS messier. The 0.x setup hybridizes the 2 extremes.

[ryanve]

1.1 uses a file structure like 0.x but differs in that it foregos overriding. Parent stylesheets register as "parent-base" and "parent-style", but enqueue only when in parent-theme contexts. Child themes are expected to enqueue any and all CSS that they need (utilizing the parent-* sheets and/or custom child sheets). See examples in action-child/functions.php

1.1 file structure

• base.css (base styles agnostic to WordPress)
• style.css (WordPress theme styles)