なぜ、このクラスを選択する必要があるのでしょうか？

なぜ、こちらのsection__itemを３つクラスとして選択する必要があるのかがわかりません。
よろしくお願いいたします。
動画とデザインカンプを添付いたします。
【動画】
(https://www.youtube.com/watch?v=QW6-FyELiXk)

11:27～11:32に合わせていただくとHTMLを見ることができます。

【デザインカンプ】
(https://www.figma.com/file/NnUCQny8n2ZKA2Z4gppgvK/%E3%81%AF%E3%81%98%E3%82%81%E3%81%A6%E3%81%AE%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0?node-id=1%3A87)
理屈がわからないため、質問いたしました。

何卒よろしくお願いいたします。

【一部抜粋しました。】
下記は、私が書いたコードです。
こちらのpタグに名前を付けています。その意味を理解していません。

HTML
1コード
2<body>
3    <header class="page-header">
4    <h1>はじめてのコーディング</h1>
5    </header>
6    <main class="main-content">
7        <div class="main-visual">
8        <p>コーディング学習をして、<br>
9            オリジナルサイトを作成しよう</p>
10        </div>
11    <div class="main-item">
12    <section class="section__text">
13    <h2 class="section-title">はじめに</h2>
14    <p class="section-text">このサイトは、コーディング練習用のサイトです。HTMLやCSS、JavaScriptなどの言語を使って、<br>Webサイトを「使える」状態にすることです。</p>
15    </section>
16    <section class="bg-gray">
17    <h3 class="section__title">学習の心構え</h3>
18    <div class="bg-gray__item">
19    <p>暗記しようとしない</p>
20　　<p>反復練習する</p>
21    <P>習得するまでコピペ禁止</P>
22    <P>1回で理解できなくても気にしない</P>
23    </div>
24    </section>
25</body>
26
27こちらです。
28私が気になる点ですが、ｐタグに共通の名前を付ける意味です。pタグを親要素で囲み、親要素にclassを付ければ
29ＣＳＳ変更できるとkなっげています。この場合のリスクや、この場合だと不適切な点はありますか？

meg_

2021/03/24 11:10

> pタグを親要素で囲み、親要素にclassを付ければＣＳＳ変更できるとkなっげています。タイポがあり意味がよく分かりません。修正お願いします。

K_3578

2021/03/25 01:06

過去質問を見る限り分かってなさそうなので指摘しますが <code>ブロックは ```HTML htmlのソースコード ``` (1行空ける) ```CSS cssのソースコード ``` のような形で書いて下さい。

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

回答2件

ベストアンサー

こんにちは。

この場合のリスクや、この場合だと不適切な点はありますか？

詳細度の問題があります。
下記サンプルで同じくcolor: blackを指定しても、親要素にクラスをつけた方はスタイルが打ち消されているのがわかると思います。

サンプル

html
1<div class="bg-gray__item">
2<p class="black">暗記しようとしない</p>
3<p>反復練習する</p>
4<P>習得するまでコピペ禁止</P>
5<P>1回で理解できなくても気にしない</P>
6</div>
7<div>
8<p class="black attitude-item">暗記しようとしない</p>
9<p class="attitude-item">反復練習する</p>
10<P class="attitude-item">習得するまでコピペ禁止</P>
11<P class="attitude-item">1回で理解できなくても気にしない</P>
12</div>

css
1.bg-gray__item p{
2    color: red;
3}
4.attitude-item{
5    color: red;
6}
7.black{
8    color: black;
9}

もちろん、十分に注意すれば避けられるのですが、他人が作ったページを変更する場合、たくさんのページをひとつのCSSでデザインしている場合、大昔に作ったページで詳細を忘れてしまった場合など、ハマってしまう罠でもあります。
できるだけ詳細度は統一しておいた方が楽なのです。

投稿2021/03/25 00:59

編集2021/03/25 00:59

Lhankor_Mhy

総合スコア36158

私が気になる点ですが、ｐタグに共通の名前を付ける意味です。pタグを親要素で囲み、親要素にclassを付ければ

ＣＳＳ変更できるとkなっげています。この場合のリスクや、この場合だと不適切な点はありますか？

結論から言うと、「あります」。

pタグというのはとても一般的なタグと思います。「段落」を表すタグなので多用することでしょう。
もし、pタグは使いたいけど、pタグに適応されているスタイリングは使いたくない。。。
どうしますか？上書きするクラスを使いますか？
それだったら、最初から必要なpタグにのみスタイリングを適用するクラスを使えば良いのではないでしょうか？

別に、動画やデザインカンプなどは全く見てないです。