HTMLのクラスのつけ方の確認

前提・実現したいこと

html,cssのprog-8の課題が終わり模写をしています。その中でタグの作り方、クラスのつけ方について迷ったところがあったので、添削していただきたいです。

模写サイト
http://demo.themegraphy.com/write-ja/

該当のソースコード

index.html

html
1
2<body>
3    <header class="page-header">
4        <div class="page-header__inr inr">
5            <div class="page-header__logo">
6                <h1>Write</h1>
7                <h2>書くためのテーマ</h2>
8            </div>
9            <div class="page-header__menu page-header-menu">
10                <ul>
11                    <li class="page-header-menu__menu-bar menu-bar"><a href="#">ホーム</a></li>
12                    <li class="page-header-menu__menu-bar menu-bar"><a href="#">ページ</a></li>
13                    <li class="page-header-menu__btn btn"><a href="#">タイポグラフィー</a></li>
14                    <li class="page-header-menu__btn btn"><a href="#">お問い合わせ</a></li>
15                </ul>
16            </div>
17            <div class="page-header__resercher page-header-resercher">
18                <div class="page-header-resercher__img-area"><i class="fas fa-search-minus"></i></div>
19                <input type="text" class="page-header-resercher__input">
20            </div>
21        </div>
22    </header>
23    <main class="main-content">
24        <div class="main-visual">
25            <div class="inr">
26                <div class="main-visual__img-area"></div>
27            </div>
28        </div>
29        <div class="intro-section">
30            <div class="intro-section__header">
31                <div class="inr">
32                    <h3>Writeは文章を書く人のためのミニマルなWordPressテーマです。装飾を極限まで省いたデザインは、あなたの文章を主役にします。</h3>
33                </div>
34            </div>
35            <div class="intro-section__content section-content">
36                <div class="intro-section__articles section-articles">
37                    <div class="inr">
38                        <ol>
39                            <li class="section-articles__article section-article">
40                                <div class="section-article__time">
41                                    <time class="section-article__time">2018年9月1日</time>
42                                </div>
43                                <div class="section-article__info">
44                                    <a href="#">書くためのテーマ</a>
45                                    <p>Writeは文章を書く人のためのミニマルなWordPressテーマです。装飾を極限まで省いたデザインは、あなたの文章を主役にします。</p>
46                                </div>
47                            </li>
48                            <li class="section-articles__article">
49                                <div class="section-article__time">
50                                    <time class="section-article__time">2018年9月1日</time>
51                                </div>
52                                <div class="section-article__info">
53                                    <a href="#">書くためのテーマ</a>
54                                    <p>Writeは文章を書く人のためのミニマルなWordPressテーマです。装飾を極限まで省いたデザインは、あなたの文章を主役にします。</p>
55                                </div>
56                            </li>
57                            <li class="section-articles__article">
58                                <div class="section-article__time">
59                                    <time class="section-article__time">2018年9月1日</time>
60                                </div>
61                                <div class="section-article__info">
62                                    <a href="#">書くためのテーマ</a>
63                                    <p>Writeは文章を書く人のためのミニマルなWordPressテーマです。装飾を極限まで省いたデザインは、あなたの文章を主役にします。</p>
64                                </div>
65                            </li>
66                            <li class="section-articles__article">
67                                <div class="section-article__time">
68                                    <time class="section-article__time">2018年9月1日</time>
69                                </div>
70                                <div class="section-article__info">
71                                    <a href="#">書くためのテーマ</a>
72                                    <p>Writeは文章を書く人のためのミニマルなWordPressテーマです。装飾を極限まで省いたデザインは、あなたの文章を主役にします。</p>
73                                </div>
74                            </li>
75                            <li class="section-articles__article">
76                                <div class="section-article__time">
77                                    <time class="section-article__time">2018年9月1日</time>
78                                </div>
79                                <div class="section-article__info">
80                                    <a href="#">書くためのテーマ</a>
81                                    <p>Writeは文章を書く人のためのミニマルなWordPressテーマです。装飾を極限まで省いたデザインは、あなたの文章を主役にします。</p>
82                                </div>
83                            </li>
84                            <li class="section-articles__article">
85                                <div class="section-article__time">
86                                    <time class="section-article__time">2018年9月1日</time>
87                                </div>
88                                <div class="section-article__info">
89                                    <a href="#">書くためのテーマ</a>
90                                    <p>Writeは文章を書く人のためのミニマルなWordPressテーマです。装飾を極限まで省いたデザインは、あなたの文章を主役にします。</p>
91                                </div>
92                            </li>
93                        </ol>
94                    </div>
95
96                </div>
97                <div class="intro-section__nav section-nav">
98                    <div class="section-nav__inr">
99                        <ol>
100                            <li><a class="section-nav__btn btn showpage" id="section-nav__btn--page1">1</a></li>
101                            <li><a class="section-nav__btn btn" id="section-nav__btn--page2">2</a></li>
102                            <li><a class="section-nav__btn btn" id="section-nav__btn--page3">3</a></li>
103                            <li><a class="section-nav__btn btn" id="section-nav__btn--nextpaget">次へ>></a></li>
104                        </ol>
105                    </div>
106                </div>
107                <div class="intro-section__foot foot-section">
108                    <div class="foot-section__inr inr">
109                        <div class="foot-section__personal-info section-personal-info">
110                            <div class="section-personal-info__inr">
111                                <div class="section-personal-info__avatar"></div>
112                                <div class="section-personal-info__inr__inr">
113                                    <p class="section-personal-info__name">John Doe</p>
114                                    <ul class="section-personal-info__sns">
115                                        <li><a href="#"><i class="fab fa-twitter"></i></a></li>
116                                        <li><a href="#"><i class="fab fa-facebook"></i></a></li>
117                                        <li><a href="#"><i class="fab fa-instagram"></i></a></li>
118                                    </ul>
119                                </div>
120                            </div>
121                            <div class="section-personal-info__txt">
122                                <p>これはプロフィールウィジェットです。ここにはプロフィール画像・名前・自己紹介文・ソーシャルリンク（最大7つ）を設定することができます。</p>
123                            </div>
124                        </div>
125                        <div class="foot-section__description">
126                            <h4 class="foot-section__heading">フッター右</h4>
127                            <p>3つのフッター右ウィジェットエリアはフッターの右側に表示され、使用する数によって幅は自動的に調整されます。1つも使用しない場合は表示されません。</p>
128                        </div>
129                        <div class="foot-section__articles">
130                            <h4 class="foot-section__heading">最近の投稿</h4>
131                            <ol>
132                                <li class="foot-section__article">
133                                    <a href="#">書くためのテーマ</a>
134                                    <time>2018年9月1日</time>
135                                </li>
136                                <li class="foot-section__article">
137                                    <a href="#">画像付きの投稿</a>
138                                    <time>2018年3月5日</time>
139                                </li>
140                                <li class="foot-section__article">
141                                    <a href="#">書くためのテーマ</a>
142                                    <time>2018年9月1日</time>
143                                </li>
144                            </ol>
145                        </div>
146                        <div class="foot-section__category section-category">
147                            <h4 class="foot-section__heading">カテゴリー</h4>
148                            <ul>
149                                <li><a href="#">サンプル投稿</a></li>
150                                <li><a href="#">投稿フォーマット</a></li>
151                                <li><a href="#">普通の投稿</a></li>
152                            </ul>
153                            <div class="section-category__resercher">
154                                <input type="text" placeholder="検索...">
155                            </div>
156                        </div>
157                    </div>
158                </div>
159            </div>
160    </main>
161
162</body>

