Capsule and Separation CSS
デザイン先行型のスクラッチ案件において、一般的な部品主体コーディングの設計の流れは以下のようになるのではないかと思います。（※スタッフィング・環境構築・ドキュメント方針などは省略）
CASCは、それぞれの環境による詳細ルールにまで干渉せず、これらのステップの一部において時間を短縮したり柔軟な設計をおこないやすくするためのものです。
とくに、部品の設計は要所となるため、分類方法とカプセル化についてのガイドを掲載しています。
この情報も、ルールではなく自由度を高めるための考え方、参考資料としてご覧ください。
HTMLタグの中には、「面」や「範囲」の特性をもつものがあります。
こういったタグに対し、デザインを再現するためのスタイルを直接与えた場合、「意味付け」の範囲を変更しなくてはならなくなった時にさまざまな影響がでやすくなります。
具体的には「修正要望の箇所に要素を追加したいが、HTMLとして適切ではなく、かといって、そのコード内にネストすることでしかデザイン上の要望を満たせない」といった状況です。
この場合、Classを付け替えるなど構造の組み替えをおこない、それに伴ってすべてのページを同様に修正する。といった「望まない修正時間」が発生する事があるでしょう。
このような状況を極力避けるために、あらかじめ分離した状態でマークアップしてください。
方法は単純で、以下のようなHTMLタグにはスタイルを一切与えず、CSSセレクタにも指定せず、「フリーな状態」で必要な箇所 に差し込むようにマークアップします。
<header> <footer> <main><article> <aside> <section> <nav>
これにより、仮に組み替えが発生したとしても、デザイン再現との干渉を避ける事が可能です。
「HTMLタグ＝機械への伝達用」「classやidの命名＝人間への伝達用」と完全に割り切る事で、コーディングや設計がよりシンプルになるのではないかと思います。
CSSの上書きルールを定める事で、管理がしやすく破綻しにくい状態を維持しやすくなります。
以下、CASC使用時のCSS上書きに関するガイドです。
Sassの各ディレクトリごと（もしくは必要性のあるディレクトリ）に、限られた範囲のファイルのみをインポートするための専用ファイルを設置します。
このファイルは、「新たなSassファイル作成と@importの記述」という一連のファイルオペレーションの範囲を最少化しつつ、コメントアウトを利用して簡易的なドキュメントとしても利用可能です。
簡易ドキュメントとして使用する際の具体的な例としては、ファイルの先頭でそのディレクトリの役割や仕様を包括的に記し、@importしたファイルの上に一行コメントを添える。といったものです。
プリプロセッサ側のコメントアウトを使用する限り、CSSファイルへのコメント出力は抑えられます。
すべてのコーディングルールの記述は難しくとも、そのプロジェクトに対する「ある程度」の伝達が制作ファイルベースでおこないやすくなります。
※「importer」というファイル名は例であり、「index」や「dir_index」など、それぞれの環境で認識しやすい名称にしても問題ありません。
さまざまな要因を分離していくと、改修時の範囲や影響の特定は容易ですが、その反面でHTMLコード上のラップやインデントが増える傾向にあります。
メインの作業コードがどうしても右側に寄り、場合によっては不便に感じることがあるかもしれません。
これらは、制作環境のモニタがワイドスクリーンであったり、エディタの設定（1つのTabあたりのスペース個数を切り替える。など）で緩和できます。（※根本的な解決とはいえませんが…）
「分離性の追及」と「最小コードによる記述」は相反しがちなため、気になる場合は、コンテンツ部分のみインデントをリセットするなどの工夫が必要です。