IDとクラスの命名
要素の目的と用途を反映した ID 名とクラス名、またはその他の一般的な名前を常に使用してください。見た目や曖昧な名前の代わりに。
最も理解しやすく、変更される可能性が低いため、具体的で要素の目的を反映した名前を優先する必要があります。
共通名は複数の要素の代替名にすぎず、兄弟要素間では同じであり、特別な意味はありません。
特別な意味を持ち、多くの場合「ヘルパー」として必要とされるように区別します。
クラス名と ID のセマンティクスはコンピューターの解析にとって実際的な意味はありませんが、
セマンティック名は、表現上の制限を課さない情報を表すため、通常は正しい選択です。
推奨されません
.fw-800 {
フォントの太さ: 800;
}
。赤 {
色: 赤;
}推薦する
。重い {
フォントの太さ: 800;
}
。重要 {
色: 赤;
} ID の合理的な回避
通常、ID をスタイルに適用しないでください。
ID スタイルは再利用できず、ID はページごとに 1 回しか使用できません。
ID の唯一の効果的な使用法は、Web ページまたはサイト全体内の位置を決定することです。
ただし、一度しか使用しない場合を除き、id の代わりに class を使用することを常に検討する必要があります。
推奨されません
#コンテンツ .タイトル {
フォントサイズ: 2em;
}推薦する
.content .title {
フォントサイズ: 2em;
} ID の使用に反対するもう 1 つの議論は、ID を含むセレクターは非常に重み付けされるということです。
ID を 1 つだけ含むセレクターは、1000 個のクラス名を含むセレクターよりも重みが高く、奇妙になります。
// このセレクターは次のセレクターよりも重みが高くなります #content .title {
色: 赤;
}
// このセレクターよりも!
html 本文 div.content.news-content .title.content-title. important {
色: 青;
} CSS セレクターではタグ名を避ける
セレクターを構築するときは、明確で正確かつセマンティックなクラス名を使用する必要があります。タグセレクターは使用しないでください。 コード要素ではなくクラス名のみに注意すれば、保守が容易になります。
分離の観点から考えると、HTML タグ/セマンティクスはプレゼンテーション層に配置されるべきではありません。
順序付きリストを順序なしリストに変更する必要がある場合や、div を記事に変換する必要がある場合があります。
意味のあるクラス名のみを使用する場合、
また、要素セレクターを使用しない場合は、CSS を変更せずに HTML マークアップを変更するだけで済みます。
推奨されません
div.content > header.content-header > h2.title {
フォントサイズ: 2em;
}推薦する
.content > .content-header > .title {
フォントサイズ: 2em;
}できるだけ正確に
多くのフロントエンド開発者は、セレクター チェーンを作成するときに直接サブセレクターを使用しません (注: 直接サブセレクターと子孫セレクターの違い)。
これにより、設計上の問題が発生したり、パフォーマンスが低下したりする場合があります。
ただし、いずれにせよ、これは非常に悪い習慣です。
DOM の末尾に一致する必要がある非常に一般的なセレクターを作成していない場合は、常に直接サブセレクターを考慮する必要があります。
次の DOM について考えてみましょう。
<article class="コンテンツニュース-コンテンツ"> <span class="title">ニュースイベント</span> <div class="コンテンツボディ"> <div class="title content-title"> これをチェックしてください </div> <p>これはニュース記事の内容です</p> <div class="ティーザー"> <div class="title">これを購入</div> <div class="teaser-content">やったー！</div> </div> </div> </記事>
次の CSS は、title クラスを持つ 3 つの要素すべてに適用されます。
次に、コンテンツ クラスの下のタイトル クラスとティーザー クラスの下のタイトル クラスのさまざまなスタイルを解決するには、より正確なセレクターがスタイルを再度書き直す必要があります。
推奨されません
.content .title {
フォントサイズ: 2rem;
}推薦する
.content > .title {
フォントサイズ: 2rem;
}
.content > .content-body > .title {
フォントサイズ: 1.5rem;
}
.content > .content-body > .teaser > .title {
フォントサイズ: 1.2rem;
}略語属性
CSS には、値が 1 つだけ設定されている場合でも、可能な限り使用する必要があるさまざまな省略プロパティ (フォントなど) が用意されています。
省略された属性を使用すると、コードの効率と読みやすさに役立ちます。
推奨されません
CSSコード:
ボーダートップスタイル: なし; フォントファミリー: パラティーノ、ジョージア、セリフ; フォントサイズ: 100%; 行の高さ: 1.6; パディングボトム: 2em; パディング左: 1em; パディング右: 1em; パディングトップ: 0;
推薦する
CSSコード:
ボーダートップ: 0; フォント: 100%/1.6 パラティーノ、ジョージア、セリフ; パディング: 0 1em 2em;
0と単位
「0」値に続く単位を省略します。値がない限り、0 値の後に単位を使用しないでください。
推奨されません
CSSコード:
パディングボトム: 0px; マージン: 0em;
推薦する
CSSコード:
パディングボトム: 0; マージン: 0;
16進数表記
可能な場合は、3 文字の 16 進表記を使用してください。
カラー値によりこのような表現が可能になり、
3 文字の 16 進表現は短くなります。
常に小文字の 16 進数を使用してください。
推奨されません
色: #FF33AA;
推薦する
色: #f3a;
IDとクラス名の間の区切り文字
ID とクラス名の単語を区切るにはハイフン (ダッシュ) を使用します。レッスンの理解を促進するために、セレクター内の単語や略語を接続するためにハイフン (ダッシュ) 以外の文字 (何も使用しない場合も含む) を使用しないでください。
さらに、標準として、デフォルトの属性セレクターは [attribute|=value] の単語区切り文字としてハイフン (ダッシュ) を認識します。
したがって、区切り文字としてはハイフンを使用することをお勧めします。
推奨されません
.demoimage {}
.error_status {}推薦する
#ビデオID {}
.ads-sample {}ハック
ユーザー エージェントの検出と CSS の「ハッキング」を回避し、最初に別のアプローチを試してください。スタイルの違いは、ユーザー エージェントの検出や特別な CSS フィルター、回避策、ハックによって簡単に解決できます。どちらの方法も、効率的で管理しやすいコード ベースを実現および維持するための最後の手段として考慮する必要があります。言い換えれば、長期的にはユーザー エージェントの検出とハッキング
プロジェクトは常に最も抵抗の少ない道を歩むべきであるため、プロジェクトに悪影響を及ぼします。とはいえ、ユーザー エージェントによる検出やハッキングは、将来的には頻繁に使用される可能性があります。
申告命令
これは、セレクター内で CSS プロパティが書き込まれる順序の大まかな概要です。これは、可読性とスキャン性を向上させるために重要です。
ベスト プラクティスとして、次の順序に従う必要があります (以下の表の順序になっている必要があります)。
構造特性:
画面
位置、左、上、右など
オーバーフロー、フロート、クリアなど。
マージン、パディング
表現力豊かなプロパティ:
背景、枠線など
フォント、テキスト
推奨されません
。箱 {
フォントファミリー: 'Arial'、サンセリフ;
ボーダー: 3px ソリッド #ddd;
左: 30%。
位置: 絶対;
テキスト変換: 大文字;
背景色: #eee;
右: 30%。
isplay: ブロック;
フォントサイズ: 1.5rem;
オーバーフロー: 非表示;
パディング: 1em;
マージン: 1em;
}推薦する
。箱 {
表示: ブロック;
位置: 絶対;
左: 30%。
右: 30%。
オーバーフロー: 非表示;
マージン: 1em;
パディング: 1em;
背景色: #eee;
ボーダー: 3px ソリッド #ddd;
フォントファミリー: 'Arial'、サンセリフ;
フォントサイズ: 1.5rem;
テキスト変換: 大文字;
}声明の終わり
一貫性と拡張性を確保するには、各ステートメントをセミコロンで終了し、各ステートメントを新しい行で囲む必要があります。
推奨されません
CSSコード:
。テスト {
表示: ブロック高さ: 100px
}推薦する
CSSコード:
。テスト {
表示: ブロック;
高さ: 100ピクセル;
}属性名の終わり
プロパティ名のコロンの後にスペースを使用します。一貫性の理由から、
属性と値の間には常にスペースを使用します (ただし、属性とコロンの間にはスペースを使用しないでください)。
推奨されません
CSSコード:
h3 {
フォントの太さ:太字;
}推薦する
CSSコード:
h3 {
フォントの太さ: 太字;
}セレクターと宣言の分離
セレクターとプロパティの宣言ごとに常に新しい行を使用してください。
推奨されません
CSSコード:
a:フォーカス、a:アクティブ {
位置: 相対; 上: 1px;
}推薦する
CSSコード:
h1、
h2、
h3 {
フォントの太さ: 通常;
行の高さ: 1.2;
}ルールの分離
ルールは常に空白行 (二重改行) で区切られます。
推薦する
CSSコード:
html {
背景: #fff;
}
体 {
マージン: 自動;
幅: 50%;
}CSSの引用符
属性セレクターまたは属性値は、一重引用符 (") ではなく二重引用符 ("") で囲みます。
URI 値 (url()) には引用符を使用しないでください。
推奨されません
CSSコード:
@import url('//cdn.com/foundation.css');
html {
フォントファミリー: 'open sans'、arial、sans-serif;
}
本文:{の後
内容: '一時停止';
}推薦する
CSSコード:
@インポートURL(//cdn.com/foundation.css);
html {
font-family: "open sans"、arial、sans-serif;
}
本文:{の後
内容: 「一時停止」;
}セレクターのネスト (SCSS)
Sass ではセレクターをネストできるため、コードがすっきりして読みやすくなります。すべてのセレクターをネストしますが、コンテンツのないセレクターをネストすることは避けてください。
子要素にスタイル属性を指定する必要があり、親要素にスタイル属性がない場合は、
通常の CSS セレクター チェーンを使用できます。
これにより、スクリプトが複雑になりすぎることがなくなります。
推奨されません
CSSコード:
// ネストをまったく利用していないため、良い例ではありません
。コンテンツ {
表示: ブロック;
}
.content > .news-article > .title {
フォントサイズ: 1.2em;
}推奨されません
CSSコード:
// ネストを使用する方が良いですが、すべての場合に使えるわけではありません
// 属性がない場合はネストを避け、代わりにセレクター チェーンを使用します
。コンテンツ {
表示: ブロック;
> .ニュース記事 {
> .title {
フォントサイズ: 1.2em;
}
}
}推薦する
CSSコード:
// この例では、ネスト中に最善のアプローチを採用していますが、可能な場合はセレクター チェーンを使用します。
。コンテンツ {
表示: ブロック;
> .ニュース記事 > .title {
フォントサイズ: 1.2em;
}
}ネストでの空白行の導入 (SCSS)
ネストされたセレクターと CSS プロパティの間には空の行を残します。
推奨されません
CSSコード:
。コンテンツ {
表示: ブロック;
> .ニュース記事 {
背景色: #eee;
> .title {
フォントサイズ: 1.2em;
}
> .article-脚注 {
フォントサイズ: 0.8em;
}
}
}推薦する
CSSコード:
。コンテンツ {
表示: ブロック;
> .ニュース記事 {
背景色: #eee;
> .title {
フォントサイズ: 1.2em;
}
> .article-脚注 {
フォントサイズ: 0.8em;
}
}
}コンテキスト メディア クエリ (SCSS)
Sass では、セレクターをネストするときにコンテキスト メディア クエリを使用することもできます。
Sass では、任意のネスト レベルでメディア クエリを使用できます。
結果の CSS は、メディア クエリがラップされたセレクターとしてレンダリングされるように変換されます。
この技術はとても便利ですが、
メディア クエリが属するコンテキストを保持するのに役立ちます。
最初のアプローチでは、最初にモバイル スタイルを作成し、次にコンテキスト メディア クエリを使用して、必要な場所にデスクトップ スタイルを提供できます。
推奨されません
CSSコード:
// このモバイル ファーストの例は、SCSS の構造全体が繰り返される単純な CSS のように見えます
// メディア クエリの下部にあります。これはエラーが発生しやすく、関連付けが難しいためメンテナンスが困難になります。
// メディアクエリのコンテンツを上部のコンテンツに (モバイル スタイル)
.content-ページ {
フォントサイズ: 1.2rem;
> .main {
背景色: 白煙;
> .最新ニュース {
パディング: 1レム;
> .ニュース記事 {
パディング: 1レム;
> .title {
フォントサイズ: 2rem;
}
}
}
> .content {
マージントップ: 2rem;
パディング: 1レム;
}
}
> .ページフッター {
マージントップ: 2rem;
フォントサイズ: 1rem;
}
}
@media screen and (min-width: 641px) {
.content-ページ {
フォントサイズ: 1rem;
> .main > .最新ニュース > .ニュース記事 > .title {
フォントサイズ: 3rem;
}
> .ページフッター {
フォントサイズ: 0.8rem;
}
}
}推薦する
CSSコード:
// これは上記と同じ例ですが、ここでは異なるスタイルを配置するためにコンテキスト メディア クエリを使用します。
// さまざまなメディアを適切なコンテキストに変換します。
.content-ページ {
フォントサイズ: 1.2rem;
@media screen and (min-width: 641px) {
フォントサイズ: 1rem;
}
> .main {
背景色: 白煙;
> .最新ニュース {
パディング: 1レム;
> .ニュース記事 {
パディング: 1レム;
> .title {
フォントサイズ: 2rem;
@media screen and (min-width: 641px) {
フォントサイズ: 3rem;
}
}
}
}
> .content {
マージントップ: 2rem;
パディング: 1レム;
}
}
> .ページフッター {
マージントップ: 2rem;
フォントサイズ: 1rem;
@media screen and (min-width: 641px) {
フォントサイズ: 0.8rem;
}
}
}ネストされた順序と親セレクター (SCSS)
Sass のネスト機能を使用する場合、
重要なのは、明確なネスト順序を持つことです。
SCSS ブロックの順序は次のとおりです。
現在のセレクターのスタイル属性<br/>親セレクターの疑似クラス セレクター (:first-letter、:hover、:active など)
疑似クラス要素 (:before および :after)
親セレクターの宣言スタイル (.selected、.active、.enlarged など)
Sass のコンテキスト メディア クエリ サブセレクターを最後の部分として使用する
次の例は、Sass 親セレクターを使用しながら、この順序付けによって明確な構造がどのように実現されるかを示しています。
推奨
CSSコード:
.product-teaser {
// 1. スタイル属性
表示: インラインブロック;
パディング: 1レム;
背景色: 白煙;
色: グレー;
// 2. 親セレクターを持つ疑似セレクター
&:ホバー {
色: 黒;
}
// 3. 親セレクターを持つ疑似要素
＆：前に {
コンテンツ： "";
表示: ブロック;
ボーダートップ: 1px ソリッドグレー;
}
＆：後 {
コンテンツ： "";
表示: ブロック;
ボーダートップ: 1px ソリッドグレー;
}
// 4. 親セレクターを持つ状態クラス
＆。アクティブ {
背景色: ピンク;
色: 赤;
// 4.2. 状態クラスセレクター内の疑似セレクター
&:ホバー {
色: ダークレッド;
}
}
// 5. コンテキストメディアクエリ
@media 画面と (最大幅: 640px) {
表示: ブロック;
フォントサイズ: 2em;
}
// 6. サブセレクター
> .content > .title {
フォントサイズ: 1.2em;
// 6.5. サブセレクターでのコンテキスト メディア クエリ
@media 画面と (最大幅: 640px) {
文字間隔: 0.2em;
テキスト変換: 大文字;
}
}
}