スタイルをより標準化するための CSS の書き方に関する 5 つのヒント

1. CSSをアルファベット順に並べる
アルファベット順ではありません:

コードをコピー

コードは次のとおりです。

div#ヘッダー h1 {
zインデックス: 101;
色: #000;:
位置: 相対的;
行の高さ: 24px;
右マージン: 48px;
下部境界線: 1px 実線 #dedede;
フォントサイズ: 18px;
}

アルファベット順:

コードをコピー

コードは次のとおりです。

div#ヘッダー h1 {
下部境界線: 1px 実線 #dedede;
色: #000;
フォントサイズ: 18px;
行の高さ: 24px;
右マージン: 48px;
位置: 相対的;
zインデックス: 101;
}

その理由は、特定の属性を見つける方が良いからです。
2. CSS 構造をより適切に整理する<br />CSS コメントを使用して CSS をグループ化すると、構造が明確になり、共同設計が容易になります。
/****リセット****/
www.sytm.net より
xxxxx{xxxxx}
/*****レイアウト*****/
www.sytm.net より
xxxxx{xxxxx}
3. 一貫性を保つ<br />セレクターのすべての属性を 1 行に記述する方がよいのか、それとも各属性を 1 行に記述する方がよいのかを議論して時間を無駄にしないでください。 1 行で記述する場合、1 行に 1 行記述すると、ドキュメント全体が長くなりすぎて見つけにくくなるためです。しかし、チーム内の別の人に送信する場合、その人は各文を 1 行にまとめることを好みます。どうすればよいでしょうか?実はとても簡単です。CSS を W3C に送信して検証するだけで、各行に自動的に変換された結果が生成されます。
4. 最初にマークアップ、次に CSS
CSS を書く前に HTML マークアップを完了しておくと、エラーが発生しにくくなります。例えば、ページを書くときは、まず基本的なタグ構造<body>を記述します。

コードをコピー

コードは次のとおりです。

次に、スタイルを設定する各要素にセレクターを追加するのではなく、子セレクターを有効活用するようにしてください。
5. CSS リセット<br />Eric Meyer リセット、YUI リセット、またはその他の CSS リセットをコピーできますが、プロジェクトに応じて独自のリセットに変更する必要があります。
* { margin: 0; padding: 0; } この文はラジオボタンなどの一部の要素には適用されませんが、ラジオボタンがある場合はリセットするだけで済みます。

<<: CSS3 における擬似クラスの一般的な使用法の詳細な説明

>>: Vueエンジニアがカプセル化しなければならない埋め込み命令の知識のまとめ