Q&A
BEMのような「ハイフンを使う」やつ、出会った当初は嫌いだったのですが、慣れてきたらなんとも思わなくなりました。ベタベタとクラス名が多いのも、仕方ないか〜、ぐらいで。おっしゃる通り一長一短だと思います。作業する人の中でルールと認識が共有されていれば、何を選択しても、あまり差はないように思います。個人的に、と言い始めたら、多分、どんな方法も、誰かが嫌だと言って終わりでしょうし。
このようなHTMLがあり、製品ページとサービスページとで、部分的な違いはあるももの、大体同じデザインになるとします。
（実際には要素はもっと多いです。）
▽製品ページ
html
1<div class="?"> 2 <h2>製品のページ</h2> 3 <p>良い製品です</p> 4</div>
▽サービスページ
html
1<div class="?"> 2 <h2>サービスのページ</h2> 3 <p>良いサービスです</p> 4</div>
さてこういうときは、<div class="?">のクラス命名をみなさんならどうしますか？
➀.wrapperだけで同じにしますか？
➁.wrapper_productsと.wrapper_sarviceのように別々にしますか？
➂.wrapper.wrapper_productsと.wrapper.wrapper_sarviceのようにしますか？
考えてみても一長一短で、➀ならばCSSが一つで済むので作りやすいですし、➀より➁の方が可読性が高いですし、➂なら可読性も作りやすさも高いけどベタベタとクラス名が多いですし、悩みます。
可読性やメンテナンスのしやすさなど、過去のご経験を踏まえた上で、「こういうケースではこうした方がいい」などの具体的なご意見を頂戴できますと幸いです。
宜しくお願い致します。
ちなみにBEMのような「ハイフンを使う」やつはダメです。個人的に嫌いです。笑
回答1件
0
私は基本バックエンドなんであまり参考にならないかもしれなませんが...。
私の同僚はよく以下のような書き方をしています。
html
1<html> 2 <head> 3 <meta charset="UTF-8"> 4 <style> 5 .page { 6 /* property */ 7 } 8 .page .service, 9 .page .products { 10 /* property */ 11 } 12 .page .service .wrapper, 13 .page .products .wrapper { 14 /* property */ 15 } 16 </style> 17 </head> 18 <body id="page"> 19 <main class="service"> 20 <div class="wrapper"> 21 <h2>サービスのページ</h2> 22 <p>良いサービスです</p> 23 </div> 24 </main> 25 </body> 26</html>
同僚で作成したモックに私等のバックサイドが、プログラム埋め込み作業をするわけですが、こういった命名規則であれば、仮にバックサイド側でCSSの調整が必要となった時に、規則が明確でわかりやすいため、第三者でも修正がしやすいです。（制作サイドから修正してもいいと許可があればですが）
私もCSS等の設計思想は勉強中なので、これがどの設計思想に当たるかはお答えできかねますが、あくまでプログラマサイドからの意見でした。
投稿2019/04/18 01:57
総合スコア310
あなたの回答
tips
プレビュー