試したこと

こちらのサイトを模写を始める前に頭に入れましたが、入れ子の部分が多く、class名がこの前提に従ってないと思います。
https://magazine.krowl.jp/4037/

また、こちらから、名づけの際の単語を参照しました
https://qiita.com/manabuyasuda/items/dbb76ed36970bec95470

m.ts10806

2020/08/20 01:45

「添削」とは観点はどのようになってますでしょうか今の状態だと「レイアウ想定どおりならいんじゃない？」程度になります。見ているのはあくまで赤の他人です。

miyabi_pudding

2020/08/20 02:08

> class名がこの前提に従ってないと思います。前提って、なんのことでしょうか？ https://magazine.krowl.jp/4037/　が、 https://qiita.com/manabuyasuda/items/dbb76ed36970bec95470　の法則に則ってない、ということでしょうか？それとも、質問者さんの記載クラス法則が、ってことでしょうか？このとかあのではなく、主語を明確にしないと、人に理解してもらえない内容かと思います。

m.ts10806

2020/08/20 02:56

>class名がこの前提に従ってないと思います。なら「そのとおりになおせば良いのでは」という感想になります。まともにコードレビュー受けたいのでしたらQAでは限界がありますし、全部ではなく一部しか提示されていません。観点を明確にしてください。見るのは赤の他人ですし、ここは質問に対して回答でアドバイスする場所です。本気のレビュー依頼ならそれなりの場所に対価を支払いやってもらったほうが良いでしょう。見るのは赤の他人なので、単に好みで雑な回答がつく可能性もあります(コード長いし)

