Why The CSS code added in Style.css doesn’t work for Kadence Child Theme?

One of the most annoying issues when you start working with Kadence Child Theme is that any code added in style.css doesn’t work. Or it works just by using !important. Or write a more specific rule.

For many websites, I added a few CSS snippets into Customizer – Custom CSS. No headaches. But thinking about building a more robust design system, it’s not a great idea:

• Customizer CSS can’t be organized;
• Customizer CSS adds all the CSS in the header of the source code, which is not great in the long run.

I dove more into this issue, and this is the solution I found in the Kadence Facebook Group.

This is how the basic Kadence Child Theme functions.php looks like:

The answer? The add_action hook should be uncommented, and added a priority of 20. Now the CSS added into style.css works.

function child_enqueue_styles() {
wp_enqueue_style( 'child-theme', get_stylesheet_directory_uri() . '/style.css', array(), 100 );
}

add_action( 'wp_enqueue_scripts', 'child_enqueue_styles', 20 );

When adding CSS in style.css doesn’t change anything:

• The default block flex is not easy to be overwritten using style.css
• The changes after adding style.css are not seen due to the theme cache. Check incognito to avoid headaches.