2018年初頭の現在、WEBサイトのCSS設計思想や概念・手法は様々なものが存在しています。

特に「定番」と呼ばれるものはどれも素晴らしいものばかりですが、目的が「堅牢性の向上」というベクトルにある限り、時代背景や発案者の環境によってつくられた「限定的」なものと言えます。

CASCは、新たなルールによって堅牢性を高める目的のものではありません
堅牢性の向上を目的としたルールは、全てにおいて万能かつ画一的なものが定めにくく、環境やサイトの特性によって最適なものが異なります。
CASCはこいった状況に対応し、それぞれにおいて最適なCSS設計をおこないやすくするためのコアメソッドです。

踏襲可能なもの

以下のCSS設計思想や制作手法における「優れたアイデア」を踏襲しやすくしています。

  • SMACSS
  • OOCSS
  • BEM
  • FLOCSS
  • Atomic Design (※デザインアプローチのコーディング受け皿として)

CASCの要点

CASCの要点は、不都合の発生に繋がりやすい3つの要因を排除し、
変更を前提としたCSS役割分類をおこなっていることです。

この2つにより、環境やサイトに適合したCSS設計の自由度を高めます。

ポイント イメージ図

コーディング時の「望まないリファクタリング」に繋がりやすい3つの要因を、「カプセル化と分離」によって排除します。

1・部品のカプセル化による影響分離 意図しない他の要素からの影響を分離
2・Layoutの役割分離 定義が曖昧・人により解釈が異なりやすい役割の明確化
3・文書構造の干渉分離 後の不都合発生リスクを低減

これらは、「設計における検討事項の削減」「ロス時間発生リスクの低減」といった業務効率化であると同時に、CSS設計の自由度を底上げするための「地ならし」とも言えます。


1・部品のカプセル化による影響分離

サイトの情報表示をおこなうための「部品」は、カプセル化する事によって意図しない他の要素からの影響を分離します。

詳細ルールは設計内容に依存しますが、1つの部品に対して同名のSassファイルを1つ作成し、そのファイル内で対象のCSSコードの記述を完結させることで、予測しやすさと管理効率を保ちます。


2・Layoutの役割分離

「Layout」は、多くのCSS設計思想や手法に盛り込まれているにも関わらず、定義が曖昧であったり、人によって解釈が異なりやすいといった、旧来から悩みの多いカテゴライズでした。

CASCでは、Layoutを「部品を入れるための間仕切り」と定義し、装飾的なデザインには関与しないと定めています。
これにより、WEBサイトのデータを表示するための「部品」と明確に役割を分離します。
また、CASCにおけるLayoutは不要であれば使用しなくともよいため、Layoutの概念を必要としない手法への移行がスムーズにおこなえます。


3・文書構造の干渉分離

WEBサイトのコーディングにおいて、「デザインの再現と文書構造の融合」は大きな命題です。
しかし、「面」や「範囲」の特性をもつHTMLタグに対して、「デザイン再現」の役割を与えると、様々なねじれが発生しやすくなります。
干渉が起こらないよう最初から分離しておくことで、後の不都合発生リスクを低減します。


CSSカテゴライズは、以下の4つを「デフォルトの状態」としています。
特に問題なければこのまま利用してもよいですし、「役割と目的優先の分類名」により、追加・変更しても問題ありません。

役割と目的優先の分類名

CSSカテゴライズの名称は、役割や目的に対して語句を選定しています。
設計に携わるより多くの人が「予測・理解・リマインドしやすい」と判断した語句を選び「デフォルトの状態」としていますが、これは、環境によって全く異なる可能性があります。

役割や目的に対し、既に慣れ親しんだ名称・語句がある場合、「変更できない名称」は、環境やサイトに適合したCSS設計をおこなう際の阻害要因となりえます。
このため、役割や目的を優先に考え、それを指し示すための名称は変更できるものとしています。

同様に、5つめ、6つめの役割を追加しても問題ありません。

CASCのコンセプトと背景

近年のWEB制作現場に焦点を当てた、制作・運用の効率化

CASC公開の2018年初頭、WEB制作業界では、デバイスの多様化と運用の簡便さを融合させるために様々な技術や手法が生まれ、それに伴いコーディングでは以前と比べ高い設計力と技術力が求められるようになりました。

現在、様々なCSS設計思想が存在していますが、その根底には、『制作を効率化しつつ、顧客にも制作者にもよりよい状態をつくりたい』 という願いがあるように感じます。

しかし、単一で全てにおいて万能なものはなく、未だ「業界標準の工法」が定義しにくい状態です。

これに対する一つの対応策として、当初はSMACSをベースとした「独自ルール」による効率化を目指していました。

しかし、日進月歩のこの業界において、「その時に決定した、限られたメンバーのためのルール」は次第に古くなり、常に改善が求められます。

こういった経緯から、「堅牢性のためのルールは、個々の環境やサイトの特性によって設計したほうがよい」と気づき、「それならば、主要とされる設計手法を柔軟に取り入れられる受け皿を作ろう」という方針に切り替えた結果がこのCASCです。

今後、更に新たな概念や手法が生まれる事は想像に容易いですが、 この仕組みが、近年のいずれかの現場にとって、顧客のベネフィット向上のきっかけになれば幸いです。

公開元・ライセンスについて

この仕組みは、Qwi Projectにより、企画・設計・公開しています。

このサイトに掲載している情報は、概念・仕組み・提案であり、使用・導入によるライセンスは発生しません。

このサイトからダウンロードできるファイルを使用するに限り、「MITライセンス」が適用されます。
詳細については「Qwi Project > LICENSE」のページをご覧ください。