4

私は新しい Metro UI をとても気に入っているので、タイルと Metro UI ベースのグリッドを使用してデモ Web サイトを作成しています。

ほとんどの作業を行うために get you can download のようなパッケージがあることは認識していますが、私は Web デザインにかなり慣れていないため (約 5 か月の経験)、Chrome と Firefox に組み込まれているインスペクターを使用して、より楽しいリバース エンジニアリングを行うことができます。

タイルのサイズと色から始めます。数十種類のサイズを揃えて、簡単に作成できるようにしたいです。現在、幅と高さのクラスを個別に作成し、各色のクラスも作成しています。次に、すべてのカラーセレクターのホバーとフォーカスの境界線を作成しています。

これは私のhtmlがこれまでにどのように見えるかです:

<div id="tile-wrap">
  <div class="std red"></div>
  <div class="wide x-long green"></div>
  <div class="x-wide xx-long blue"></div>
  <div class="xx-wide xxx-long purple"></div>
  <div class="x-wide long gray"></div>
  <div class="wide x-long black"></div>
  <div class="x-wide xx-long white"></div>
</div>

したがって、このセットアップでは、すでに合計 17 の異なるサイズを使用できます。

ここで、さまざまなアイコンのセレクターと、テキストのサイズとスタイルのセレクターも作成する予定です。最高の互換性を確保するために、CSS3 の代わりに jQuery で必要なアニメーションを実行すると思います。

これがすべて言われてダウンすると、各divに6つまたは7つのクラスが必要になるので、これは多くの方法であり、私のアプローチはかなりひどいですか? 私はデザイナーというよりも開発者なので、ヒントや推奨事項は大歓迎です。

また、タイルの間隔を空けるには、各サイズ セレクターにマージンを追加するだけですか、それともより洗練されたソリューションがありますか?

みんなありがとう、私は自分のデザインスキルを磨き、その過程で楽しみを持とうとしています.

4

2 に答える 2

1

これらの属性のいくつかを、特定のサイズ（つまり、特定の幅、高さ、パディング、マージン、フォントサイズなど）のボックスを表す句にグループ化しようとします。

私が最近見た最高のヒントの1つは、ページのどこに表示されていても同じように見える小さな再利用可能なクラスのみを作成することです。つまり、.blue-boxクラスは、どこに表示されても同じように見えるはずです。したがって、＃content.blue-boxを#footer.blue-boxとは異なるものとして実行しないでください。

次のビデオでは、CSSが「制御不能」になるのを防ぐためのいくつかの優れた方法の概要を説明しています。

Velocity 2010：ニコールサリバン、「大規模なCSSのトップ5の間違い」

于 2012-11-26T13:44:58.940 に答える
1

(あまりにも) 多くのクラスを追加することの最大のリスクは、より多くの間違いを犯すことです。ブラウザはクラスを問題なく処理できます。パフォーマンスを最適化したい場合は、このトピックに興味があるかもしれません: CSS 最適化: 要素 ID とクラス

于 2012-11-26T13:31:59.473 に答える