親テーマをインポートするのをやめて子テーマのstyle.cssだけでスタイル設定をする方法

子テーマのstyle.cssで親テーマをインポートして子テーマに必要な設定だけを追加していく方法を採用をしている方もいると思いますが、親テーマをインポートするのをやめたいときの方法について考えてみました。

親テーマのstyle.cssをインポートして使う場合のメリットとデメリット

親テーマのバージョンアップによりstyle.cssが変更された場合でも子テーマのファイル内容が変更されることがない利点があります。

親テーマをインポートして使う場合、２つのstyle.cssを処理する必要があり、また表示するサイト側でも２つのファイル読み込む必要があるのでサイトの表示スピードが遅くなる可能性があります。

親テーマstyle.cssを使用しない方法は、子テーマで親テーマへのimport文を削除するとできます。

@import url( '親テーマへのパス' );

親テーマをインポート（@import）するのをやめて子テーマに移して使用する場合２つの方法が考えられます。

子テーマに移動させたstyle.cssのファイル内容を必要な個所だけ直接変更する方法で、ファイルの行数も増えづらく簡単な方法ですが、親テーマがバージョンアップしたときにstyle.cssを変えることが難しいデメリットもあります。

親テーマstyle.cssを子テーマファイルの最初の方に移動させて、その部分は修正することなく必要な部分だけを同じファイルの下に追加で上書きして使用する方法で、その分行数が増えてファイルが見づらくなりますが、親テーマのバージョンアップ時にstyle.cssファイルを変更しやすい利点があります。