実践で学ぶRuby on rails 〜仮説千本ノック〜

プログラマーとして独立するため日々スキルアップに励んでいます。優れたプログラマは仮説を立てるのがうまい。そこを目指して仮説を立てては検証する日々です!!

クラス名の決め方(囲み系)

やりたいこと

複数の要素を内包するブロックのクラス名には、

・container(wrapper)

・inner

・outer

・content

・box

などなど、様々なものが使われている。

 

それぞれのクラス名がどのようなケースで使用すべきなのか、明らかにし、クラス名の選択に迷わないようにしたい。

 

使い分けの基準

・container(wrapper)

全てのブロックを囲む親分ブロック。

ページ全体の幅、背景などはここに設定する。

 

・inner

containerが内容する複数の要素を全て囲むブロック。(divなど)

意味がある囲みというより、

囲むと、widthなどが綺麗に決まるなどのレイアウトの便宜上の理由から囲むイメージ。

 

・content

innerのうち、そのページの主役となる内容。

フリマサイトの詳細ページで言うなら、

商品の情報部分。

コメント欄や、サイドナビなどは含まない。

 

・box

一つの機能のために働く要素群を囲む狭いグルーピング。

複数あるSNSボタンを囲んだり、

検索ボックスのテキストエリアと実行ボタンを囲んだり。