BEMでのクラス名のつけ方を確認して頂きたいのですが、下記でクラス名のつけ方全般に問題はないでしょうか？

Question

BEMでのクラス名のつけ方を確認して頂きたいのですが、下記でクラス名のつけ方全般に問題はないでしょうか？
（簡易なBEMなので、すべては引き継がずという形を目指しています。）
タグも間違ってなさそうでしょうか？

<div class="wrap-skew1 first-section-skew1">
                        <div class="wrap-skew2 first-section-skew2">
                            <div class="wrap-content">  
                                <section class=section-wrap multicolumn">
                                    <div class="content-wrap translate3d-to-upper-left">
                                        <h2 id="js-about-me" class="heading-primary">ABOUT&nbsp;&nbsp;ME</h2>
                                        <p class="paragraph-oneline">あああああああああああああああああああああああああああああああああああ</p>
<p>いいいいいいいいいいいいいいいいいいいいいいいいいい。</p>
                                    </div><!-- /.contents-wrap -->
                                    <div class="img-wrap translate3d-lower-right">
                                        <img class="my-image" src="img/index/myimage.png" alt="自身の写真">
                                    </div>
                                </section><!-- /#about -->
                            </div>
                        </div>
                    </div>

また、class名は「Block_key_value」で表します。とあるのですが、
keyがvalue＝色が赤＝color_redということでしょうか？
主語と目的語ということでしょうか？
よくわかりません。

https://app.codegrid.net/entry/bem-basic-1

下記質問の下記部分はcolor_lifeとなっていますが、text_lifeではないでしょうか？
https://teratail.com/questions/27252
下記のスライダーの43ページ目です。
ModifierはBlockElementlifeではなく、Block__color_life
https://schoo.jp/class/2690

Answer 1

skew1とかskew2とかって部分、数字つけてるけど、
数字って自分しか意味がわからないので、他人が見てもわかるように、
数字じゃなくて意味がわかる単語にしたほうがよいかも。

で、BEMだけど、
BlockとElementは__
ElementとModifierは--で区切るので、それを適用するとよいかも。

Comments

[退会済みユーザー]

ElementとModifierは_ひとつがデフォルトですよね。
--もポピュラーですが。

CSS設計の教科書をみて見た目や場所に依存しないクラス名を心がけてそのようにしていますが現場ではどのあたりが妥協点ですかね。
skewoutsid、skewinsideにしたほうがわかりやすいのは私も知っていますが、
デザイン変更で逆になった場合おかしくなるのでそうしています。

[ogaaaan]

> ElementとModifierは_ひとつがデフォルトですよね。

あれ？そうだったっけ？
俺2個しか知らなかったけど、良かったら元ネタ教えてください。

> デザイン変更で逆になった場合おかしくなるのでそうしています。

おっしゃるとおり。
アンチな意見だけど、BEMはそれを加速させるものだとおもっているので、特に現場に決め事がなければOOCSSで書いてます。OOSCだとDOMを移動しても崩れないので。崩れてもすぐに戻せるし、クラス名書き直さなくてすむので、開発初期は助かりますね。

さて、閑話休題。

いくつかの現場でBEM使ってましたが、B__E--M 形式でした。これは何形式っていうんだろう？

ある現場（大手）では15人いるコーダーのうち、BEM理解できてる人は1名でした。その人がBEM使おうと言い出したのですが、半年たっても結構ゆるい感じでした。
他の現場（ベンチャー）はコーダーが6人いましたが、BEM理解できてる人はいませんでした。なにそれ？って感じ。かなすぃ。

ちなみにそのときの書き方っぽく書くとこんな感じですね。ばばばーっと書いたので整合性取れてですが。

