vendredi 21 décembre 2018

Will enqueuing Page specific CSS Files, using Conditional Logic, cause any problems?

I am working on a website, which currently has a very large CSS File being enqueued as follows:

function theme_name_enqueue_styles() {
    wp_enqueue_style( 'custom-style', get_stylesheet_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'theme_name_enqueue_styles', 1 );

After reviewing the website, I can see that each page is only calling around 15%-20% of the total CSS classes. I would like to point out that each page's 15%-20% is made up of differing CSS Classes.

With this in mind, would it be okay to create page specific CSS Files and enqueue them as follows:

/*Enqueue Home Styles if on Homepage.*/
if( is_page('home') {
    function theme_name_enqueue_home_styles() {
        wp_enqueue_style( 'home-styles', get_stylesheet_directory_uri() . '/home-style.css' );
    }
    add_action( 'wp_enqueue_scripts', 'theme_name_enqueue_home_styles', 1 );
} 

/*Enqueue Services Styles if on Services Page.*/
if( is_page('services') {
    function theme_name_enqueue_services_styles() {
        wp_enqueue_style( 'home-styles', get_stylesheet_directory_uri() . '/services-style.css' );
    }
    add_action( 'wp_enqueue_scripts', 'theme_name_enqueue_services_styles', 1 );
} 

Whilst I understand this may result in more work in managing files, and is unlikely to be a suitable option when creating Themes to be managed by other people, this will be a website I will be solely responsible for. As such, willing to accept the additional management work, in return for a positive effect on Page Load speeds.

With this in mind, I was wondering if such an approach would:

  • Be counter productive, in that any savings with the CSS Files would be countered by the additional PHP Coding;
  • Cause any other unforeseen problems.

Aucun commentaire:

Enregistrer un commentaire