ホームページ >ウェブフロントエンド >htmlチュートリアル >「Web フロントエンドのベスト プラクティス」-高メンテナンス css_html/css_WEB-ITnose
「Web フロントエンドのベスト プラクティス」-高メンテナンス css_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 08:54:40962ブラウズ
HTML はあまりにも単純なので、実際のプログラミング言語とはみなされない、という人もいます。もちろん、同様に見なされているテクノロジーがもう 1 つあります。それが CSS です。正直に言うと、CSS のコードはそれほど複雑ではなく、それが何であるかを理解するだけで、要素の幅と高さ、タイプとサイズを制御することができます。コンテンツのフォント等の色等しかし、実際には単なるルール以上のものです。 知っていることと書くことは同じですが、より良い記事を書くことができる人が常に存在するようなものです。使えるということと、科学的に使うということと、柔軟に使うということの間には、まだギャップがある。この記事では、CSS で考えられるいくつかのベスト プラクティスについて説明します。
メンテナンス性の高い CSS
CSS の特徴は何ですか?
簡単に言うと、使用方法: インライン、埋め込み、外部、インポート。要素のスタイルを設定する方法: 要素のタグ名、クラス名、ID、さまざまなセレクター、およびそれらの組み合わせ。したがって、標準的な制限がない場合は、間違いなく混乱が生じ、CSS コードの保守が困難になります。
CSS コードを効率的に整理するにはどうすればよいですか?
明確な構造と個別のモジュールにより、コードの再利用性と保守性が向上し、開発の複雑さが軽減されます。では、どのように整理すればよいのでしょうか？
最初はコード ファイルを整理することです。コード ファイルは、一般カテゴリとビジネス カテゴリの 2 つの大きなカテゴリに分類できます。 次に、リセット用のファイルがあります。一般的な名前は、reset、default、normalize などです。
ページ ダイアログ ボックス、プロンプト ボックス、ヘッダー、ボトム、サイドバーなどの共通モジュールといくつかの基本スタイルを保存するために使用されるファイルがあり、多くの場合 mod、common などの名前が付けられます。コードの再利用を向上させるために、この方法で各ページを参照するために使用されます。
さらに、古い IE ブラウザと互換性のあるスタイルを保存するにはファイルが必要です。これには次の 2 つの利点があります。
1. 非 IE ブラウザのスタイル ファイルを読み込む負担を軽減します。 🎜>
2. 将来、古いバージョンの IE のサポートを終了する場合は、1 つのファイルを変更するだけでよく、変更するために複数のファイルを検索する必要はありません。もちろん、ブラウザーの互換性の問題に対処するときの 1 つの原則は、互換性の問題が発生しない他のソリューションがあるかどうかです。そうでない場合は、互換性が必要な部分を別のファイルに配置します。残りの css スタイル ファイルは、ビジネス モジュールに使用されます。原則として、各モジュールのスタイル ファイルは異なるフォルダーに配置されます。
これは問題を引き起こす可能性があります。ページは大量のファイルをインポートする必要があるのではないでしょうか?ページの読み込み中に http リクエストが大量に発生するのではありませんか?実際、ファイルの分割は開発とメンテナンスを容易にするためだけであり、公開するときに複数のファイルを圧縮して 1 つのファイルに結合するために使用されるため、複数のファイルを導入することを心配する必要はありません。
上記はファイルの編成に関するものであるため、スタイル ステートメントも特定のルールに従ってファイル内で編成する必要があります。 たとえば、モジュール内の要素のレベルに従って、それらが同じレベルにある場合は、ページ上の要素の位置に従って、上から下へ、または複数の要素がある場合には左から右へ。同じ宣言を共有する場合は、共通のスタイルを最初に宣言する必要があります。 これでは十分ではないと思われる場合は、less や sass など、変数、継承、操作、関数などの CSS 動的言語機能を提供する、より高度なメソッドを使用できます。
上記はいくつかの一般的な方向から説明されています。以下で特定の点について説明します
CSS リセットを使用してブラウザーの表示効果を統一します
まず、html のラベルは次のとおりです。元のスタイルはそのままですが、問題は、ラベルのデフォルトのスタイルがブラウザごとに異なることです。いくつかの違いが開発に問題を引き起こしました。このスタイル ファイルは、undohtml.Css と呼ばれるものでした。それ以来、さまざまなリセット計画があり、そのうちの 1 つは「しばらくホット」でした。この計画には合計 1 行のコード *{margin: 0;padding: 0;} が含まれています。すべてのラベルのデフォルトのマージンとパディングのスタイルがリセットされました。ただし、欠点の 1 つは、その後の開発が複雑になり、全体的な開発効率を効果的に向上させることができないことです。さらに、このソリューションのパフォーマンスも低く、ページ要素が多い場合にはページ レンダリングのパフォーマンスに影響します。したがって、人々は徐々により良いリセット方法を模索しています。現在、Eric Meyer によって開発された Reset CSS や Yahoo のフロントエンド テクノロジー チームによって開発された YUI Reset CSS など、多くの人気のあるリセット ソリューションがあります。実際、すべてのプロジェクトに適した 1 つのソリューションは存在しないため、他の人のソリューションを参考にして、自分のプロジェクトに適したソリューションを設計するのが最善です。
次の点を考慮する必要があります:
(1) HTML5 の新しいタグは、デフォルトの表示スタイルが以前のバージョンの IE で定義されていないため、表示スタイルをリセットする必要があります。
(2) ブラウザーのpadding、margin、borderタグの違いは主に、これら3つのスタイルに関連するデフォルトのスタイルによって引き起こされますが、すべての要素のmargin、padding、borderをリセットする必要はありません。 . 実際の状況に基づいている必要があります。
(3) フォント設定
~、、 およびその他のセマンティックタグにはデフォルトのフォントがありますが、実際に必要なフォントのサイズや太さは異なります。デフォルトから変更されているため、一般的なプロジェクトではリセットされます。
(4) 他の要素のスタイルのリセット。典型的な例には、li のデフォルトのリスト項目スタイル、テーブルのセル間のデフォルトのスペース、リンクの下線などが含まれます。
CSS の並べ替えを定義する
CSS はあまり論理的ではなく、ツールの助けを借りずにランダムに記述しても機能に影響を与えないため、実行しない人はほとんどいません。注意は必要ですが、並べ替えにはまだメリットがあります。
例:
1. クリーナー
2. 定義を明確に表示する機能
4.フォローアップ メンテナンスをすぐに見つけることができます
並べ替え方法:
1. 表示とフローティング、位置、サイズ、フォントなどのタイプ別
2.アルファベット順に文字順に並べ替える、ルールが簡単なのがメリット
3. 定義された長さとスタイルで定義された文字長に従って配置する
それぞれ長所と短所があります実際のアプリケーションでは、最初の方法を使用することをお勧めします。 ただし、これをフロントエンド エンジニアが単独で行うのは困難です。作成プロセス中に最も効率的な方法で記述し、コードを送信するときに CSS を並べ替えるためのツールを使用できます。効率が向上するだけでなく、その後のコードの読み取りとメンテナンスも容易になります。無料ツールの 1 つは CSScomb です。
CSS のウェイトを合理的に利用してコードの再利用性を向上させます
ウェイトとは、つまり、CSS 内のさまざまな種類のセレクターの優先順位により、優先順位の高いスタイルが優先順位の低いスタイルをオーバーライドします。体重に関するより具体的なルールについては、情報を確認してください。ここでは詳しく説明しません。
ここでは、重みに応じて適切なセレクターを定義する方法について説明します。
(1) ID セレクターは使用しないようにしてください
2 つを 1 つに定義することは許可されていませんページ 同じ ID で、ID セレクターの重みが高い場合、ID セレクターを使用して要素スタイルをオーバーライドする場合は、その要素に新しいセレクターを追加するか、! を使用する必要があります。重要なのは、その結果、再利用できないスタイル コードが多くなるということです。ベスト プラクティスは、可能な限り、低重みのセレクターを基本スタイルとして使用することです。
(2) サブセレクターのレベルを下げる
は、サブセレクター全体の重みを減らすプロセスでもありますが、同時にレベルが少ないほど低くなります。 HTML構造への依存。 CSS のレベルが多すぎるもう 1 つの理由は、sass などのツールの乱用です。これは、スタイルを定義するためにネストと参照を使用できるため、私が最初に CSS を使い始めたときに認識していた問題でもあります。多くの労力がかかりますが、最終的にはファイルをコンパイルする必要があります。それほど多くのコードを繰り返し入力する必要はありませんが、生成されるコードは依然として大量になります。セレクターレベルを下げることに特別な注意を払う必要があります。
(3) CSS クラス セレクターを組み合わせて使用する
この方法を使用すると、開発者は CSS スタイル カバレッジの問題を考慮する必要がなく、セレクターの重みを計算するプロセスを回避できます。コードの再利用性を確保するために、結合の概念は、複雑な親クラスの可変部分と安定部分を分離し、安定部分をメインクラスとして使用し、可変部分をいくつかの単純なクラスに分割します。クラス間の接続がないため、継承によって HTML 構造への依存が軽減され、コードの再利用性が向上します。
IE ブラウザと互換性を持たせるにはどうすればよいですか?
IE8 以下のバージョンの IE ブラウザーは、常にフロントエンド開発者の心を痛めてきました。それらと互換性を持たせるために追加されたコードはハック コードになり、人々はそのコードを書きたくないことがよくあります。 IE ブラウザとの互換性を実現するための実践的な方法をいくつか紹介します。
(1) IE ブラウザーの一般的なスタイル互換性の問題についてよく理解する
1 つのタイプはブラウザ自体のバグであり、もう 1 つのタイプは標準と互換性がないか、標準をまだサポートしていません。
(2) スタイル互換コードを分離
ブラウザのバージョンに応じてコード ファイルを整理し、判定ステートメントを使用してオンデマンドでロード
em、px、または % ?
このトピックについて話す理由は、現在、ページの機能がますます増えており、ページにアクセスするために使用されるデバイスがますます増えており、ページのレイアウトが非常に難しいものになっているためです。ページ内の要素 サイズやフォント、画像のサイズなどもレイアウトと密接に関係します。これを考慮して、フロントエンド開発では、ページ レイアウトを改善する方法に注目し始めました。その中心的な考え方は、ページ要素のサイズとフォント サイズを相対値に設定することです。フォントの相対単位には、em、ex、ch、rem が含まれます。詳細に入る必要はありません。説明すべき情報はさらにあります。以下にいくつかのベスト プラクティスを示します。
(1) 相対サイズを設定してみます
いわゆる相対サイズの設定は、ページ全体のレイアウトが適応的であることを意味するものではありません。ページのデザインに応じて、固定サイズにすることも、適応サイズにすることもできます。
(2) 要素のサイズが予測可能な場合にのみ絶対サイズを使用します
たとえば、デザインでは全体の幅、サイドバーの幅、ヘッダーとフッターなどの絶対幅を使用する必要があります。固定高さなど 写真やビデオを表示する場合、適切な固定サイズにより、これらのマルチメディア要素の表示に最適な結果が得られます。
(3) em を使用してフォント サイズを設定します
フォント サイズの設定に px を使用するのはスケーラビリティが悪く、フォント サイズの設定にパーセントを使用するのも一般的ではありません。フォント サイズの設定に em を使用するのが最善の方法ですが、フォント設定のレベルが上がるにつれて、この方法ではメンテナンスコストが増加しますが、CSS3 ではルート要素のフォント サイズに応じて計算される rem 単位が導入されており、現在、IE8 以下を除くほとんどのブラウザでこの問題が回避されています。
この記事の多くのことは、初心者にとって何らかの指針と助けとなることを願っています。皆さんも少しずつ実践していく中で、感じたこと、経験、教訓などがあると思いますが、それを頻繁にまとめて次の実践に活かしていくことはとても有益だと思います。さあ、みんな！ ~
(4) 他の要素のスタイルのリセット。典型的な例には、li のデフォルトのリスト項目スタイル、テーブルのセル間のデフォルトのスペース、リンクの下線などが含まれます。
CSS の並べ替えを定義する
CSS はあまり論理的ではなく、ツールの助けを借りずにランダムに記述しても機能に影響を与えないため、実行しない人はほとんどいません。注意は必要ですが、並べ替えにはまだメリットがあります。
例:
1. クリーナー
2. 定義を明確に表示する機能
4.フォローアップ メンテナンスをすぐに見つけることができます
並べ替え方法:
1. 表示とフローティング、位置、サイズ、フォントなどのタイプ別
2.アルファベット順に文字順に並べ替える、ルールが簡単なのがメリット
3. 定義された長さとスタイルで定義された文字長に従って配置する
それぞれ長所と短所があります実際のアプリケーションでは、最初の方法を使用することをお勧めします。 ただし、これをフロントエンド エンジニアが単独で行うのは困難です。作成プロセス中に最も効率的な方法で記述し、コードを送信するときに CSS を並べ替えるためのツールを使用できます。効率が向上するだけでなく、その後のコードの読み取りとメンテナンスも容易になります。無料ツールの 1 つは CSScomb です。
CSS のウェイトを合理的に利用してコードの再利用性を向上させます
ウェイトとは、つまり、CSS 内のさまざまな種類のセレクターの優先順位により、優先順位の高いスタイルが優先順位の低いスタイルをオーバーライドします。体重に関するより具体的なルールについては、情報を確認してください。ここでは詳しく説明しません。
ここでは、重みに応じて適切なセレクターを定義する方法について説明します。
(1) ID セレクターは使用しないようにしてください
2 つを 1 つに定義することは許可されていませんページ 同じ ID で、ID セレクターの重みが高い場合、ID セレクターを使用して要素スタイルをオーバーライドする場合は、その要素に新しいセレクターを追加するか、! を使用する必要があります。重要なのは、その結果、再利用できないスタイル コードが多くなるということです。ベスト プラクティスは、可能な限り、低重みのセレクターを基本スタイルとして使用することです。
(2) サブセレクターのレベルを下げる
は、サブセレクター全体の重みを減らすプロセスでもありますが、同時にレベルが少ないほど低くなります。 HTML構造への依存。 CSS のレベルが多すぎるもう 1 つの理由は、sass などのツールの乱用です。これは、スタイルを定義するためにネストと参照を使用できるため、私が最初に CSS を使い始めたときに認識していた問題でもあります。多くの労力がかかりますが、最終的にはファイルをコンパイルする必要があります。それほど多くのコードを繰り返し入力する必要はありませんが、生成されるコードは依然として大量になります。セレクターレベルを下げることに特別な注意を払う必要があります。
(3) CSS クラス セレクターを組み合わせて使用する
この方法を使用すると、開発者は CSS スタイル カバレッジの問題を考慮する必要がなく、セレクターの重みを計算するプロセスを回避できます。コードの再利用性を確保するために、結合の概念は、複雑な親クラスの可変部分と安定部分を分離し、安定部分をメインクラスとして使用し、可変部分をいくつかの単純なクラスに分割します。クラス間の接続がないため、継承によって HTML 構造への依存が軽減され、コードの再利用性が向上します。
IE ブラウザと互換性を持たせるにはどうすればよいですか?
IE8 以下のバージョンの IE ブラウザーは、常にフロントエンド開発者の心を痛めてきました。それらと互換性を持たせるために追加されたコードはハック コードになり、人々はそのコードを書きたくないことがよくあります。 IE ブラウザとの互換性を実現するための実践的な方法をいくつか紹介します。
(1) IE ブラウザーの一般的なスタイル互換性の問題についてよく理解する
1 つのタイプはブラウザ自体のバグであり、もう 1 つのタイプは標準と互換性がないか、標準をまだサポートしていません。
(2) スタイル互換コードを分離
ブラウザのバージョンに応じてコード ファイルを整理し、判定ステートメントを使用してオンデマンドでロード
em、px、または % ?
このトピックについて話す理由は、現在、ページの機能がますます増えており、ページにアクセスするために使用されるデバイスがますます増えており、ページのレイアウトが非常に難しいものになっているためです。ページ内の要素 サイズやフォント、画像のサイズなどもレイアウトと密接に関係します。これを考慮して、フロントエンド開発では、ページ レイアウトを改善する方法に注目し始めました。その中心的な考え方は、ページ要素のサイズとフォント サイズを相対値に設定することです。フォントの相対単位には、em、ex、ch、rem が含まれます。詳細に入る必要はありません。説明すべき情報はさらにあります。以下にいくつかのベスト プラクティスを示します。
(1) 相対サイズを設定してみます
いわゆる相対サイズの設定は、ページ全体のレイアウトが適応的であることを意味するものではありません。ページのデザインに応じて、固定サイズにすることも、適応サイズにすることもできます。
(2) 要素のサイズが予測可能な場合にのみ絶対サイズを使用します
たとえば、デザインでは全体の幅、サイドバーの幅、ヘッダーとフッターなどの絶対幅を使用する必要があります。固定高さなど 写真やビデオを表示する場合、適切な固定サイズにより、これらのマルチメディア要素の表示に最適な結果が得られます。
(3) em を使用してフォント サイズを設定します
フォント サイズの設定に px を使用するのはスケーラビリティが悪く、フォント サイズの設定にパーセントを使用するのも一般的ではありません。フォント サイズの設定に em を使用するのが最善の方法ですが、フォント設定のレベルが上がるにつれて、この方法ではメンテナンスコストが増加しますが、CSS3 ではルート要素のフォント サイズに応じて計算される rem 単位が導入されており、現在、IE8 以下を除くほとんどのブラウザでこの問題が回避されています。
この記事の多くのことは、初心者にとって何らかの指針と助けとなることを願っています。皆さんも少しずつ実践していく中で、感じたこと、経験、教訓などがあると思いますが、それを頻繁にまとめて次の実践に活かしていくことはとても有益だと思います。さあ、みんな！ ~