文書構造タグの分離

HTMLタグの中には、「面」や「範囲」の特性を持つものがあります。
こういったタグに対し、デザインを再現するためのスタイルを直接与えた場合、「意味付け」の範囲を変更しなくてはならなくなった時に様々な影響がでやすくなります。

具体的には、「修正要望の箇所に要素を追加したいが、HTMLとして適切ではなく、かといって、そのコード内にネストしないとデザイン上の要望を満たせない」といった状況です。
この場合、Classを付け替えるなどの構造を組み替えをおこない、それに伴って全てのページを同様に修正する。といった「望まない修正時間」が発生する事があります。

このような状況を極力避けるために、あらかじめ分離した状態でマークアップします。

方法は単純で、以下のようなHTMLタグにはスタイルを一切与えず、CSSセレクタにも指定せず、「フリーな状態」で必要な箇所 に差し込むようにマークアップします。

<header> <footer> <main><article> <aside> <section> <nav>

これにより、仮に組み替えが発生したとしても、デザイン再現との干渉を避ける事ができます。

HTMLタグ=機械への伝達用」「classやidの命名=人間への伝達用」と完全に割り切る事で、コーディングや設計がよりシンプルになるのではないかと思います。

CSSの上書きルール

CSSの上書きルールを定める事で、管理がしやすく破綻しにくい状態を維持しやすくなります。
以下、CASC使用時のCSS上書きに関するガイドです。

  • pagesは、base・layout・objectで定義した全てのスタイルを上書きできる
  • objectは、自身の内部に配置されたあらゆる要素を上書きできる
  • baseとlayoutは、object・pagesで定義した要素を上書きできない

部分的なimporterファイルの活用

Sassの各ディレクトリごと(もしくは必要性のあるディレクトリ)に、限られた範囲のファイルのみをインポートするための専用ファイルを設置します。

このファイルは、「新たなSassファイル作成と@importの記述」という一連のファイルオペレーションの範囲を最少化しつつ、コメントアウトを利用して簡易的なドキュメントとしても利用できます。

importerファイルの設置方法

  • Sass管理している各ディレクトリに、__importer.scssという名前のファイルを配置します。
    ※Sassの(_)パーシャルの前に、更に(_)アンダースコアを1つ加える事で、OSのウィンドウ内での並び順を固定します。
  • 次に、_style.scssから、上記の__importer.scssをインポートします。
  • 最後に、同じディレクトリ内にある全てのSassファイルを__importer.scssからインポートします。

簡易ドキュメントとして使用する際の具体的な例としては、ファイルの先頭でそのディレクトリの役割や仕様を包括的に記し、@importしたファイルの上に一行コメントを添える。といったものになります。

プリプロセッサ側のコメントアウトを使用する限り、CSSファイルへのコメント出力は抑えられるため、全てのコーディングルールの記述は難しくとも(それは別のドキュメントでおこなとして)そのプロジェクトに対する伝達が制作ファイルベースでおこないやすくなります。

※「importer」というファイル名は例であり、「index」や「dir_index」など、それぞれの環境で認識しやすい名称にしても問題ありません。

インデントの問題点と解決案

様々な要因を分離していくと、改修時の範囲や影響の特定は容易になりますが、反面、HTMLコード上のラップやインデントが増える傾向にあります。

メインの作業コードがどうしても右側に寄り、場合によっては不便に感じることがあるかもしれません。
これらは、制作環境のモニタがワイドスクリーンであったり、エディタの設定(1つのTabあたりのスペースの個数を切り替える。など)で緩和できます。(※根本的な解決とはいえませんが…)

「分離性の追及」と「最小コードによる記述」は相反しがちなため、気になる場合は、コンテンツ部分のみインデントをリセットするなどの工夫が必要になります。