XHTML+CSS Web ページ作成における美しいスタイルシートの適用

XHTML+CSS Web ページ作成における美しいスタイルシートの適用
これはかなり前に書かれた記事です。今となっては、その中の考え方は学ぶ価値があるように思えます。jb51.net の事例を研究しながら、理論的な知識も学んでおくと、知識の飛躍に非常に役立つでしょう。さあみんな!

私は、Zeldman 氏の代表作である「Designing with Web Standards」(中国語版は「Website Refactoring」(第 2 版))を読んで以来、深い感銘を受け、Web 標準を使用してプロジェクトを開発および実装するという私の考えを強化しました。しかし、Web 標準とは何か、それを実際のプロジェクトにどのように適用するかを知るだけでは十分ではありません。 Web 標準の各コンポーネントを 1 つずつ学習して適用し、1 つずつ分解して初めてその本質を発見することができます。私のようなウェブ開発者やデザイナーにとって、この原則を理解し、的を絞った学習と実践を行えば、より多くのことが得られ、中国におけるウェブ標準の適用に貢献できると信じています。 (ハハ、これは少し自慢しているように聞こえるかもしれませんが、実際、これは私たちソフトウェア実務者のほとんどにとっての理想です。)

今は Web2.0、さらには 3.0 の時代であり、XHTML、XML、CSS、ECMAScript、DOM の時代です。これらは最終的なテクノロジーではありませんが、組み合わせることでソリューションが形成されます。これは、下位互換性のある Web サイトを構築する計画の基盤であり、Web 標準に準拠した Web サイトを作成するために必要な技術的基盤です。私たちは、より多くのユーザーのサポートと訪問を獲得するだけでなく、長期間にわたってユーザーの注目を集める、長持ちする美しい Web サイトを構築したいと考えています。 CSS を使用して Web サイトを改善する方法を学ぶことは、注目を集める良い方法であり、Web2.0 時代の流行の開発トレンドでもあると私は信じています。以下では、CSS テクノロジーから得た経験についてのみ説明します。

CSS の専門家になりたい場合、CSS セレクターの使用に習熟するだけでは十分ではありません。また、作業全体の計画、ワークフローの習熟、スタイルシートの保守性と効率性の向上にも依存します。 CSS を使用すると、私たちが望む素晴らしい Web サイトを作成できます。また、CSS を記述すること自体も楽しいものです。 では、より魅力的なスタイルシートを作成するにはどうすればよいでしょうか?スタイルシートにはどのような特性が必要ですか?勉強と私自身の仕事経験を組み合わせて、絶妙なスタイルシートを作成するための優れた方法をまとめました。

1. CSSにマークアップを詰め込みすぎない

スタイルシートをリンクまたはインポートするのは困難な作業のように思えるかもしれません。多くのウェブサイト開発者がきちんと整理された CSS ドキュメントを持っているのを見てきましたが、短期間ですぐに更新できなかったり、管理が面倒だったりして、以前作成した精巧なスタイルシートがだんだんとゴミになってしまいます。何百ものコンテンツを公開する必要がある大規模な Web サイトで作業する場合。時間は限られているため、すばやく変更や更新を行うには、CSS をネストまたは配置する必要があります。この習慣は時間が経つにつれて続き、ある日、サイトが完全に再設計される(ただしコンテンツは同じまま)と言われ、テストを含めて作成に 1 週​​間しか残されていないことになります。一般的に言えば、スタイルシートの更新は、長期間にわたってサイトの散在する領域に変更を加えたり、サイトのスタイルシート構造を全体的に把握していない場合を除き、非常に簡単なアプローチです。

スタイルシートのリンクやインポートは、行き当たりばったりの作業ではありません。きれいなスタイルシートを作成し、それに従えば、仕事がより楽しくなります。注意: コンテンツを更新または追加するたびに新しいスタイルシートを作成しようとすると、間違いなく問題が発生します。リンクおよびインポートされたスタイルシートが多すぎると、バグの排除が困難になり、スタイルシートの保守が困難になる可能性があります。大規模な Web サイトでは、さまざまな部分ごとに個別のスタイルシートを作成するのは当然のことです。ただ、極端になりすぎないように注意してください。スタイルシートを大量に追加すると、HTTP リクエストが増加し、その後の作業に影響する可能性があります。

2. 意味的な定義は明確で理解しやすい

コンテンツを表現するのに最も適切で意味のある要素を選択するだけでなく、class 属性と id 属性の値も必ず選択する必要があります。明確な定義によりメンテナンスが容易になり、チーム全員が理解できるようになります。この定義を見てください:

