Child Theme: how to call on parent theme w/ out using "@import"

Every major search engine says DO NOT USE the “@Import” rule.

??

I got rid of @import by copying my entire style.css into my Child Theme, renaming it and removing that line. I did that because I have heard some things work better that way, and because it makes no sense to me to read two files to get a final result that can come from just one…and especially if the final result is significantly different than the original. However, one theme I tried did not seem to work well that way, so I do not know whether that can be done with every theme.

Make a backup copy of the original style.css before doing the update, then compare it to the new file and see whether any of the changes are relevant to what you are actually running.

An easier way would be to copy your theme’s header.php file in your Child Theme and then place in a <link> tag that retrieves the parent’s stylesheet. That’s what Google recommends instead of using the @import line too.

And the correct way to do that in WordPress is to enqueue the parent Theme’s style sheet.

In the child Theme’s functions.php, add the following:

function syrinx32123_enqueue_parent_style() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'syrinx32123_enqueue_parent_style' );

Now, if you do that, you’ll want to enqueue the child Theme’s stylesheet after the parent Theme’s; so add this:

function syrinx32123_enqueue_child_style() {
    wp_enqueue_style( 'child-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'syrinx32123_enqueue_child_style', 11 );

(And don’t hard-code a <link> in the child-Theme header for either stylesheet.)

I think Chip’s code could have been a bit shorter because you can state the dependent on wp_enqueue_style() in the 3rd parameter.

Regarding the @import blocking parallel loading, I myself don’t believe that to be true on browsers today.

Nothing solid it’s just a feeling. 🙂

Why would a browser limit itself from parallel loading when it sees @import ?