I\'ve got an issue! The parent theme both files style.css and style_end.css has priority over any change I make on the child theme style and style_end css files. I can work around it using !important, however this is a patchy solution and the child themes should work as the site\'s first resource. During the past month or so a new method for inheriting parent styles in WordPress child themes has been established (wp enqueue style), replacing the old method of importing parent styles with an @import call in the child theme style.css file. https://codex.wordpress.org/Function_Reference/wp_enqueue_style When using child theme, WordPress will automatically load the functions.php file and page templates of the parent theme, but it will not automatically enqueue the parent theme\'s stylesheet.
Finally I could find a way to solve my own issue, this is what I did:
First of all, Avoid using CSS @import. Why?
The @import method of retrieving CSS files creates some problems that affect your page speed. The largest problem is that it causes files to load sequentially (one has to wait for the other) instead of in parallel (at the same time). This wastes times and round trips and makes your web page load slower. If it takes 200ms to load the child theme’s stylesheet, and 200ms to load the parent theme’s CSS, a modern web browser should take almost 200ms to load both of them, because modern browsers load assets in parallel. Unfortunately this is not true for CSS @import.
Details from Google:
CSS @import allows stylesheets to import other stylesheets. When CSS @import is used from an external stylesheet, the browser is unable to download the stylesheets in parallel, which adds additional round-trip times to the overall page load. For instance, if first.css contains the following content:
@import url(\"second.css\")
The browser must download, parse, and execute first.css before it is able to discover that it needs to download second.css.
Now how to avoid css @ imports?
We can drop the @import, and make good use of functions.php and the wp_enqueue_style() function. Open your child theme style files (both style.css and style_end.css) and remove @Import from both files then save and close it. Then Open your child theme functions.php file, an put below codes on it and then save and close it.
Hello,
I\'ve got an issue! The parent theme both files style.css and style_end.css has priority over any change I make on the child theme style and style_end css files.
I can work around it using !important, however this is a patchy solution and the child themes should work as the site\'s first resource.
During the past month or so a new method for inheriting parent styles in WordPress child themes has been established (wp enqueue style), replacing the old method of importing parent styles with an @import call in the child theme style.css file.
https://codex.wordpress.org/Function_Reference/wp_enqueue_style
When using child theme, WordPress will automatically load the functions.php file and page templates of the parent theme, but it will not automatically enqueue the parent theme\'s stylesheet.
Hello again :)
Finally I could find a way to solve my own issue, this is what I did:
First of all, Avoid using CSS @import. Why?
The @import method of retrieving CSS files creates some problems that affect your page speed. The largest problem is that it causes files to load sequentially (one has to wait for the other) instead of in parallel (at the same time). This wastes times and round trips and makes your web page load slower. If it takes 200ms to load the child theme’s stylesheet, and 200ms to load the parent theme’s CSS, a modern web browser should take almost 200ms to load both of them, because modern browsers load assets in parallel. Unfortunately this is not true for CSS
@import
.Details from Google:
CSS @import allows stylesheets to import other stylesheets. When CSS @import is used from an external stylesheet, the browser is unable to download the stylesheets in parallel, which adds additional round-trip times to the overall page load. For instance, if
first.css
contains the following content:@import url(\"second.css\")
The browser must download, parse, and execute
first.css
before it is able to discover that it needs to downloadsecond.css
.Now how to avoid css @ imports?
We can drop the @import, and make good use of functions.php and the wp_enqueue_style() function. Open your child theme style files (both style.css and style_end.css) and remove @Import from both files then save and close it. Then Open your child theme functions.php file, an put below codes on it and then save and close it.
That\'s it, now +1 to our PageSpeed score! :)
Hello Tadeh, thanks for your feedback,
We will add this fix in our next update child theme.
Do not hesitate to contact us if you have other questions.
Regards
---------------------
Hosting we recommend ( Free SSL and CDN included in all plan ).
Speed up your site with Autoptimize
Test your site with GTmetrix and fix the issue to make it faster
How to Update your Theme