.l10k { color: #369; } 、 .left-blue { color: #369; } 、私が作った場合、その意味は分かるかもしれませんが、他の人は理解できないかもしれません。たとえ今日その意味を知っていたとしても、何年も経った後もその意味を知っていると保証できるでしょうか? クラス属性に色や長さ、幅の寸法を追加しないことをお勧めします。より適切な命名規則は次のとおりです: .work-description { color: #369; }

3. 条件付きコメントを追加するタイミングとテクニックの適用方法を知る

いくつかのトラブルシューティング手法について多くの記事が書かれており、条件付きコメントは IE のリリースを制御するのに適した方法です。条件付きコメントは CSS 全体に記述するよりもはるかに優れていることに同意しますが、最近、これが最善の解決策ではないという証拠がたくさんあることに気づきました。要素に最小の高さを設定したいのですが、IE6 ではそれが強制されないため、使用できる高さはすべて同じように扱われることがわかります。スタイルシートを再構築し、マークアップに条件付きコメントを追加して、このルールに従うだけで済むようにしてみませんか?最小の高さと高さのルールを一緒にして、トリックを選択して同じ CSS ドキュメントに保持する方がよいのではないでしょうか。この場合、このアプローチを使用するのは難しいと思います。

4. WebページにCSSを適用し、外部スタイルシートを使用する

何かメリットはありますか?誰もがこれについてはかなり明確に認識しており、もちろん、コードの再利用を最大化し、Web サイト ファイルの構成を最適化できることは否定できない点です。
さて、上記は私の個人的な意見の一部です。友人たちが私にもっと多くの提案をしてくれることを願っています。あなたの提案は、困難に挑戦する私のモチベーションです!ありがとう!

<<:  Vue カプセル化コンポーネント アップロード画像コンポーネント

>>:  MySQL 5.7 クラスタ構成手順

推薦する

KVM 仮想化のインストール、展開、管理のチュートリアル

目次1.kvmの展開1.1 kvmのインストール1.2 kvm Web管理インターフェースのインスト...

MySQLの共同クエリ最適化メカニズムの詳細な説明

目次MySQL フェデレーテッド クエリ実行戦略。実行計画フェデレーテッドクエリオプティマイザーMy...

ウェブデザインにおける画像フォーマットとデザインの関係を詳しく説明

なぜこの領域のコンテンツを整理したいのでしょうか。それは、油絵の具とキャンバスを理解する必要があり、...

flex-grow、flex-shrink、flex-basis、9グリッドレイアウトを理解する

1. flex-grow、flex-shrink、flex-basis プロパティflex-grow...

Nginx は動的と静的の分離を実装します 例の説明

ウェブサイトの解析を高速化するために、動的ページと静的ページを異なるサーバーで解析して、解析速度を向...

Portainer を使用して Docker のビジュアル インターフェースを構築する方法

ポーテナーの紹介Portainer は、ステータス表示パネル、アプリケーション テンプレートの迅速な...

HTML文書におけるol要素の数値制限に関する議論

一般的に言えば、HTML ドキュメント内で極端に大きな <ol> リストに遭遇する可能性...

HTMLは角丸四角形を簡単に実装します

質問: div+css と配置を使用して角丸四角形を実現するにはどうすればよいですか?ソリューション...

JavaScript マクロタスクとマイクロタスクの実行順序についての簡単な説明

目次1. JavaScriptはシングルスレッドです1. 同期タスク2. 非同期タスク2. タスクキ...

UbuntuはCUDAの複数のバージョンをインストールし、いつでも切り替えることができます

CUDA とは何かを紹介するのではなく、複数の CUDA バージョンの共存とリアルタイム切り替えをど...

SSL で Nginx リバース プロキシを構成する簡単な手順

序文リバース プロキシは、Web 経由で行われたリクエスト (http と https の両方) を...

Mysql の mysql.user ユーザー テーブルの詳細な説明

MySQL は、異なるユーザーに異なる権限を割り当てることができるマルチユーザー管理データベースであ...

JavaScript シミュレーション計算機

この記事では、JavaScriptシミュレーション計算機の具体的なコードを参考までに紹介します。具体...

CSS 位置プロパティが絶対の場合のパーセンテージ値の計算

位置が絶対の場合、関連する属性のパーセンテージは、参照先の要素 (包含ブロック) を基準として計算さ...

Windows 64 ビット版 MySQL 5.7 以降の解凍パッケージにデータディレクトリと my-default.ini がなく、サービスが起動できない問題の簡単な解決方法 (問題概要)

私は SQL の初心者で、オープンソースのインストールは非常に簡単だと思っていましたが、その過程でい...