cssの記述ルールについて

Question

前提・実現したいこと

こんにちは。

私は、実務経験ゼロでhtml,cssの基礎を学んでいる段階です。

cssの記述にBEMを採用しているのですが、実務上、どのような書き方が一般的であるのか(あるいは、回答者様が実務上用いている書き方なのか)教えていただきたく質問させていただきました。

例えば、下記のようなECサイトのheader内ナビゲーションのcssを書く際、①②いずれの書き方が一般的でしょうか？

該当のソースコード

%header.header 
  .headerTop
    %p.headerTop__logo
      = image_tag "logo_header.png", alt: "test"
  %nav.gnav
    %ul.gnav__list
      %li.gnav__item
        カテゴリ-
      %li.gnav__item
        ブランド
    %ul.gnav__list
      %li.gnav__item
        ログイン
      %li.gnav__item
        新規会員登録

①保守しやすさ重視

gnav{
  &__list{
  }
  &__item{ 
  }
}

②読みやすさ重視

.gnav{
  &__list{
   .gnav__item{
    }
  }
}

その他

①について
・ブロック名が変更となった場合に、修正が容易
・適切なタグを用い、クラス名をわかりやすいものにするなど工夫すれば、HTML構造を推測することは可能

②について
・ブロック名が変更となった場合に、修正箇所が多く不便。
・HTML構造が推測しやすい書き方になっている。

以上から、書き方を工夫すれば、HTML構造をイメージさせる書き方も可能となるため①の方が一般的ではないかと考えておりますが、ご意見いただきますよう、お願いします。

Comments

[m.ts10806]

Haml,SCSSで「一般的な記法」を聞かれても、アドバイスは得られにくいかと。

[Taka009]

ご指摘ありがとうございます。

確かに、個人、職場でかなり書き方に違いがあるというお話は聞いております。

今回は、明らかに①②いずれかの考えが誤っているという可能性もあるため、質問させていただきました。

[m.ts10806]

＞明らかに①②いずれかの考えが誤っているという可能性もあるため
その可能性の根拠となるもの（記事とか説明とか）があったほうが良いかと思います。
いずれにしても私の指摘は「純粋なHTML,CSSではないのにCSSタグのみでアドバイスを得ようとするのは無理がある」という意味です。

[Taka009]

再度のアドバイス感謝致します。

おっしゃる通りで、質問の仕方がよくないですね。
ご指摘いただいたところを改善して、回答しやすい質問を心がけます。

[m.ts10806]

質問は編集できますので適宜調整してください。

[Taka009]

ありがとうございます！
今回の内容はこちらで伺う内容ではないと思いましたので、
別件で改めて質問させていただきます。