下記のソースのクラス名を改善しているのですが、 現場のフロントならどうしますか?
受付中
回答 2
投稿
- 評価
- クリップ 0
- VIEW 925

退会済みユーザー
下記のソースのクラス名を改善しているのですが、
現場のフロントならどうしますか?
<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=''></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=''></a>
<a class='header__social-btn drawermenu__social-btn symbol animation-hover action-hover' href="http://twitter.com/share?url=" title=''></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"></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 -->
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
+2
現場のフロントならどうしますか?
答えづらいっす。何せ「自分が現場の最前線だぜ」って強調する人はあんまりいないと思いますよ。
BEMも流し読みしただけなので、よく分かってないかもしれませんが、厳密には内包するブロックにはclassを付けて、別ブロックにし、その子要素とするのが本来の書き方のような気がします。
あなたの書いたCSSだと、ul
タグにスタイルを付ける形になってしまっていて、独立性が低くなっています。
ul
タグにclass="outerbox"
などをつけて、li
をその子要素とするといいですね。
もし、#drawermenu
にul
要素を追加するということを考えると(実際は無いのかもしれませんが)独立性が低くなる書き方は避けるべきです。
全然違う観点からですが、
[id="drawermenu"] {
z-index: 300;
っていうのが気になりました。
#drawermenu {
z-index: 300;
でいいですよね?
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
0
現場のフロントですが、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;}
とかもありだと思います。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう!
- ただいまの回答率 89.98%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
2016/03/28 12:20
>>
[id="drawermenu"] {
z-index: 300;
CSS設計の教科書は読みましたか?
詳細度を上げないようにするためです。
リストはulタグ自体にはCSSは常に付けるべきではないという事でしょうか?
2016/03/28 12:31 編集
おかしいですね・・・
https://developer.mozilla.org/ja/docs/Web/CSS/Specificity
によると、属性セレクタよりもIDセレクタの方が詳細度は低いですよ?
BEM自体も記述法なだけで、こうしなければいけない、ということはありません。
ただ、メンテナンス性を持たせるためには、そうすることが良い、ということでしょうね。
2016/03/28 12:32
以下のリストは、セレクタを詳細度の小さな順に並べたものです。
全称セレクタ
タイプセレクタ
クラスセレクタ
属性セレクタ
擬似クラス
ID セレクタ
インラインスタイル
小さい順に記載されていると有りますよ。
2016/03/28 12:35 編集
実際の動作を見ても高いのに、「そーなんだぁ」と書いちゃいました。
ごめんなさい。
そんな風にして、詳細度を下げる方法もあるんだと勉強になりました。
でも、そんなに下がんないですね。疑似クラスに勝っちゃうくらいですね。
そうすると、可読性からすると、# 記述の方が読みやすいですね。
2016/03/28 12:42
>>><li class="link-block">の部分をdrawermenu__itemにしようと思っているのですが、liは子要素なので正しいでしょうか?
itemは子要素であればなんにでも使えるものと考えてよいでしょうか?
上記はどう思われますか?itemは子要素に使うようですが、子要素ならなんでも使って良いのでしょうか?
2016/03/28 13:00
いくつか大きな現場に入りましたが、その記述は使いませんでした。
そこまで、複雑になる構成になってないからかもしれませんね。
item命名の件は、ちょっとわたしでは判断できませんでした。
大体、規約が与えられますので、それに沿って作りますからね。そうでないときは自由なので適当です(笑)
2016/03/28 13:28
コーディングは、仕様がない場合はブラウザ上の表記を満たせば良いのですかね?
2016/03/28 14:29
コーディングの仕様がない場合、動作上不具合が無ければOKとなる場合が多いです。
継続的に変更がかかるようなプロジェクトの場合、独立性が問題になってくるので気を付けますが、あとはテキトーにやってます。
2016/03/28 16:31