Why shouldn’t @import be used to import a parent theme into a child theme?

@import is a convenient CSS shortcut for loading a particular stylesheet (often parent themes or other dependencies), but part of the reason why it’s generally discouraged is due to – as you had mentioned – a small performance hit (stylesheets loaded with @import are not loaded in parallel).

Another reason is that by loading stylesheets with WordPress’ wp_enqueue_style function, you are defining your style dependencies at the server level, and can therefore define conditions as to when loading a particular stylesheet is – or is not – appropriate.

Here’s a particular use-case scenario that highlights what I’m talking about:

You’ve developed a theme that employs the use of several stylesheets that each have their own color scheme:

red.css
blue.css
green.css
default.css

Each color hinges off the theme’s default style.css, and the theme itself extends the parent theme’s own style.css. In order to select a color scheme, you’ve added a theme option dropdown that allows you to choose from the various options.

By using wp_enqueue_style, you would not only be able to enqueue only the relevant color scheme based on the existence and value of the color option, but also define the order in which all of the various stylesheets may be loaded without relying on a browser’s own interpretation of the @import order.

Here’s some further reading on the subject.

Leave a Comment