timememory

2020/08/20 03:08

@m.ts10806 言葉足らずで申し訳ありませんでした。。。特に気になる点としてはこのクラスのつけ方はBEMに依存しているつもりなのですが、例えばheaderをelementとしてみた時にheader内のmenu(ホーム,ページ,タイポグラフィー,お問い合わせ)はblock,menuのitemはmodiferとするべきなのでしょうが、header内のmenuを新たにelementとしてitemに対してblockをつけています。このクラスのつけ方は一般的なものなのでしょうか？また、どのような場面で新たにblockを作ってよいのでしょうか？検索してみたものの、BEMのつけ方には個人差があるように見え、パターン化できませんでした。そのため、https://magazine.krowl.jp/4037/を基に作り、この実例をもとに最も一般的な形に寄せようとしております。

miyabi_pudding

2020/08/20 03:17

> BEMのつけ方には個人差があるように見え命名規則ってそういうものです。個人なら個人、チームならチームで決めるものです。そして、bem自体が、一種の法則性で、この書き方の方がコンテンツ管理とかしやすいよ、ってもので、（入れ子をスネークケースで示すって部分など）その内容自体は規則揺れが出るよ、ってものなので。

timememory

2020/08/20 03:19

@miyabi_takatsuk 省略してしまいすみませんでした私が模写をしている中ではhttps://magazine.krowl.jp/4037/(BEM？)を参考に名付けましたが、模写の中でhttps://magazine.krowl.jp/4037/とは異なる要素が出てくることもありその部分はhttps://qiita.com/manabuyasuda/items/dbb76ed36970bec95470にあった言葉をなるべく選ぼうとしておりました。しかし、その中にある言葉では表しにくい要素等があったため、個人的に名前をつけたため試したこと欄に書き込みました。例えば、 ''' <div class="section-personal-info__inr__inr"> <p class="section-personal-info__name">John Doe</p> <ul class="section-personal-info__sns"> <li><a href="#"><i class="fab fa-twitter"></i></a></li> <li><a href="#"><i class="fab fa-facebook"></i></a></li> <li><a href="#"><i class="fab fa-instagram"></i></a></li> </ul> </div> ''' です(これは上記のblock要素の作り方云々にかかってくるのかもしれませんが、、、)。このようなところではどのような名前を付けるべきなのでしょうか？また、そこまでこだわるところではないのでしょうか？所感が知りたいです。

miyabi_pudding

2020/08/20 03:30

> その中にある言葉では表しにくい要素等があったため、個人的に名前をつけたため試したこと欄に書き込みました。つまり、これがアリかなしか、ナシなら正しい命名はどうすればいいのか、を知りたいってことですか？

行動規範の内容に同意します

回答2件

ベストアンサー

CSSのクラス名を決めるときに使うリストをつくりました - Qiita

に該当しない要素が出現したならば、自身で決めていいと思います。

リンクの記事は、
こうすれば出来る限りパブリックで誰が見ても大体は何なのか判断できるよねというもので、全てをこれに当てはめるとかそういうものではありません。

つまり例外は必ず発生するもので、
その例外の分まで決めれるものではありません。
例外まで決めてしまったら、それだけで、
この世の全てのもの、未来に新しく出来るものも含めて名前を決めなければいけない、と、神にも似た仕様にせねばならなくなり、もはやそれは、命名規則という物の枠を越えます。
ある程度の命名の規則性を定めるものが命名規則なので、例外に於いては特に、
規則に則って新しく命名するということは必ず出てくるでしょう。

投稿2020/08/20 03:42

miyabi_pudding

総合スコア9555

miyabi_pudding

2020/08/20 03:46

あと個人的には、 bemは、sassの構文記載時にその真価を発揮する命名規則だと思います。

行動規範の内容に同意します

timeに日本語をそのまま使用しているため、w3cに引っかかる
https://reference.hyper-text.org/html5/element/time/

閉じタグがない

タイプミス
class="page-header__resercher"
id="section-nav__btn--nextpaget"

resercher
nextpaget

素人の私見
divタグが多すぎると思います。おそらくかなり数を減らせるのではないかと予測。
命名規則はおそらく bemだと思いますが、個人的にあまり好きではないです。
名前が長すぎてごちゃごちゃして見えるのが理由です。
web制作業者への就職を目指すのであれば、bemなどの命名規則を覚えておいて損はないと思いますが。

投稿2020/08/20 02:42