I have some experience with WordPress but I’ve been away from it for awhile. I’ve seen many examples of using @import in the beginning of the child theme to import the parent theme.
I was surprised to read here that the correct method is to use wp_enqueue_style inside of functions.php instead of @import to load up parent themes.
I read the explanation at the bottom of the page but didn’t really understand it. Is the issue that there is a performance penalty with using @import? What would be the tangible benefit of going through and updating my themes to the proper method, if any?
@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.
