CSS エキスパートになりたい場合は、CSS セレクターの使用に習熟するだけでは十分ではありません。また、作業の全体的な計画、ワークフローの習得、スタイル シートの保守性と効率の向上にも関係します。この記事では、ジナ ボルトンが 12 人のトップ デザイナーから 10 の CSS 適用テクニックを選択し、皆さんに推奨します。
最近、私はより魅力的なスタイルシートを作成する方法を検討しています。 CSS を使用すると、私たちが望む素晴らしい Web サイトを作成できます。CSS を書くこと自体が楽しいです。
より魅力的なスタイルシートを作成するにはどうすればよいでしょうか?スタイルシートにはどのような機能が必要ですか?
数か月前、私は米国オレゴン州ポートランドで開催された 2007 Web Vision Conference に出席することができて光栄でした。このイベントのために、Web デザインと開発に多大な貢献を果たした 12 人のデザイナーを調査しました。この研究の結果と私自身の実務経験を組み合わせることで、美しいスタイル シートを作成するための一連の優れた方法を要約することができました。
01. CSSにタグを付けすぎないようにする
スタイル シートのリンクまたはインポートは、複雑な作業のように聞こえるかもしれません。しかし、なぜこれがそれほど重要なのかを強調したいと思います。多くの Web サイト開発者がきちんと整理された CSS ドキュメントを持っているのを見てきましたが、短期間で迅速に更新できないか、単に管理するのが面倒なため、以前に作成された絶妙なスタイル シートが遅くなり、ゴミになってしまった。
何百ものコンテンツを公開する必要がある巨大な Web サイトで作業していると想像してください。時間は限られているため、CSS をネストしたり配置したりして、迅速な変更や更新を行う必要があります。年々月日が経ち、この習慣は続きますが、ある日、Web サイトのデザインが完全に変更され (ただし、コンテンツは同じです)、作成期間は (テストを含めて) 1 週間しかないと言われるまで続きます。
通常、スタイル シートの更新は非常に簡単な方法です。ウェブサイトの散在する領域に長期間にわたって変更を加えない限り。 Web サイトのスタイルシート構造を全体的に把握することはできません。したがって、次の 2 つの選択肢があります。 a. すべてを整理して、1 か月以内に再設計します (幸運を祈ります)。 b. 新しい仕事を見つけます。
あなたの仕事がこのようにならないようにしてください。スタイルシートのリンクやインポートは、簡単な作業ではありません。きれいで整然としたスタイルシートを作成し、そこに保管しておくと、仕事がより楽しくなります。
注: スタイルシートにマークアップを追加しすぎないでください。新しいコンテンツを更新または追加するたびに新しいスタイルシートを作成しようとすると、間違いなくトラブルが発生します。リンクやインポートされたスタイル シートが多すぎると、バグを排除することが難しくなり、スタイル シートの保守が困難になります。大規模な Web サイトでは、異なる部分に個別のスタイル シートを作成することは理解できます。ただ極端になりすぎないように注意してください。
多くのスタイル シートを追加すると http リクエストが増加し、その後の作業にも影響を及ぼす可能性があることに注意してください。さらに、Microsoft IE6 ブラウザには 32 接続スタイル シートに関する特定の制限があります。 。
02. セマンティクスは単なる業界用語ではありません
言っておきますが、セマンティクスはコンテンツを表現するために最も適切で意味のある要素を選択することに加えて、class 属性と id 属性の値も必ず選択する必要があります。仕事以外でも、あなたの生活はよりシンプルになります（チームで働いている場合は、チームの生活もよりシンプルになります）。以下の定義を見てください。
.l13k {カラー: #369;
出勤したばかりで、この CSS ファイルにこのクラスがあるのを見た場合、すぐにこのクラスを見つけることができますか?このクラスの名前はおそらく略語であるため、それをすぐに見分ける正確な方法はないため、おそらく不可能です。それとも、それをそこに置いたので、今日それが何を意味するか知っているかもしれませんが、何年も経ってもそれが何を意味するかをまだ知っていると保証できますか?
さて、この定義を見てみましょう。
.left-blue { カラー: #369;
おそらく、左の列に青いモジュールがあることがわかるのと同じように、このクラス セレクターが何をするのかすぐにわかるでしょう。つまり、それが機能するということです。先ほど、1 週間以内に再設計が必要になる可能性があると述べました。再設計中、このモジュールは右側に配置され、依然として赤色でした。このクラスには存在する価値がなくなりました。したがって、すべての属性値を変更するか、そのままにしておくかを選択する必要があります。 (これによりさらに混乱が生じる可能性があります。)
クラス属性に色や長さ、幅の寸法を追加しないことをお勧めします。リテラルの単語であるプロパティ値は避けてください。直接属性 (ボックスなど) は、コンテンツの分離につながる可能性があります。
最後に、より適切な命名規則を見てみましょう。
.product-description {色: #369;
ここでそれを見ることができます。このスタイルで定義された製品説明は、どのように変更しても非常に明確です。
03.コメントを付けるメリット
コメントが適切に整理されており、CSS の範囲内にある場合は、各セクションに明確にラベルを付けます。コメントが視覚的に目立つようにして、コンテンツをスクロールして 10 行を確認したときにすぐに見つけられるようにするのが最善です。そうすれば、CSS ドキュメントにコメントすることは、将来の開発において非常に役立ちます。ほとんどの基本的なコメントは、このルールがここで使用される理由を示唆しています。
ヒントとメモ
コメントを追加すると、あなたや将来の開発者が不必要な混乱を避けるのに役立ちます。この習慣を続けてください。例を参照してください:
/* リンクされた画像の境界線をオフにする */
画像 { 境界: 0 }
時刻と署名
デザイナーや開発者の中には、CSS ドキュメントが最後に更新された日時を、名前や初期状態とともに示すことを好む人もいます。この情報は、誰が関与したかに関する情報と、最新のドキュメントが何であるかについてのヒントを提供します。
/* Sushimonster タイポグラフィ スタイル
更新日: 2007年7月10日(木) @ 5:15 pm
著者: ジーナ・ボルトン
-------------------------------------------------- --*/
これは特にチームで作業している場合に良いアイデアです。チームによってはこの情報を省略する必要があることに注意してください (企業によっては、これらの名前や日付を文書に含めたくない場合もあります)。見てください、この情報は必要ですか？
組織分類
コメントを使用して CSS のさまざまな部分を簡単に説明することをお勧めします。たとえば、すべての見出しタイプがグループ化されている場合、それらを区別するためにそれらを確認する必要があります。
/* ヘッダー
-------------------------------------------------- --*/
これについては、後で「タイプの区別」について説明するときに詳しく説明します。
注釈マーキング
上で述べたように、CSS ドキュメントが散在するスタイルを整理している場合、コメント マークを付けると、ファイルのその部分を見つけやすくなります。特徴記号、キーワードを使用して、最終結果を見つけることができます。
/* =ヘッダー
-------------------------------------------------- --*/
これは、長く複雑なスタイルシートで役立ちます。これについては、「Stop Design」を参照してください。 。
参照