質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

質問する

ただいまの
回答率

90.49%

  • CSS

    5987questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

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

受付中

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 633
退会済みユーザー

退会済みユーザー

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

<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 -->

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2 件

link

+2

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

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



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

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

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

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

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

っていうのが気になりました。 

#drawermenu {
  z-index: 300;

でいいですよね？

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/03/28 12:20

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

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


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


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

    キャンセル

  • 2016/03/28 12:31 編集

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

    おかしいですね・・・
    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

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

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

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


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

    キャンセル

  • 2016/03/28 13:00

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

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

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

    キャンセル

  • 2016/03/28 13:28

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

    キャンセル

  • 2016/03/28 14:29

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

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

    キャンセル

  • 2016/03/28 16:31

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

    キャンセル

link

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;}

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/03/28 16:52

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

    ・
    <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;}

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

    キャンセル

  • 2016/03/29 17:01

    これは個人的な趣味ですが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にしてます！
    結構共通化できそうな部品なので！

    キャンセル

15分調べてもわからないことは、teratailで質問しよう！

  • ただいまの回答率 90.49%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
質問する

関連した質問

同じタグがついた質問を見る

  • CSS

    5987questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

SNSアカウントでログイン

  • Facebookでログイン
  • Twitterでログイン
  • Googleでログイン
  • Githubでログイン
  • Hatenaでログイン

teratailアカウントでログイン

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る

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