CSS用のスケーラブルでモジュラーなアーキテクチャを読んだばかりですが、いくつかのことを考えさせられます。スヌークの2つの主要なテネットは次のとおりです。
- HTMLとコンテンツのセクションのセマンティック値を増やす
- 特定のHTML構造の期待値を減らします
つまり、これは、ターゲティングに非セマンティック要素タイプに依存するのではなく、セマンティッククラス名を使用することを意味します。たとえば、.someClass h5ターゲットにするのではなく、代わりにターゲット.someClass-titleを設定して、h5が別のものに交換された場合に、問題が発生しないようにすることができます。
個人的には、要素の階層をその名前でエンコードするのは不快だと思います（意味的に正しい場合でも）。私はやりたい.someClass .titleです。ただし、タイトルと同じくらい一般的なクラスを使用するには、このクラスがさまざまなコンテキストで使用されることを受け入れる必要があります。
それで、セレクターの前のアイテムによって名前空間が付けられることがわかっている場合、まったく異なるコンテキストで同じクラスを使用することに何か問題がありますか？
たとえば、私のサイトに「タイトル」のクラスが意味をなす3つの異なる場所があるとします。
HTML
<header class="pageHeader">
<h1 class="title">Some Title</h1>
</header>
...
<article class="leadArticle>
<h3 class="title">Some Article Title</h3>
</article>
...
<ul class="productPreviews">
<li class="product">
<h5 class="title">Some Product Name</h5>
</li>
</ul>
CSS
.pageHeader .title
{
}
.leadArticle .title
{
}
.productPreview .product .title
{
}
編集：Alohciが以下の回答で述べているように、ヘッダータグは意味がないわけではないので、おそらくこれは使用するのに最適な例ではありませんでした。
明らかに、私はこれらのコンテキストでタイトルとはまったく異なることをしているかもしれませんが、タイトルはそのモジュールの名前空間で絶対的に意味があり、一般的なセレクターとしてタイトルを使用するつもりはありません。
これはすべてのボックスをチェックしているようです。それは意味的に豊富で、実装から完全に切り離されています。たとえば、最後の例がolまたはdivのスタックに変更された場合、何も壊れることはなく、タイトルがdivにラップされている場合でも、ターゲットになります。
これは私には理にかなっていますが、このアプローチがあまり使用されていないので、なぜだろうと思っています。明らかな欠点は、セレクターでクラスをチェーンしていることですが、これは各クラス名の名前空間よりも望ましいと思います。