下記のソースのクラス名を改善しているのですが、 現場のフロントならどうしますか？

Question

下記のソースのクラス名を改善しているのですが、
現場のフロントならどうしますか？

<li class="link-block">の部分をdrawermenu__itemにしようと思っているのですが、liは子要素なので正しいでしょうか？

itemは子要素であればなんにでも使えるものと考えてよいでしょうか？

・
https://jsfiddle.net/80od313c/11/

<nav>
				<div id="drawermenu">
				<ul>
					<li class="link-block">
						<a class='header__social-btn drawermenu__social-btn symbol animation-hover action-hover' href="https://plus.google.com/share?url=http:///portfolio/index.html" onclick="window.open(this.href, 'Gwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" title='&#xe039;'></a>
						
	                    <a class='header__social-btn drawermenu__social-btn symbol animation-hover action-hover' href="http://www.facebook.com/share.php?u=http:///portfolio/index.html" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" title='&#xe027;'></a>
	            		
	                    <a class='header__social-btn drawermenu__social-btn symbol animation-hover action-hover' href="http://twitter.com/share?url=" title='&#xe086;'></a>	                
					</li>
					<li id="maware"><a class="link-block" href="#js-about-me">ABOUTME</a></li>
					<li class="link-block"><a class="link-block action-hover animation-hover" href="#js-gallary">GALLARY</a></li>
					<li><a class="link-block action-hover animation-hover" href="#js-gmap">MAP</a></li>
					<li><a class="link-block action-hover animation-hover" href="#js-inquiry">CONTACT</a></li>
					<li id="js-drwar-action"><a class="link-block drawermenu__gototop action-hover animation-hover" href="#top"><i class="material-icons material-icons_large action-hover animation-hover">&#xE5CE;</i></a></li>
					<li><a class="link-block action-hover animation-hover" href="http:///portfolio/index.html">TOPPAGE</a></li>
					<li><a class="link-block action-hover animation-hover" href="http:///portfolio/index.html">BLOG</a></li>
				</ul>
		      	</div>
	      	</nav>
	      	<!-- /drawermenu -->

Answer 1

現場のフロントならどうしますか？

答えづらいっす。何せ**「自分が現場の最前線だぜ」**って強調する人はあんまりいないと思いますよ。

BEMも流し読みしただけなので、よく分かってないかもしれませんが、厳密には内包するブロックにはclassを付けて、別ブロックにし、その子要素とするのが本来の書き方のような気がします。

あなたの書いたCSSだと、ulタグにスタイルを付ける形になってしまっていて、独立性が低くなっています。
ulタグにclass="outerbox"などをつけて、liをその子要素とするといいですね。

もし、#drawermenuにul要素を追加するということを考えると（実際は無いのかもしれませんが）独立性が低くなる書き方は避けるべきです。

全然違う観点からですが、

