HTML+CSS プロジェクトの概要

ここ一ヶ月ほどの勉強で、HTML+CSSの使い方や特徴はほぼマスターしました。

今週は、先生から PC での実践的なプロジェクトが課せられ、3 ～ 4 日以内に完了するよう要求され、私は食事と睡眠を忘れて、限られた時間内で大まかに完了しましたが、一部の効果は達成できませんでした。結局のところ、時間は限られており、能力も限られています。この実戦を経て、これについてはさまざまな結論が出ました:

1. 技術概要

1. 開発前に、このプロジェクトのすべての設計図を最初から最後まで読んで、たとえば各ページの先頭と下部が同じであることに注意して、それらを抽出します。これにより、開発効率が大幅に向上します。

2. 開発プロセス中に、何度も CSS スタイルを繰り返し書いたため、開発速度が遅くなりました。 このようにして、個人の習慣や趣味に基づいた CSS フレームワーク、base.css を作成できます。デフォルトのスタイルをリセットし、ユニバーサル スタイルを提供するために使用されます。ただし、チーム開発においては、各メンバーが同じ「base.css」を使用することが当然ベストであり、そのほうが分かりやすく、チーム開発の効率も向上します。

以下は私が最初に個人的に使用したbase.cssのセットです:

リーリー

3. HTML コーディング標準: HTML 標準とセマンティクスに従うことを前提として、使用するタグを最小限にし、最小限の複雑さを維持するように努めます。

例: 別の画像を導入する場合、 タグを使用する代わりに、 タグを直接使用できます。

4. ブートストラップには CSS に関するコーディング標準が多数ありますが、ここでは最も実用的なもののいくつかについて説明します。

①セレクターが複数ある場合は、セレクターを別の行に置きます。

②コードを読みやすくするために、各宣言ブロックの左中括弧の前にスペースを追加し、各宣言ブロックの右中括弧を別の行に配置し、各ステートメントを別の行に配置する必要があります。

③属性値はカンマで区切られており、各カンマの後にスペースを挿入する必要があります。

④1未満の小数点の前の0を省略します（例：0.5の代わりに.5を使用します）。

⑤値が0の場合は単位を省略します(例: margin: 0;)

5. コードのコメント: 私の哲学では、コメントは 2 つのタイプに分けられ、1 つはコンテンツ ブロックを分割するために使用され、もう 1 つは特定のコードを説明するために使用されます。コードのコメントを書くと、後のメンテナンスが容易になり、他の人も理解しやすくなります。

リーリー

6. clss と id の命名に関しては、ピンインや純粋な数字の代わりに英語の単語を使用するのが最善です。英語の単語が長すぎる場合は略語を使用できますが、他の人が理解できる場合は略語を使用します。クラスに複数の項目がある場合は、(.box01 .box02 .box03...) など、英単語 + 数字を使用できます。

2. メンタルのまとめ

長時間コードを書いていると、イライラしたり、気が狂ったりすることは避けられません。メンタルを調整しないと続けるのは難しいでしょう。周囲の環境に影響を受けることもあります。私の場合、通常、コードを書くときは、ヘッドフォンを付けて音楽を聴き、世界から自分を隔離します。