BEM、カスケーディングスタイルとClassitis？

Question

私はウェブのコーディングをフロントエンドに戻そうとしています。私が最後にCSSを書くのは10年前でした。その当時、というクラスの炎がでした。私のclassitisの理解は間違っているかもしれませんが、CSSクラスが多すぎるHTML文書を捨てないようにして、カスケード規則を使ってHTMLマークをきれいに整えてください。

は例えば、これは、我々がclass="feed"を除くすべてのクラスを削除して、CSSルールを書くことができCSSのルールをカスケード接続することの利点を使用してclassitis

<ul class="feed"> 
<li class="item"> 
<img src="" class="thumbnail"/> 
<a href="" class="read-more">Read More</a> 
</li> 
</ul> 

可能性があり、このような

.feed li img {/*style*/} 
.feed li a {/*style*/} 

このようコンテンツとプレゼンテーションの分離度が高まります。

しかし、非常に大規模なWebアプリケーションでは、何がどのようにカスケードしているのかを忘れやすくなり、他のチームメンバーがプロジェクトに加わると、フロントエンドアーキテクチャ全体を把握することがさらに困難になります。また、クラスにタグ付けするための最善のルート要素を選択しなかった場合は、プロジェクトを再調整しようとするとさらに困難になります。

BEMは、クラスの命名規則ですべてのブロックと要素が何をすべきかを明確に識別できるという点で非常に有用です。 しかし、それはあなたがclassitisを再導入していることを意味し、コンテンツからプレゼンテーションを分離することは実現不可能な幻想であることを認めていますか？それは私の質問です。

注：ブロックの要素内で繰り返されるクラス名として、classitisを定義している人がいます（たとえば、親、子、および孫はすべて同じクラスに言及されています）。それが当時業界で受け入れられていた定義なのか、クラス文字の定義がCSSクラス/ IDの導入を意味するのが一般的であったのかどうかは分かりません。

Answer 1

最近、クラスアイス、脳炎、非セマンティックな要素、プレゼンテーションとコンテンツの合併を促すものはどれもいいのですか？

OOCSSとBEMは、数年前に登場した2つのCSS手法です。彼らは良い習慣を逆転させた。

CSSコードはコンテンツブロックのドレスに使用されます。アルバートとニコラスのために2種類の服を作らなければならないと想像してください。素朴な方法は、これらの2つの服に名前をつけることです："アルバートの習慣"と"ニコラスの習慣"。これは、コンテンツのセマンティクスに従った名前です。

ピエールが到着し、私たちは彼をドレスアップする必要があります。しかし、私たちの命名は再利用を妨げています。これはAlbertのものと非常に似ていても、新しい"Pierre's habit"を作成する必要があります。

衣服のデザインが私たちのビジネスになったら、私たちが仕事を再利用しやすくする方法を変更します。私たちは意図的に内容（服装をした人）による命名を避けるでしょう。私たちは服に名前を付けることを好む。それは抽象的な名前である可能性があります："習慣001"、"習慣002"などなぜでしょうか？それは再利用可能です。「大きくて青い習慣」、「小さくて広い習慣」などです。したがって、アルバートはを身に着けています」と言います。大きくて青い習慣 ""アルバートの習慣 "ではなくです。プレゼンテーションとコンテンツを混在させることではありません。パッケージの名前を付けるのに使用されるセマンティクスは、もは​​や内容のものではなく、パッケージの意味です。

コンテンツセマンティクスによる名前付けでは、CSSコードは実際には完全にリンクされており、HTMLコードに依存していました。ラッピングの名前を付けると、CSSコードはHTMLコードとは別に存在するコードになります。これにより、HTMLコード内の異なるブロックが同じ外観をよりよく再利用できるようになります。