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

How big is your CSS file you’re trying to import?

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

??

??

1 major https://developers.google.com/speed/docs/best-practices/rtt#AvoidCssImport

this is the parent i am trying to import: https://www.travelgrom.com/wp-content/themes/purity-child/style.css

this is the child with the import rule: https://www.travelgrom.com/wp-content/themes/purity-child/style.css

Google on avoiding import rule: https://developers.google.com/speed/docs/best-practices/rtt#AvoidCssImport

And Yahoo: https://developer.yahoo.com/performance/rules.html

[Please don’t bump here – these forums are entirely volunteer, so help may not always be available as fast as you’d like. If you need more help, you could consider hiring someone – https://jobs.wordpress.net/ ]

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.

@leejosepho

hmm, that sounds like a good idea. But the problem with that method is when the Parent theme is updated, you won’t know what CSS to update/change in your child 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.

@leejosepho, That sounds like such a bother and I think you don’t resolve the issue that Google is addressing.

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.

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.)

Should the Codex recommendation change from @import to enqueue?

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.

I myself don’t believe that to be true on browsers today

How come?

Nothing solid it’s just a feeling. ??

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

@andrew nevins

Should the Codex recommendation change from @import to enqueue?

Yes I think it should be