[id="drawermenu"] {
  z-index: 300;
```っていうのが気になりました。
```CSS
#drawermenu {
  z-index: 300;
```でいいですよね？

Comments

[退会済みユーザー]

最前線の方が一番ですが、そこまでは言えないので、プロのフロントの方であれば十分ありがたいです。

＞＞
[id="drawermenu"] {
z-index: 300;

CSS設計の教科書は読みましたか？
詳細度を上げないようにするためです。

リストはulタグ自体にはCSSは常に付けるべきではないという事でしょうか？

[shi_ue]

idの件ですが、そうなんですね。

おかしいですね・・・
https://developer.mozilla.org/ja/docs/Web/CSS/Specificity
によると、属性セレクタよりもIDセレクタの方が詳細度は低いですよ？

BEM自体も記述法なだけで、こうしなければいけない、ということはありません。
ただ、メンテナンス性を持たせるためには、そうすることが良い、ということでしょうね。

[退会済みユーザー]

詳細度の序列（昇順）

以下のリストは、セレクタを詳細度の小さな順に並べたものです。

全称セレクタ
タイプセレクタ
クラスセレクタ
属性セレクタ
擬似クラス
ID セレクタ
インラインスタイル

小さい順に記載されていると有りますよ。

[shi_ue]

間違えた！そうですね。昇順でした。
実際の動作を見ても高いのに、「そーなんだぁ」と書いちゃいました。
ごめんなさい。

そんな風にして、詳細度を下げる方法もあるんだと勉強になりました。
でも、そんなに下がんないですね。疑似クラスに勝っちゃうくらいですね。
そうすると、可読性からすると、# 記述の方が読みやすいですね。

[退会済みユーザー]

importantだらけにならずにすみよいと思いますが、現場ではやっている人は少ないのですかね？

＞＞＞<li class="link-block">の部分をdrawermenu__itemにしようと思っているのですが、liは子要素なので正しいでしょうか？

itemは子要素であればなんにでも使えるものと考えてよいでしょうか？

上記はどう思われますか？itemは子要素に使うようですが、子要素ならなんでも使って良いのでしょうか？

[shi_ue]

> importantだらけにならずにすみよいと思いますが、現場ではやっている人は少ないのですかね？

いくつか大きな現場に入りましたが、その記述は使いませんでした。
そこまで、複雑になる構成になってないからかもしれませんね。

item命名の件は、ちょっとわたしでは判断できませんでした。
大体、規約が与えられますので、それに沿って作りますからね。そうでないときは自由なので適当です（笑）

[退会済みユーザー]

フロントの方ですか？サーバサイドの方ですか？
コーディングは、仕様がない場合はブラウザ上の表記を満たせば良いのですかね？

[shi_ue]

わたしはサーバーサイドが専門ですが、フロントサイドもやります。
コーディングの仕様がない場合、動作上不具合が無ければOKとなる場合が多いです。

継続的に変更がかかるようなプロジェクトの場合、独立性が問題になってくるので気を付けますが、あとはテキトーにやってます。

[退会済みユーザー]

コーディングはクライアントさんもわからないしお金にならないので、適当なのも多いのですね。

Answer 2

現場のフロントですが、shi_ueさんがおっしゃっている通り最前線かという判断はできないですが。。。

<li class="link-block">の部分をdrawermenu__itemにしようと思っているのですが、liは子要素なので正しいでしょうか？

まず、cssの命名規則などに正しいとかはないと思います！
ただ、ulの中には複数のliが入ることがあるので
ulには複数形のclassを（link-blocks）
liには単数形のclassを（link-block）
と命名すると読む方もわかりやすい気がします

個人的に思ったのは
drawermenuを命名に使った理由はなぜなんだろうということです。
なぜかというとdrawermenuはidに付与しています。
パット見だと、drawermenuの下の__itemになると思うのですが
idは1ページに1つしか使えないので、1ページに同じcssを適応するときにおかしくなりそうです。

なので、もっと抽象度を上げてclassを命名した方がいいと思います。
といっても僕もあんまりできないんですが（笑）

ちなみに僕の場合だと、複数形の中に単数形を入れて包含ブロックということを表して読む人に意識しやすいようにします

<ul class="link-blocks"> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> </ul>

もうリファクタリングになりますが、
action-hoverというクラスが「ホバーした時になにかcssが変わるんだろうなぁ」って思ってるんですが、もっとわかりやすく書いたほうがいいかもしれないです。
仮にactionホバーが「ホバーしたら透明度が少し下がる」とかなら
.action-hover{
transition:all .5s ease;
}
.action-hover--op{opacity:.8;}

とかもありだと思います。

Comments

[退会済みユーザー]

下記ではどうでしょうか？

・
<nav>
<div class="drawermenu drawermenu-button-animation">
<ul>
<li class="drawermenu__item">
<li class="drawermenu__item">
<li class="drawermenu__item">

～

>>>>
もうリファクタリングになりますが、
action-hoverというクラスが「ホバーした時になにかcssが変わるんだろうなぁ」って思ってるんですが、もっとわかりやすく書いたほうがいいかもしれないです。
仮にactionホバーが「ホバーしたら透明度が少し下がる」とかなら
.action-hover{
transition:all .5s ease;
}
.action-hover--op{opacity:.8;}

おっしゃる通りですね。
モディファイヤーにしているのですかね。

[MasakazuFukami]

これは個人的な趣味ですがdrowermenuという単語が長いので短くするのとwrapperとitemに分けるために

<div class="d-menu-items">
<div class="d-menu-item"></div>
<div class="d-menu-item"></div>
<div class="d-menu-item"></div>
</div>

とするかもしれませんねー。
わかりにくくなったかもしれません（笑）
これはプロジェクトの命名規則や自分の中で命名の法則等を決めてやるべきなので
質問者様の自由だと思います！

actionに関してはそうですね！modifierにしてます！
結構共通化できそうな部品なので！