css - @importは、LESSで使用する場合、パフォーマンスに使用するのは本当に悪いですか？

Question

私は、LESS CSSを複数のファイルに分割して、CSSをモジュール化し、管理と保守を容易にすることを計画しています。最終的には、@ importを使用して、すべてのモジュラーCSSファイルを1つのファイルにインポートし、WordPressにエンキューします。

@importはパフォーマンスにとって悪い考えですか？

Answer 1

はい、複数のインポートを使用すると、ブラウザが行う必要のあるファイルリクエストと同等の数が発生します。

LESSソースをCSSファイルにコンパイルし、そのCSSファイルをサイトのスタイルシートとして含める限り、パフォーマンスは問題になりません。

たとえば、Wordpressテーマを作成する場合、CSS用のフォルダーを作成し、たとえばsimpLESS（Windowsを使用している場合）を使用してコンパイルできます。サンプルテンプレートディレクトリ構造：

-themes/
  -your-theme/
    -less/
      -main.less
      -import.less
      -etc.
    -style.css <- this is the target file you would compile into
    -index.php
    -etc.

簡単にコンパイルできるようにターゲットファイルを設定できます。また、simpLESSは、テーマ情報をファイルに入れることができるように、結果のファイルの最初のトップコメントを保持します。