0
0
現状
HTML,CSSを勉強しています
クラス名をつけるのがとても苦手で、最近CSSの完全設計ガイドを購入しました
BEM設計を取り入れたいと思い練習中なのですが、複数ページで同じCSSを共有したい場合のクラス名をどうつければよいのか
flexコンテナー、flexアイテムにどのような英単語を使用すればいいのか定まらず悩んでいます
以下の場合みなさまはどのようなHTMLを記述するのかお聞きしたくこちらを利用させていただきました
相談できる方が身近におらず、場違いな部分がありましたら申し訳ございません
ご意見いただけますと幸いです
ホームページ
企業HP
トップページ+下層ページ
デザイン
画像と同じデザインが下記2ページで使用されている
会社概要(ディレクトリ名:company)
サービス概要(ディレクトリ名:service)
ソースコード
HTML
1<section class="company-about"> 2<div class="inner"> 3<div class="company-about__flex"> 4 5<div class="company-about__text"> 6<h2 class="title01"></h2> 7<p>テキストテキストテキストテキストテキストテキストテキスト 8テキストテキストテキストテキストテキストテキストテキストテキスト 9テキストテキストテキストテキストテキスト</p> 10<div class="company-about__btn-flex"> 11<a href="#" class="btn01">ボタン</a> 12<a href="#" class="btn01">ボタン</a> 13</div> 14</div> 15 16<div class="company-about__image"><img src="image"></div> 17 18</div> 19</div> 20</section> 21 22 23<section class="company-concept"> 24<div class="inner"> 25<div class="company-concept__flex --reverse"> 26 27<div class="company-concept__text"> 28<h2 class="title01"></h2> 29<p>テキストテキストテキストテキストテキストテキストテキスト 30テキストテキストテキストテキストテキストテキストテキストテキスト 31テキストテキストテキストテキストテキスト</p> 32<div class="company-concept__btn-flex"> 33<a href="#" class="btn01">ボタン</a> 34<a href="#" class="btn01">ボタン</a> 35</div> 36</div> 37 38<div class="company-concept__image"><img src="image"></div> 39 40</div> 41</div> 42</section>
BEM設計を勉強中です
会社概要(ディレクトリ名:company)をHTMLにした場合、今までこのように書いていました
サービス概要(ディレクトリ名:service)ページでは.company-aboutが.service-aboutなどになります
大体タイトル(about,concept)にあたる部分とディレクトリ名(company,service)を合体させてsection(ブロック)のクラス名にして、
section(ブロック)の中にエレメントとして内容を書いていくような流れです
悩んでいること
今行っているようなクラス名の命名方法だと、同じデザイン・同じCSS内容なのにページやsectionが変わる度に新たなクラス名を指定する必要があります
クラス名にcompany-aboutのような意味があるため別ページに流用することができません
また、flexコンテナー、flexアイテムのクラス名にも自分のなかで違和感があり、納得言っていません
.company-about__textはpタグについたほうが意味としては正しいし.company-about__imageもimgタグについたほうが意味がわかる気がするからです
他に.company-about__text-boxや.company-about__flex-textが思いついたのですがなんだかしっくりきません
.company-about__btn-flexもこれでいいのかな、と悩んでいます
BEMで書こうとしてみるとブロックにするかエレメントにするか、自分が書いているものはエレメントなのかブロックなのか、それすらもわからなくなってしまう時がありかなり迷走しています
みなさまはこのような場合どのようにHTML・クラス名を記述されますか?
お時間のある方がいらっしゃいましたら自分だったらこう書くなあ〜というHTMLを残していただけると嬉しいです
回答3件
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。