CSS各ページの要素位置コードはどこに置かれますか？

Question

私はcssを知っていますが、もしボタンをスタイリングしたいと思っていたら...しかし、要素を配置するとどうなりますか？各ページには異なる要素の位置/要素があります。メインのCSSファイル内のすべてのページと位置に各要素のIDを作成するのは意味がありますか？

Answer 1

ページを設計するとき、スタイル（例えばCSS）からコンテンツ（例えば、HTML）を分離することが非常に重要です。うまく構成されたウェブページは、大声で読み上げることができ、意味をなさないはずです。

この文脈では、要素の位置は、ページ全体ではなく他の要素に関連して定義する必要があります。これらの要素はクラス（例：<div class="announcement">）に割り当てることもできます。

これは、クラス（またはid）だけでなく、親クラスに関するクラスに対しても異なる動作を定義できるため、多くの機能を提供します。例えばこれらのシナリオを取る：

シナリオ1：

<div class="post-content"> 
    <div class="announcement"> 
     Some text 
    </div> 
</div> 

はシナリオ2：

<div class="special-content"> 
    <div class="announcement"> 
     Some text 
    </div> 
</div> 

"を発表" の主なCSSルールは同じにすることができます。しかし、あなたは "特別なコンテンツ"領域の中にある "発表"の特別なルールを持つことができます。したがって、違うはずのプロパティに対して別のルールを追加するだけで済みます。位置だけでなく何でも：

.announcement { 
    color: red; 
} 

.post-content .announcement { 
    padding-left: 5px; 
} 

.special-content .announcement { 
    padding-left: 20px; 
} 

もちろん、クラス、ID、または標準要素と同様の関係を構築できます。 MDNのセレクタの詳細については、こちらをご覧ください。