How to avoid loading style.css twice in child-theme?

You usually don’t need to enqueue a child theme’s stylesheet. The parent theme does that. This is a bit confusing, so I’ll explain.

In most themes, Twenty Seventeen included, the stylesheet is loaded like this:

wp_enqueue_style( 'twentyseventeen-style', get_stylesheet_uri() );

The trick to understanding what’s going on here is understanding what get_stylesheet_uri() does. When a regular theme is activated, this function returns the URL to the theme’s style.css file. However, when a child theme is activated, the function returns the URL for the child theme’s style.css file.

This means that when you create a child theme with a style.css file, that file will automatically be enqueued, but the parent theme’s won’t. So all you need to do in your child theme is enqueue the parent theme’s stylesheet:

add_action( 'wp_enqueue_scripts', 'child_enqueue_styles', 9 );
function child_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_parent_theme_file_uri( 'style.css' ) );
}

Note that I set the priority to 9. This means that the parent theme’s stylesheet will get enqueued before the child theme’s, which will be enqueued at the default priority of 10.