<div class="skew skew__first-outer">
　　<div class="skew__first-inner">
　　　　<div class="skew__first-content">
　　　　　　<section class="skew__first-section">
　　　　　　　　<div class="skew__first-section-desc">
　　　　　　　　　　<h2>ABOUT ME</h2>
　　　　　　　　　　<p>あああああああああああああああああああああああああああああああああああ</p>
　　　　　　　　　　<p>いいいいいいいいいいいいいいいいいいいいいいいいいい。</p>
　　　　　　　　</div><!-- /.contents-wrap -->
　　　　　　　　<div class="skew__first-section-image">
　　　　　　　　　　<img class="my-image" src="img/index/myimage.png" alt="自身の写真">
　　　　　　　　</div>
　　　　　　</section><!-- /#about -->
　　　　</div>
　　</div>
</div>

[退会済みユーザー]

> ElementとModifierは_ひとつがデフォルトですよね。
下記などにあります。
https://app.codegrid.net/entry/bem-basic-1

class名は「Block_key_value」で表します。

＞＞＞
おっしゃるとおり。
アンチな意見だけど、BEMはそれを加速させるものだとおもっているので、特に現場に決め事がなければOOCSSで書いてます。OOSCだとDOMを移動しても崩れないので。崩れてもすぐに戻せるし、クラス名書き直さなくてすむので、開発初期は助かりますね。

場所やABテストがあっても、クラス名が変わらないのが拡張性という意味では理想。
ただもちろんわかりやすいのも大事とCSS設計の教科書に書いてあったのですが、
ある意味矛盾した考えですよね。

いったいどこが妥協点になるのですかね。
プロジェクト毎に変えるのですかね。

[ogaaaan]

おぉ～情報あざっす！！！助かります！ぺこり

そうそう、矛盾してる説明がおおくて、実際問題自分でも何が正解なのかわからんのですよね。もしかしたら正解なんかないのかもしれないし。

でもそれだとオレオレ方式になるので、現場によって違っちゃうという。
ユニファイな手法ほしいですよねー。

やっぱりプロジェクトごとに変えるのが一般的ですかね。

[退会済みユーザー]

すこしは恩返しができてうれしいです。

B__E--M 形式という変形した形を使うことも大変多いそうです。こちらのやり方もありだと思います。

＞＞＞
やっぱりプロジェクトごとに変えるのが一般的ですかね。

やはり、矛盾する考えなので、ここが絶対ベストというものはないのですね。
下記のようにしているのが現場の実情ですかね。
今回はメンテナブル重視なので、クラス名はA,Bなど抽象的でも見た目や、場所依存のクラス名は使わない。
次回は、納期が短いので、見た目や場所依存でも、ともかくすぐにわかればOK。
グロースハックの時はその時にクラス名を変える。

それにしても、現場ではBEMはあまり使われていないようですね。
OOCSSのほうが圧倒的に多いのですかね。

よほど大手の会社にでも入社しない限り、今までどおりのクラス名をつかっていればいいのですかね？

[ogaaaan]

IT系の大手なら積極的にモダン開発してるでしょうね。

BEMに関しては、使おうとして使えてないというのが現状じゃないですかね。
基本的に今までのやり方を、OOCSS風、BEM風にして使ってる、というのが多いかもしれないす。

でもむしろ、BEMがわかりやすくなるようなDOMを書く、という逆の勉強法もあるかもしれないので、BEMはBEMでありでしょうね。

[退会済みユーザー]

フリーや中小企業でコーディングする場合もBEMはできないとまずいのですね。

[ogaaaan]

そっすね、あくまで経験則ですが、中小でもBEM出来ない（そもそも知らない）人はいっぱいいるんで、出来なければ行けないというより、最低限『知ってるし使ったことがある』程度は必要かもしれないすね。

フリーランスなのにBEMとかOOCSS知らないって言われたら、その人には仕事頼みたくないですね。スキルではなく、仕事に対する姿勢の問題で。ココらへんは好みでしょうけど。

[退会済みユーザー]

やはりBEMとかOOCSSをしっかり内容まで把握することは非常に有益で、
効いたこともない場合は、マイナスになるということですね。