CSS のすべての ID を完全に削除することにしました。それに加えて、HTML 5 への移行を開始したいと考えています。
.sidebar が両方のサイドバーのセレクターであり、ID がサイドバーを個別にスタイルするために使用される古いマークアップ
<div id="sidebar" class="sidebar widget-area"></div>
<div id="sidebar-alt" class="sidebar widget-area"></div>
今、これは私がhtml 4で行うことであり、HTML5でIDが時代遅れであるという印象を受けていません。このコメントに賛成票を投じないでください。html 4でも同じことをしたでしょう
<div class="sidebar sidebar-primary widget-area"></div>
<div class="sidebar sidebar-secondary widget-area"></div>
私の質問は、ロール属性についてです。これは基本的に構成値ですか？それは将来的に何らかの本当の意味を持っているか、または持つ可能性がありますか?
ソリューション 1 .sidebar が両方のサイドバーのセレクターのままであり、aside[role="..."] を使用してサイドバーを個別にスタイルします
<aside role="sidebar-primary" class="sidebar widget-area"></aside>
<aside role="sidebar-secondary" class="sidebar widget-area"></aside>
解決策 2 または、両方のサイドバーに同じ役割を与え、共通のスタイルには役割セレクターを使用する方がよいでしょうか?
<aside role="sidebar" class="sidebar-primary widget-area"></aside>
<aside role="sidebar" class="sidebar-secondary widget-area"></aside>
私はまだ HTML 5 に慣れていないので、可能であれば詳細な説明とともに、よりよい意見を得るのが好きです。
役割のリストを見た後WTC、「サイドバー」の役割が定義されていないようであり、その後、両方のソリューション（1 + 2）が悪い可能性があります
解決策 3
「補完的な」役割は W3C によって役割として定義されているため、これはより良い方法でしょうか? なぜ人々が role="sidebar" を考え出すのか、そして単に役割を「発明」することにどのような意味があるのか、今でも興味があります。クラスを使用してスタイルを設定する必要がある場合CSSはどうなりますか?
<aside role="complementary" class="sidebar-primary widget-area"></aside>
<aside role="complementary" class="sidebar-secondary widget-area"></aside>