本文は「堅牢なUIデザインの寸法ガイドby鄭燦明|クイックキャンパス」課の総括である.

Naming things

「コンピュータ科学には2つの難題がある.
キャッシュを無効にし、Phil Karltonと名前を付けます.

ネーミング・ルールを誤って管理したケース

無名

.bx {...}
.cnt {...}
.mt {...}

グローバルスペースのプリエンプトに関する一般的な名前

.content {...}
.button {...}
.top {...}

選択ルールを誤って管理したケース

//reset.css 
a { text-decoration: none; } 

//local.css 
.module a { text-decoration: underline; } 
#special.module a { text-decoration: none; } // X 
#another#special.module a { text-decoration: underline; } // X

CSSセレクタ固有(セレクタ優先度ルール)

idclass, [attr], :classtype,::element000
a0, 0, 1 -> 001.a0, 1, 0 -> 010#a1, 0, 0, -> 100#a a1, 0, 1, -> 101#a a a1, 1, 1, -> 111#a#b[href]::before2, 1, 1 -> 211
コメントリンク

https://www.w3.org/TR/selectors/

https://specificity.keegan.st/

CSS selector specificity

https://cssstats.com/はCSSコレクターの使用状況を評価するサイトです.

BEM State 2020(満足度:81.84%)

BEMの命名規則

ブロック再利用可能な独立ブロック

Elementブロックを構成する従属子要素

Modifierブロックまたは要素の変形(形状、状態、動作)
参考資料:https://en.bem.info/

BEM特性

セマンティッククラスセレクタ命名規則.

その他のフォーマットの選択プログラム制限.

戦区唯一の名前をお勧めします.

は低選択者特異性を維持する.

HTML/CSS接続がばらばらです.パラレル開発可能
参考資料:https://naradesign.github.io/bem-by-example.html

BEMの命名規則

の2つの下の欄()はサブ要素

を表す.

ハイフン(－)は、ステータス遷移

を表す

という名前の要素で、

は1回に1回しか変換できません.

.block {}
.block__element {}
.block__element--modifier {}
.block-modifier {}

区切り記号(、--)以外の1～3種類の記述子フォーマットは許可されません.

BEMの選択

オプション:キーワードの接続方法

PascalCase:大文字順

camelCase:2番目の単語から大文字で始まる(推奨)

kebak-case:単語ハイフネーション(-)でタグ

を区切ります.

Snakecase:単語ベースライン()で区切られたタグ

BEM適用例

名前空間接頭辞の使用を推奨し、camelCaseの例を使用します.

.lzModal{}
.lzModal__title{}
.lzBtn{}
.lzBtn--small{}
다른 라이브러리와 공존 가능

BEM例

[ブロック](Block)には、必ずしも要素や変形が必要ではありません.

// 단순 블록 O
<button class="btn"> 

[変形](Deformation)は、ブロックまたは要素のスタイルを拡張します.

// 변형 추가 O 
<button class="btn btn--submit"> 
<em class="info__label info_label--warning">

変形クラスは排他的に使用できません.常にブロックまたは要素とともに使用されます.

// 변형 단독 X 
<button class="btn--submit">
// 변형 추가 O 
<button class="btn btn--submit"> 
<em class="info__label info_label--warning">

「選択者特異性」が向上したオーバーラップ構造であり、タイプ選択者はanti-patternである.

// X 
.photo {} /* 특이성 10 */ 
.photo img{} /* 특이성 11 */ 
.photo figcaption{} /* 특이성 11 */ 

制御するすべての要素にクラス名を付けます.管理特異性.

// O 
.photo {} /* 특이성 10 */ 
.photo__img{} /* 특이성 10*/ 
.photo__caption {} /*특이성 10 */ 

ブロック/要素名の省略を禁止します.要素/変形名の重複を禁止します.

// X 
.__elem {} 
.--modi {} 
.block__elem1_elem2{} //elem이름 두번 작성 x
.block--modi1-modi1{}

Summary

意味論起名法で読むと分かりやすいです.

の辺鄙な名前は略語を使わない.

の特異性は「020」よりも小さく維持される.

選択者の名前は、グローバル空間において一意である.

HTML/CSSは並行して開発可能です.

Atomic/Utility First CSSのメリット(2番目のメリット)

ライブラリタイプで、

を迅速に構築できます.

は、

を他の方法とともに使用することができる.

スタイルの観点の名前.無意味

スタイルの高さ

HTMLコード

にリンク

HTML/CSSは並行して開発できません.

スモールチームまたは単一エンジニアの開発に適しています