ベストプラクティスMagento CSSファイル

Question

Magentoで配信されたCSSファイルと、それらの変更を行うためのベストプラクティスについていくつか質問があります。

まず第一に、Magentoに付属するすべてのCSSファイルの基本的な説明を見つけることができませんでした。たとえば、reset.cssファイルはいつ使用されますか？

しかし、私のより大きな質問は、MagentoがデフォルトでStyles.cssでほとんどすべてを実行しているのはなぜですか？ CSSをいくつかの小さなファイルに分割し、さまざまなビューのためにlocal.xmlファイルのファイルをロードする方が良いでしょうか？これにより、要素のスタイリングをさらに制御できます。

たとえば、単純な製品ビュー用のCSSファイルを作成し、local.xmlにファイルをロードし、グループ化された製品にファイルをロードできます。

私が持っている別の質問は、-moz-*スタイルについてです。なぜ彼らはStyles.cssにあり、Firefox固有のCSSファイルではないのですか？ Opera（または他のブラウザ）を使用すると、このスタイルがエラーを知らないため、このスタイルをエラーとして表示します。

Answer 1

しかし、私のより大きな質問は、MagentoがデフォルトでStyles.cssでほとんどすべてを実行しているのはなぜですか？ CSSをいくつかの小さなファイルに分割し、さまざまなビューのためにlocal.xmlファイルのファイルをロードする方が良いでしょうか？これにより、要素のスタイリングをさらに制御できます。

いいえ、それは良くありません。個別のCSSファイルは、より多くのHTTPリクエストが発生し、ウェブサイトが遅くなります。ここには2つのオプションがあると思います：

1）1つの大きなCSSファイルを維持しますが それを削除します

2）いくつかの小さなファイルにそれらを分割して、自分の読みやすさを向上させ、それらを使用して自動的に組み合わせる Fooman Speedster Magento Extension.

私が持っている別の質問は、-moz-*スタイルについてです。なぜ彼らはStyles.cssにあり、Firefox固有のCSSファイルではないのですか？ Opera（または他のブラウザ）を使用すると、このスタイルがエラーを知らないため、このスタイルをエラーとして表示します。

Afaikこのようにするのは一般的な慣行と考えられています。各ブラウザ固有のスタイルを別々のファイルに書き込むことには、より多くの欠点があります。

たとえば、丸い角にこのように追加するだけです。

.rounded-corners {
    -moz-border-radius: 0.5em;
    -webkit-border-radius: 0.5em;
    border-radius: 0.5em;
}

訪問者が使用しているブラウザに応じて、対応するスタイルが適用されます。これらのプロパティをサポートしていないブラウザは、正方形の角を表示するだけです。

Answer 2

双方からこれを見なければなりません。

• ブラウザ、コンテンツのダウンロードとレンダリング
• 開発者、CSSの執筆/編集/管理

ブラウザは、必要に応じて少数のファイルを必要とし、組み合わせて削除します。理想的には、可能な限り少ない、単純なCSSを持つことができます（つまり、階層依存性の1以上のレベルがありません）。

しかし、開発者は、1つのドキュメントですべてを管理するのに苦労したり、そのように機能することが生産的ではないことがわかります。

これが、CSS処理（例：SASS/LESS）が存在する理由です。あなたが好きなように構造化されたCSSを簡単に、きれいにし、コメントすることができますが、ブラウザが取得するのは、組み合わせたファイルと最適化されたファイルです。したがって、これはあなたに両方の最高の世界を与えます。

現実的には、2つのスタイルのシート（印刷と画面）のみが必要です - 新しいブラウザはメディアクエリを介してこれを行うことができますが。

CSS入力に関する限り、開発があなたにとって最も快適になることを何でもしてください。ただし、出力に関する限り、可能な限り最適化され、削除されたファイルが少ないことを確認してください。