デザインからコンテンツを分離することで、サイト管理が容易になる
CSS（カスケーディングスタイルシート）は、ウェブサイトをスタイルしたりレイアウトしたりするための事実上の方法となっています。 デザイナーはスタイルシートを使用して、色、間隔、フォントなどの要素をカバーしながら、ルックアンドフィールの観点からWebサイトをどのように表示するかをブラウザに伝えます。
CSSスタイルは、次の2つの方法で展開できます。
- インライン - ウェブページ自体のコード内で、個人ごとに、要素ごとに
- ウェブサイトがリンクされているスタンドアロンのCSSドキュメント
CSSのベストプラクティス
「ベストプラクティス」とは、最も効果的であると判明したウェブサイトを設計して構築する方法であり、関連する作業に最大限の利益をもたらす方法です。 ウェブデザインのCSSに続いて、ウェブサイトの見た目や機能を可能な限り向上させます。 彼らは他のウェブ言語や技術と共に長年にわたって進化してきました。スタンドアロンのCSSスタイルシートが好まれる使い方になっています。
CSSのベストプラクティスに従うと、次のような方法でサイトを改善できます。
- コンテンツとデザインを分離します。 CSSの主な目標の1つは、HTMLから設計要素を削除し、設計要素を維持するために別の場所に配置することです。 これはデザイナーと開発者を分けて、それぞれの専門分野に焦点を合わせることもできます。 設計者はウェブサイトの外観を維持するための開発者である必要はありません。
- メンテナンスが容易になります。 Webデザインの最も重要な要素の1つはメンテナンスです。 印刷物とは異なり、ウェブサイトは決して「1つで終わった」というわけではありません。 コンテンツ、デザイン、機能は、時間の経過と共に進化することができます。 ウェブサイト全体に散らばっているのではなく、中央の場所にCSSを置くことで、物事をより簡単に維持することができます。
- サイトにアクセスしやすくします。 CSSスタイルを使用すると、検索エンジンや障害者がサイトとやりとりするのに役立ちます。
- サイトを最新の状態に保ちます。 CSSでベストプラクティスを使用することで、安定性が証明されているが、Webデザイン環境の変化に対応できるほど柔軟な標準を遵守しています。
インラインスタイルはベストプラクティスではありません
インラインスタイルは目的を持っていますが、一般的にウェブサイトを維持する最良の方法ではありません。 彼らはベストプラクティスのすべてに反対します：
- インラインスタイルはコンテンツとデザインを区別しません。 インラインスタイルは、現代の開発者が乗り越えている埋め込みフォントや他の厄介なデザインタグとまったく同じです。 スタイルは、適用される特定の個々の要素にのみ影響します。 それによってより細かい制御が可能になる一方、一貫性などの設計や開発の他の側面もより困難になります。
- インラインスタイルはメンテナンスの頭痛を引き起こします。 スタイルシートを使って作業しているときに、スタイルが設定されている場所を把握するのは難しい場合があります。 インライン、埋め込み、 外部スタイルが混在している場合は、チェックする場所がたくさんあります。 ウェブデザインチームで働いている人や、他の人が作ったサイトを再設計したり維持したりしなければならない人は、さらに問題が起こります。 スタイルを見つけて変更したら、配置されているすべてのページのすべての要素でスタイルを変更する必要があります。 それは時間と仕事の予算を天文学的に増加させます。
- インラインスタイルはアクセスできません。 現代のスクリーンリーダーやその他の補助装置では、インラインの属性やタグを効果的に扱うことができますが、古いデバイスではできないものがあります。 余分な文字やテキストは、検索エンジンのロボットによってページがどのように表示されるかに影響するため、検索エンジンの最適化（SEO）の面でもページは機能しません。
- インラインスタイルはページを大きくします。 サイトのすべての段落を特定の方法で表示したい場合は、外部スタイルシートに6行程度のコードで1回行うことができます。 ただし、インラインスタイルを使用する場合は、サイトの各段落にこれらのスタイルを追加する必要があります。 5行のCSSがある場合は、5行にサイトのすべての段落が乗算されます。 その帯域幅と負荷時間は急いで足りるかもしれません。
インラインスタイルの代替：外部スタイルシート
インラインスタイルを使用する代わりに、 外部スタイルシートを使用します 。 CSSベストプラクティスのメリットをご提供し、使いやすくなっています。 このようにして、あなたのサイトで使用されているスタイルはすべて別のドキュメントに保存され、1行のコードでWebドキュメントにリンクされます。 外部スタイルシートは、添付されているすべてのドキュメントに影響します。 つまり、各ページが同じスタイルシートを使用する20ページのWebサイト（通常はどのように行われているか）を使用している場合は、これらのスタイルを編集するだけで、すべてのページを一度に変更できます。 1つのスポットでスタイルを変更することは、ウェブサイトのすべてのページでそのコーディングを検索するよりもずっと便利です。 これにより、長期的なサイト管理がずっと簡単になります。