Okay
  Public Ticket #553625
TheFox child theme style.css not overriding parent's style.css!
Closed

Comments

  • Tadeh started the conversation

    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.

  • Tadeh replied

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

    <?php
    add_action( \'wp_enqueue_scripts\', \'thefox_scripts\' );
    function thefox_scripts() {
        wp_enqueue_style( \'child-style\', get_stylesheet_uri(), array(\'thefox-style\') );
    }
    ?>
    

    That\'s it, now +1 to our PageSpeed score! :)

  •  895
    TheFox replied

    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