HTML
CSS

HTML/CSSのメモ

階層的な命名はネームのコリジョンが発生しやすい。CSSの変更が面倒になりやすい。

<div class="box">
  <p class="line"></p>
  <a class="link"></a>
</div>
.link {/* ここと */}
.box {}
.box .line {}
.box .link {/* ここがコリジョン */}

一意的な命名はコリジョンが発生しにくい。セレクターが少なくても適応しやすい。

<div class="box">
  <p class="box-line"></p>
  <a class="box-link"></a>
</div>

.link {}
.box {}
.box-line {/* .box がなくても指定できる */}
.box-link {/* 同上 */}

しかし一意的な命名はclass名が長くなりやすい。

<div class="ore-no-component">
  <p class="ore-no-component_text-line"></p>
  <a class="ore-no-component_hyper-link"></a>
</div>

特注品は汎用性がなく拡張性も低いが、細かいレイアウトが可能。しかし他のコンポーネントを含んだ全体の統一が取りづらい。

<div class="koko-dake-special">
  <div class="special-na-parts"></div>
</div>
.koko-dake-special {/* we are the special */}
.koko-dake-special .special-na-parts {/* one time only */}

汎用品(コンポーネント?)はHTML側に拡張作業が移る。全体の統一を取りやすい。拡張性も高い。

<div class="medium-row balloon">
  <p class="pride"></p>
</div>
.medium-row { margin: 0 0 16px 0; }
.balloon { padding: 8px; }
.pride { line-height: 24px; }

基本はコンポーネントを使い、HTML上で既存のコンポーネントで形作ることが出来るか試し、部品が足りなければコンポーネントを新規に定義し、目的とするデザインを組み立てるためにはHTMLとコンポーネントをどのように組み合わせればいいのかを試行錯誤すると良さそう。特注品はとにかく保守性が低い。変更も難儀する。コンポーネントはHTML上で試行錯誤が出来る≒CSSの変更コストが低い。

<div class="medium-row balloon">
  <p class="pride"></p>
</div>

<div class="large-row large-balloon">
  <p class="pride"></p>
</div>

問題はコンポーネントの名前だが、あとで置き換えが可能なようにユニークな名前を付けておくと良さそう。短すぎる名前はコリジョンが発生しやすい(Bootstrapのrowとかbtnとか)。

<div class="good-will-hunting"></div>

タイピング量と可読性の問題が出るが、その問題は既出の問題よりは大したことがない。エディタの検索と置換えで対応できる。問題は置き換えしづらい名前。