CSS フレームワーク Web デザインに関する CSS チュートリアル

私は個人的に CSS フレームワーク開発の経験を要約し、自分自身を馬鹿にしました。皆様の議論により、私たちが共に前進できることを願っています。 :)

1. CSS フレームワーク
中国のインターネット産業は 10 年間発展し、ブラウザも初期に普及した NS から現在の FF3.IE7 などに進化し... フロントエンド開発エンジニアというポジションも誕生しました。近年、Web開発において「フレームワーク」という言葉がよく使われています。 YUI、JQuery、Prototype などの JavaScript フレームワークは、Web サイトを開発する際のフロントエンド開発エンジニアにとって確かに強力なツールとなっています。なぜ？フレームワークにはツール、関数ライブラリ、規約が含まれており、再利用可能な共通タスクから共通モジュールを抽象化する試みが含まれているため、設計者やプログラマは繰り返しの開発を避けることができます。平たく言えば、繰り返しの作業にかかる時間を大幅に節約できます。

CSS の記述も同様で、最初は文字の色とコンテンツのレイアウトを定義するだけでしたが、今ではすべてのパフォーマンスを定義するようになりました。 CSS フレームワークは徐々に注目を集めるようになりました。具体的な式から抽象モジュールを抽出して再利用することが、ユーザーのダウンロードを減らし、チームや個人の開発を促進する最も重要な手段であると誰もが認識しているからです。

2. cssフレームワークの開発シーケンス
a）reset.cssをフォーマットする

cssをフォーマットする本当の利点は、パディングのリセットや、新しいHTMLファイルにフレームワークを導入することができることです。マージンを使用して、ブラウザ上で統一されたレイアウトと同じパフォーマンスを実現します。

b) レイアウトlayout.css

ページが 2 列か 3 列か、全画面か 1024×768 かを定義します...

Web サイトのデザインにはさまざまな種類のレイアウトがありますが、そのほとんどは次のもので構成されています。いくつかの複雑なレイアウトを実用的に構成し、必要なレイアウトを選択して導入し、目的のページ レイアウトをすばやく適用できます。

c) 基本スタイル type.css

本文、h1-h6、a:link-a:active、pなどのフォントサイズと色を定義します。
同じアイコン、行間、リンク色を表示するためのulクラスを「ul-text」として定義するなど、基本スタイルのCSSリファレンス。
次のように適用することもできます: class="ul-text square"、四角形のアイコンが li の前に表示されます。

d)テーブルの修正table.css

table、tr、td、th、thead、tfoot、tbody、captionなどのタグのパフォーマンスを定義します。
基本スタイルと同じですが、既存サイトの表の表示形式はほぼデータ加工なので参考文献は別に保管しています。たとえば、table-style-1 をテーブルに適用すると、黒い境界線のあるテーブルになり、table-style-2 は黄色の境界線のあるテーブルになります。

e) フォーム変更 form.css

フィールドセット、ラベル、ボタン、入力、選択、テキストエリアのラベルのパフォーマンスを定義します。
ほとんどのウェブサイトのフォーム、ボタン、入力ボックスはほぼ同じです。このcssを導入する理由は、様々なブラウザでの統一表示を容易にするためです。デフォルトのボタンや入力ボックスなどの表示はブラウザごとに大きく異なります。最初は書式設定されたCSSで統一されていますが、入力ボックスの枠線やボタンのスタイルをこのCSSで定義する必要があります。残念ながら、選択を統一することはできません。js を使用して実装することを検討すると、コストが高すぎます。

f) 印刷変更 print.css

印刷出力ページを変更します。

g)他のcssを含むCSS

frontpage.css、list.css、detail.css、register.cssなど

各種参考文献をもとに、対応するCSSを紹介します。たとえば、リスト ページにテーブルの変更がない場合、table.css は導入されません。コードを保存します。

3. CSSフレームワークフォルダーの作成
a) coreは主に
reset.css、layout.css、type.css、print.cssを格納します

b) budモジュール
table.css、form.css、album .cssを格納しますとその他の css

c) petal 固有のアプリケーション
カプセル化された css を保存します。 Frontpage.css、llist.css、detail.css、register.css およびその他の CSS。このフォルダーに格納されているCSSが直接参照されます。

フォルダーの名前は個人的な好みに基づいて、電子や陽子などの名前も付けたいと思っています。おいおい！

4. CSSフレームワークのメリット
a) 開発効率が向上します。
b) メンテナンスを容易にするための標準化された名前定義。
c) プロジェクト開発プロセスを標準化する
d) css コードがより明確かつシンプルになります。 HTML コードの方が合理的です。

5. CSSフレームワークのデメリット。
a) 学習コストの増加。フレームワーク全体を理解し、フレームワークのドキュメントを読む必要があります。
b) 小規模なプロジェクトなどのページでは、CSS フレームワークが肥大化します。フレームワークには使用しないコードが多数ある可能性があります。
c) スキルの向上にはつながらないかもしれません。フレームワークに依存しすぎると、バグのトラブルシューティングが困難になります。フレームワーク固有のバグも含みます。
d) 必要なフレームワークと開発フレームワークを選択するのは苦痛です。書いてみると、どんどん融通が利かず肥大化していることに気づきました。ごめんなさい-_-

6. CSS フレームワークの開発および使用時に遭遇する一般的な問題。
1. ページ上の外部参照スタイルが多すぎます。
例えば、整形CSSではulのmargin定義が0と宣言され、基本スタイルcssではmargin: 5px 10pxが宣言される場合があります
そのため、Yslowでは複数の定義が存在することになります。

2. コンポーネントの再利用性を考慮する。
例えば、フォーム定義のCSSはフォームのすべての変更を定義しており、登録ページではこのCSSの30％だけが必要であると想定されます。不要な70%をカットすべきでしょうか

上記2つの問題を踏まえると、あるべきものと、あるべきでないものが存在しないようにカプセル化することが解決策だと個人的には考えています。 http 接続の数と CSS のサイズを減らしてみてください。しかし、これを完全に行うと、CSS の再利用性が非常に低くなり、後の段階で手動でカプセル化するのが非常に面倒になります。 「特定の状況には特定の分析が必要である」というシャオ・マーの言葉を適用することしかできません。人生は本当に矛盾しています...

3. emをサポートするべきですか?
emをサポートしたい場合、最大の目的はユーザーの解像度に応じてブラウザを自由に拡大縮小できることであることがわかります。非常に大きなモニターと小さなモニターを使用するユーザーにとっては非常に便利です。しかし、ユーザーのブラウザー データを収集した結果、これらの両端にいるユーザーはほとんどいないことがわかり、これらのユーザーに通常の 2 倍を超える開発時間を費やすのは明らかに費用対効果が低いことが考えられます。そのため、私たちが TBSP を開発していたとき、私たちのチームは TBSP をサポートしないことに決めました。もちろん、これは提案であり、ユーザーに最高のエクスペリエンスを提供するために em を使用したいと考えています。

上記の 6 つのポイントは、私と Taobao UED チーム全体の日々の開発に関する考えと要約です。多少の意見があるかもしれませんが、メッセージを残して一緒に議論しましょう。

上記は CSS フレームワーク Web デザインに関する CSS チュートリアルの内容です。その他の関連記事については、PHP 中国語 Web サイト (m.sbmmt.com) に注目してください。