思いついたら足していく
「コンポーネントのエレメントのエレメントのエレメントの...」として定義している
<div class="v1-news">
<div class="v1-news__header">NEWS</div>
<div class="v1-news__body">
<div class="v1-news__body__item">
<div class="v1-news__body__item__date">2014/12/10</div>
<div class="v1-news__body__item__text">【お知らせ】2014年12月25日(木)19:00から20:00まで、サーバメンテナンスを実施致します。該当時間は、サービスの御利用ができませんので、ご容赦願います。</div>
</div>
<div class="v1-news__body__item">
<div class="v1-news__body__item__date">2014/10/18</div>
<div class="v1-news__body__item__text">【お知らせ】2014年10月18日(木)19:00から20:00まで、サーバメンテナンスを実施致します。該当時間は、サービスの御利用ができませんので、ご容赦願います。</div>
</div>
</div>
</div>
BAD1をキャメルケースにしただけ
<div class="v1-news">
<div class="v1-news__header">NEWS</div>
<div class="v1-news__body">
<div class="v1-news__bodyItem">
<div class="v1-news__bodyItemDate">2014/12/10</div>
<div class="v1-news__bodyItemText">【お知らせ】2014年12月25日(木)19:00から20:00まで、サーバメンテナンスを実施致します。該当時間は、サービスの御利用ができませんので、ご容赦願います。</div>
</div>
<div class="v1-news__Item">
<div class="v1-news__bodyItemDate">2014/10/18</div>
<div class="v1-news__bodyItemText">【お知らせ】2014年10月18日(木)19:00から20:00まで、サーバメンテナンスを実施致します。該当時間は、サービスの御利用ができませんので、ご容赦願います。</div>
</div>
</div>
</div>
エレメントは全て「ブロックのエレメント」として定義する。これができない場合、すでにそれは別のブロックなのではないかを疑う。
<div class="v1-news">
<div class="v1-news__header">NEWS</div>
<div class="v1-news__body">
<div class="v1-news__item">
<div class="v1-news__date">2014/12/10</div>
<div class="v1-news__text">【お知らせ】2014年12月25日(木)19:00から20:00まで、サーバメンテナンスを実施致します。該当時間は、サービスの御利用ができませんので、ご容赦願います。</div>
</div>
<div class="v1-news__item">
<div class="v1-news__date">2014/10/18</div>
<div class="v1-news__text">【お知らせ】2014年10月18日(木)19:00から20:00まで、サーバメンテナンスを実施致します。該当時間は、サービスの御利用ができませんので、ご容赦願います。</div>
</div>
</div>
</div>
将来の拡張を充分に考えていない
<div class="v1-heading1">見出し</div>
将来の拡張を考える
<div class="v1-header">
<div class="v1-header__heading">見出し</div>
</div>
上記は
<div class="v1-header">
<div class="v1-header__heading">見出し</div>
<div class="v1-header__more"><a href="#">詳細</a></div>
</div>
みたいになるかもしれない。似た例として、表やリストもある
<table class="v1-table">
...
</table>
上記は
<div class="v1-table">
<div class="v1-table__caption">表のキャプション</div>
<table class="v1-table__table">
...
</table>
</div>
みたいになるかもしれない。(caption要素はその特殊性から信用できないので)
- テキストの揃え方向
- テキストの色 (数色程度)
- テキスト大きさ (数種類程度)
はグローバルなモディファイアにおいておくと便利。「なんでここだけ右寄せなの」を解決するための手段。これはただしあくまでも例外用。どうしてもエレメントの定義に収まらない場合にだけ使う。
<div class="v1-leadText">text</div>
<div class="v1-leadText v1-leadText--alignCenter">text</div>
<td class="v1-table__cell--alignRight">1,000</td>
<div class="v1-leadText">text</div>
<div class="v1-leadText v1--alignCenter">text</div>
<td class="v1--alignRight">1,000</td>
.v1-infoSection{
margin: 0;
border: 1px solid #ccc;
...
}
通常は積んでいけるようにしておく。必要に応じて、兄弟セレクターやモディファイアで上下余白を調整する。
.v1-infoSection{
margin: $blockMargin 0;
border: 1px solid #ccc;
...
}
<div class="v1-otherBlock">...</div>
<div class="v1-infoSection">...</div>
<div class="v1-otherBlock">...</div>
奥の手だけれど、v1--blockmarginZero
みたいにモディファイアで用意しておいても便利
CSSとしては、見た目が似ていれば、モディファイアーで切り分けたくなります。
しかし、見た目が似ていても、用途が異なるならそれは別のコンポーネントです。モディファイアーで分けるべきはありません。
例えば、h3
とth
は用途は別です。
コンポーネントは、HTMLのvideoタグ作る感覚。 一つのコンポーネントですべてが完結。
連続する場合は、
bad
<div class="myComponent">
<div class="myComponent__body">
内容
</div>
<div class="myComponent__body">
内容
</div>
</div>
ではなく、
good
<div class="myComponent">
<div class="myComponent__body">
内容
</div>
</div>
<div class="myComponent">
<div class="myComponent__body">
内容
</div>
</div>
とすると管理しやすい。
HTMLのUL
とLI
は別の要素であるように、コンポーネントも別々でそれぞれが疎結合になるようにしておくと明確!
必要なら別コンポーネントとしてコンテナー作ってもいい
<div class="myComponentList">
<div class="myComponent">
<div class="myComponent__body">
内容
</div>
</div>
<div class="myComponent">
<div class="myComponent__body">
内容
</div>
</div>
</div>
ありがとうございます。
的を射た指摘だと思います。悪い例と良い例の対比はとてもわかりやすいです。
今後の開発の参考にさせていただきます。