web-dev-qa-db-ja.com

2つのCSSファイルが相互に@importする正当な理由はありますか?

私は、別のチームによって設計されたクライアントのWordPressサイトの重要なスタイルリビジョンに取り組んでいます。

CSSは複雑に絡み合っているようです。私が見つけた特異性の1つは、テーマのメインスタイルシートstyle.cssで、サブディレクトリから別のスタイルシートをインポートすることです:css/default.css。一方、default.cssは、ファイルの先頭にあるメインスタイルシートも@importします。

@importディレクティブを削除し、default.cssの内容をstyle.cssに追加しましたが、default.cssスタイルをstyle.cssファイルの上部または下部に配置するかどうかに関係なく、レイアウトが壊れます。 @importループは、カスケードに対して何らかの方法でレイアウトを「機能させる」ようにします。

このようなものを見たことはありません。スタイルシートを解き、特定性を高めるためにセレクターをシーケンスする必要があることは明らかです。しかし、互いに@importする2つのCSSファイルを意図的に作成する合理的な根拠はありますか?それはナッツのようですが、これの背後にある原理的な理由がある可能性はありますか?

私はWordPress開発ではなく、フロントエンド開発を専門としています。 WordPressは、テーマ情報についてメインテーマスタイルシートを解析することに注意してください。 @import再帰は、何らかの形でWordPressに役立つものですか?

8
John Stephens

@importは、ページの読み込み時間に関する大きな混乱です。 CSSを完成させた後、クライアントには読み込み時の最適化のアイデアがあり、遅くとも@importを削除することについての質問が再び発生します。

まず、@ importを<link>に置き換えようとします。次に、開発ツールを使用して、競合しているクラスを特定します。その後、!importantを追加して、インポートしたCSSファイルからCSSルールを移動してみてください。

インポートされたCSSファイル内のファイルの(相対)パスにいくつかの問題があることが起こります...?

@imported CSSを使用してブラウザにサイトを読み込むと、クライアントが期待するように見える場合があり、dev-toolsを使用してCSS全体をコピーし、1つのCSSファイルに保存し、すべてのCSSファイルをこの新しく作成した1。

私が達成しようとしているグローバルなアイデアは、すべてのCSSルールを同じファイルに移動して動作させ、次にスクロールせずに見える領域のCSSルールをHTMLファイルの先頭に移動することです。

3
Evgeniy