この同じトピックに関する質問があることは知っていますが、HTML に関するものです。Flex アプリで外部スタイルシートを使用する際の適切な規則は何ですか? スタイルシート (スタイルシートの名前と含まれるもの) をどのように分割しますか?
3 に答える
スタイルシートを整理する際に使用するいくつかの規則:
main.css
ベース アプリケーションをスキニングするためのすべてのデータを保持する1 つのスタイルシートを用意します。- メイン アプリのすべてのフォントを格納する1 つの
fonts.css
スタイルシートを用意します。
main.css スタイルシートは、<mx:Style source="main.css"/>
タグを介してメインの swf に含まれています。アプリの読み込みはできるだけ少なくし、すべてが読み込まれたら、すぐにテキストを表示する必要がある場合 (広告サイトの場合はビデオを再生するだけの場合もあります)、主要な要素をフェード/トゥイーンして読み込みます。実行時にfonts.css を介しStyleManager.loadStyleDeclarations
て。
- 管理パネルがある場合は
admin.css
、メイン アプリが必要としないため、実行時に読み込むスタイルシートがあります。
通常はThemeでスキンのセット全体を作成するため、CSS をそれ以上分割する必要はありません。そのため、スタイルシートはそれらのスキンをコンポーネントに適用するだけであり、非常に無駄がありません (Flex 4 を使用)。スタイルシートを小さなもの ("pages.css"、"comments.css"、"popups.css"、さらには "controls.css" など) に分割することはあまりありません。少しの見返りに。これは HTML ではよくあることですが、それは HTML が見栄えをよくするために CSS を必要とするためです。Flex は、CSS を完全に使用しなくても実行できます。
開発するとき、通常、私たちの 1 人がほとんどのスキンをすぐに開発します ( Photoshop/flash/after-effects を行うようにScaleNineで見られるようなデフォルトのワイヤフレーム設定を使用します。ただし、実行時に読み込まれる場合は、css ファイルのみを再コンパイルする必要があり、メインの swf を再コンパイルする必要はありません。
開発中 (カスタム テーマ内) にメインのスタイルシートを別々に保持しようとしましたが、変更を加えるたびに css を個別に再コンパイルする必要があり、時にはメイン アプリも再コンパイルする必要があったため、開発が非常に困難になりました。奇妙で追跡が困難なバグなどがありました。その後、2 つの異なるアプリをコンパイルしていました。そのため、メインの css ファイルをメイン アプリの一部として保持することをお勧めします。
何も再コンパイルせずにランタイム css が必要な場合は、Ruben の CSS ローダーを試して、ソースを確認してください。しかし、それには実行時のパフォーマンス コストがかかります。
フレックスは私が扱ったことのあるものではありませんが、私はいくつかの調査を行いました。リモートスタイルシートを呼び出すコードは次のようになります。
<mx:Style source="com/example/assets/stylesheet.css" />
Flexクイックスタート:シンプルなユーザーインターフェイスの構築:コンポーネントのスタイリングは次のようになります。
注:アプリケーションで使用されるスタイルシートの数を制限し、アプリケーションの最上位のドキュメント(タグを含むドキュメント)でのみスタイルシートを設定するようにしてください。子ドキュメントにスタイルシートを設定すると、予期しない結果が発生する可能性があります。
これが意味することは、複数のスタイルシートが実際には不可能であるということのようです。やりたいことは、スタイルシートを整理することです。アプローチのアイデアについては、スタイルシートの整理とCSSの設計を確認してください。クラスと基本タグがあるように見えますが、W3Cスタイルシートの仕様はFlexスタイルシートの仕様とは異なります。
Flex以外の開発者として、名前空間は名前空間を整理する方法として興味深いように見えます。Flex4で新しいCSS構文を使用する方法。