CSSZen_html/css_WEB-ITnose

# CSS Zen
---

タイトルは「CSS Zen Garden」という本から引用しました この本を読んだときの光景は今でも覚えています。これを取り上げてください。私のレベルや意見はデイブ・シェイとは程遠いですが、このタイトルはこの記事における私の追求の 1 つであると考えてください。この記事は、過去 2 年間のページ作成の作業をまとめたものであると考えられます。同時に、ある程度の狭い視点があるかもしれません。時間が限られているため、特定の知識点について詳細な説明やコード例を提供する方法はありません。理解できない場合があります。読書のプロセス中に、質問したり、お互いから学んだりすることは大歓迎です。

UI デザイナーから PSD 画像が提供されたら、それを静的なページに切り取り、ブラウザ上で完全に表示します。このプロセスでは HTML と CSS を使用する必要があります。この記事では、このプロセスから始めて、関連する知識ポイントについて説明します。

## 開発の準備

1. 画像を抽出する
UI デザイナーは、多くの場合、フロントエンド スタッフに完全な PSD 画像を提供するだけで、不要なレイヤーをクリアすることさえしません。 ps とそれ自体で必要な画像を抽出し、プロジェクト画像ライブラリに保存します。私の個人的な経験から、フロントエンドを自分で Photoshop することをお勧めします。その理由は次のとおりです:
- Web ページでは、ビジネスおよび技術的なニーズに基づいてさまざまな画像ファイル形式を選択する必要がありますが、ほとんどのデザイナーは完全には理解できません
現在主流の画像ファイル形式。 3 つのアプリケーションの違いとその目的については、私の記事 [3 つの画像ファイル形式の選択] (http://www.cnblogs.com/balaixianren/) を参照してください。 archive/2011/08/ 09/2123321.html)
- Web ページはパフォーマンス要因を考慮し、一部の画像に対してスプライト マッピング処理を実行する必要があります
ページ画像のリクエストが増えるほど、ビジネスで使用される一部の不規則で特定の画像の読み込みが遅くなります。シナリオでは、スプライト テクノロジを使用して画像リクエストの数を減らし、パフォーマンスを向上させることができます。スプライト画像は、オンライン生成ツール「CSS Sprites Generator」(http://csssprites.com/)を利用して作成することもできます
- フォントアイコンの選択
フォントアイコンを適用するメリットは、画像を簡単に適用できることです。 css で制御 アイコンのサイズと色がベクター アイコンの場合、クロスプラットフォームのページ作成によって引き起こされる画像の歪みの問題も回避できます。欠点は、市販のブラウザがフォント アイコン ファイルの形式を統一的にサポートしておらず、互換性処理のために異なる形式のファイルを生成する必要があることです。 Alibaba UX 部門が立ち上げたベクター アイコン管理 Web サイト [Iconfont.cn](http://iconfont.cn/) をお勧めします。この Web サイトには豊富なベクター アイコンのコレクションがあり、プラットフォーム上でプロジェクトを作成してプロジェクト アイコンを実装できます。 . アプリケーションのコラボレーション管理。特定のアプリケーションについては、このサイトのドキュメントのヘルプを参照してください。
- img か、background?
· ビジネスの観点からは、ビジネスタイプの画像は img タグに適しており、装飾タイプの画像は背景の位置に適しています
· SEO の観点から、検索キーワードの効果を向上させる必要がある場合は、 img タグを使用することも、その逆も可能です。 利用可能
2. 互換性のあるブラウザーのバージョンの決定
異なる製品には異なるターゲット顧客グループがあり、異なるターゲット顧客グループによって、プロジェクト開発で注意を払う必要があるブラウザーのバージョンの互換性が決まります。互換性の問題はブラウザ カーネルの不一致によって発生します。その根本的な理由は、初期の段階ではブラウザ メーカーが従うべき統一された標準や仕様が存在しなかったことです。コードの作成を開始する前に、プロジェクトが互換性を必要とするブラウザの最小バージョンを製品マネージャーに確認する必要があります。これは、IE ブラウザのことを指します。ブラウザのバージョンによって、どの CSS セレクターを選択できるか、どのレイアウト方法を適用できるか、どの一般的な互換性問題を回避できるかなどが決まります。
3. レスポンシブ開発
スマートフォンの普及とインターネットのますます発展により、モバイル開発の重要性がますます高まっています。異なるコードを異なるプラットフォームにカスタマイズする必要がありますか、それとも 1 つのコード セットを複数のプラットフォームに適合させる必要がありますか (つまり、レスポンシブ開発と呼ばれることが多いものです)。これはチームが検討する必要がある方向性でもあります。設計レベルでは、レスポンシブ開発は UI 表示と端末デバイスのインタラクションの違いを考慮する必要があり、技術レベルでは、メディア クエリ + リキッド イメージ + ストリーミング レイアウトの包括的なアプリケーションです。

## HTML

HTML の本来の設計意図は、ユーザーがブラウザ上でテキストをより適切に閲覧できるようにすることです。そのため、さまざまなタイトル レベルを区別するための h1 ～ h6 タグ、リスト タイプを定義するための ul と ol、p の使用方法が存在します。段落を表します。タグが異なればデフォルトのスタイルも異なり、ブラウザ上でページが階層的に表示され、読みやすくなります。

HTML タグには独自の用途があるため、開発者が HTML コードを作成するときは、タグに正しい動作をさせるためにこの側面からも始める必要があります。これがセマンティクスの本来の目的だと個人的に思います。 HTML ページは、次の側面からセマンティクスを実現できます:
- タグにやるべきことをやらせる
- コードのネストを最小限に抑える
一部の開発者は、深くネストされたコード構造を記述しますが、そうでない場合もあります。欠点は、それを最後の手段として行うことです。理由は私がCSSの使い方にあまり慣れていないからです。たとえば、テキスト行の前に小さなアイコンを追加することは、さまざまな方法で実装できます:
· テキストのパディング左を設定し、背景画像を使用してテキストを配置します
· :before 疑似要素セレクターをテキスト ラベルを使用してアイコンを保存し、配置します
· 空のタグを追加して画像スタイルを設定します
明らかに、最後の方法はアンチパターンであり、お勧めできません。
- 冗長なラベル属性を削除します
前の 2 つの原則を確保するという条件の下では、通常はビジネス モジュールの最も外側のラベルにフック (ID またはクラスなど) を定義し、それを強力なセレクターと組み合わせるだけで済みます。 CSS を使用すると、各タグに識別属性を追加する必要がなくなり、CSS を記述する恥ずかしさを回避できます
- 意味のある属性を追加します
場合によっては、特定のタグに属性を追加すると、ページがより使いやすく、SEO に有益になる場合があります。たとえば、imgタグにalt属性を追加したり、タグにtitle属性を追加したりすることができます。
- 検証
Web ページの構造が適切かどうかを確認するには、スタイルシートを削除してブラウザで表示するのが良い方法です。理論上、読みやすいページは合理的な構造を持っています

## CSS。

ウェブの発展に伴い、単純な HTML では人々の美的ニーズを満たすことができなくなったため、CSS のメカニズムが登場し、リンクまたはスタイルを通じてブラウザーに通知し、ブラウザーは CSS ルールを解析してそれらを組み合わせます。対応するタグはバインドされており、対応するタグの検索はセレクターに依存します。

1. セレクター
ますますリッチな Web アプリケーションの開発に適応するために、セレクターはますます増えており、検索機能はますます強力になっており、時間が経つにつれてさらに多くのセレクターが登場すると思います。基本的なセレクターから疑似クラスや属性セレクターまで、合理的な選択を行うことによってのみ、エレガントなコードを作成できるようになります。これは、さらに作成して練習する必要がある基本的なスキルです。
2. 継承とカスケード
CSS のもう 1 つのメカニズム。継承により、スタイル、色やフォントなどの共通属性の共有が実現され、開発の合理性を確保することが、ラベルごとにフォント定義を記述する必要がある場合にどれほど恐ろしいことになるかを考えてみましょう。カスケードのメカニズムは継承に依存していると思います。継承がなければ、カスケードの必要はないと思います。 CSS は、セレクターの優先順位を使用して、スタイルを適用する方法をブラウザーに伝えます。優先順位を決定するためのスコアリング原則の特性に加えて、重要な点や複数の点など、知っておく必要がある多くの特徴があります。同一セレクターの宣言、スタイルシートの種類と優先関係など。カスケードの本質は、スタイルの再利用の問題を解決することです。再利用可能なスタイル (基本スタイルとして理解できる) に含まれるセレクターが増えるほど、カスケードでカバーされるセレクターはより複雑になります。そのため、CSS を作成するときは、セレクターのネストは良いガイドラインであり、特に sass などのコンパイル済みツールの出現により、複数レイヤーのセレクターを簡単に作成できるようになり、ブラウザーの解析速度に影響を与えます。
3. スタイルのリセット
html で説明したように、html の多くのタグには、a、p、ul などのスタイルがデフォルトで設定されています。ブラウザが異なると、これらのタグにスタイルを割り当てる際に統一性がなくなり、初期化が発生します。ページの表示は次のようになります。デフォルトのスタイルは単一すぎてビジネスニーズを満たせない場合が多いため、最初にデフォルトのスタイルをリセットする必要があります。すべてのスタイルをリセットする必要があるわけではありません。ブートストラップのような大規模で包括的な UI ライブラリでは、多くのタグがリストされます。それらはリセットする必要がありますが、一般的なサイトには必要ありません。合理化は CSS が追求すべき方向です。
4. ボックスモデル
CSS レイアウトは、要素と位置という 2 つの側面に依存します。インライン要素でもブロック要素でも、ページ上では長方形のボックスとして表示されるため、ボックスモデルという概念があります。ボックス モデルは CSS の基礎です。適用中は、インライン要素の垂直方向のマージンが有効にならず、同じ BFC 内のブロック レベルの要素のマージンが幅なしで決定されることに注意してください。 .価値原則。できればIE低バージョンの混合モードでのボックスの表示方法とbox-sizingの使い方だけでも理解しておいてください
5. BFCの原理
CSSのレイアウトをもっと深く勉強した友人なら理解できるかもしれませんBFC は css さまざまなレイアウト属性の包括的なアプリケーションの寄せ集めです。その目的は、一連のルールを要約し、関連する属性が使用されたときに要素がどのように動作するか、要素と兄弟要素、親要素、子要素、さらには兄弟要素の階層間の優先順位を全員に伝えることです。 、など。これらの関連する属性は、float をクリアすることで取得できます:
- 可視値を除くオーバーフロー属性
- 行ブロック、表キャプションなどの表示属性
- float 属性の非なし値
- 位置属性の絶対値および固定値
要素が上記の属性のいずれかを持っている場合、それは独立したコンテナを形成します。
6. CSS と CSS3
CSS3 は実際のシナリオに適用できる多くの属性を提供しますが、質的に飛躍したい場合の武道の応用についてのみ言及している武道に似ていると常々感じています。格闘技の場合は、前の 5 つのポイントで書いたことなど、CSS に関する非常に基本的なことを学ぶ必要がありますが、これに限定されません。
7. SASS
[sass](http://sass-lang.com/) を使って CSS を書くのは、その機能のおかげで、うまく使えば、CSS アーキテクチャを構築するような感覚になります。たとえば、変数定義、ネスト、インポートされたスタイル シート、関数定義とパラメータの受け渡し、スタイルの組み合わせの再利用、単純な計算関数がサポートされています。うまく使わないとその機能が十分に発揮されません。例えば、変数を定義して一度しか参照しないと、他の場所でもcssを書いているような状態になってしまいます。また、mixinsやextendも一緒に定義して使用する必要があります。さらに考慮し、ネストについては適切な間隔を考慮する必要があります。

## 結論

たくさんの言葉を書くのにとても時間がかかり、たくさんの脳細胞が死んだ。記事には例はありませんが、各段落を書く前に、まず頭の中で応用シナリオを想像し、自分の言葉で説明しました。この記事が、フロントエンド インターフェイス開発の経験を持つ友人たちとイデオロギー的な交流をもたらすことを願っています。欠点についてアドバイスをいただければ幸いです。