Skip to content

Ideal CSS file structure in parent theme #2

@ryanve

Description

@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

1.0 file structure

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions