我决定完全摆脱 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 中要做的事情，我并不认为 ID 在 HTML5 中已经过时，请不要支持这个评论，我会在 html 4 中做同样的事情
<div class="sidebar sidebar-primary widget-area"></div>
<div class="sidebar sidebar-secondary widget-area"></div>
我现在的问题是关于角色属性。这基本上是一个虚构的价值吗？它在未来是否或可能有一些真正的意义？
解决方案 1 .sidebar 保留两个侧边栏的选择器，我将使用 side[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>