CASCの概要
2018年初頭の現在、WebサイトのCSS設計思想や概念・手法はさまざまなものが存在しています。
とくに「定番」と呼ばれるものはどれも素晴らしいものばかりですが、目的が「堅牢性の向上」というベクトルにある限り、時代背景や発案者の環境によってつくられた「限定的」なものと言えます。
CASCは、新たなルールによって堅牢性を高める目的のものではありません。
堅牢性の向上を目的としたルールは、すべてにおいて万能かつ画一的なものが定めにくく、環境やサイトの特性によって最適なものが異なります。
CASCはこいった状況に対応し、それぞれにおいて最適なCSS設計をおこないやすくするためのコアメソッドです。
踏襲・組み込み合わせ可能なもの
標準状態で、以下のCSS設計思想や制作手法を踏襲・組み合わせしやすくしています。
- SMACSS
- OOCSS
- BEM
- FLOCSS
- Atomic Design （※デザインアプローチのコーディング受け皿として）
3つの要因を排除
コーディング時の「望まないリファクタリング」に繋がりやすい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の役割分類と標準状態
CSSカテゴライズは、以下の4つを「デフォルトの状態」としています。
とくに問題なければこのまま利用してもよいですし、「役割と目的優先の分類名」により、追加・変更しても問題ありません。
役割と目的優先の分類名
CSSカテゴライズの名称は、役割や目的に対して語句を選定しました。
設計に携わるより多くの人が「予測・理解・リマインドしやすい」と判断した語句を選び「デフォルトの状態」としていますが、これは環境によって全く異なる可能性があります。
役割や目的に対し、すでに慣れ親しんだ名称・語句がある場合、「変更できない名称」は、環境やサイトに適合したCSS設計をおこなう際の阻害要因となりえます。
このため役割や目的を優先に考え、それを指し示すための名称は変更できるものとしました。
同様に5つめ6つめの役割を追加しても問題はなく、不要なものは削除してもかまいません。
CASCのコンセプトと背景
近年のWeb制作現場に焦点を当てた、制作・運用の効率化
CASC公開の2018年初頭、Web制作業界では、デバイスの多様化と運用の簡便さを融合させるためにさまざまな技術や手法が生まれ、それに伴いコーディングでは以前と比べ高い設計力と技術力が求められるようになりました。
現在、さまざまなCSS設計思想が存在していますが、その根底には『制作を効率化しつつ、顧客にも制作者にもよりよい状態をつくりたい』 という願いがあるように感じます。
しかし、単一ですべてにおいて万能なものはなく、いまだ「業界標準の工法」が定義しにくい状態です。
これに対する一つの対応策として、当初はSMACSSをベースとした「独自ルール」による効率化を目指していました。
しかし、日進月歩のこの業界において、「その時に決定した、限られたメンバーのためのルール」は次第に古くなり、常に改善が求められます。
こういった経緯から、「堅牢性のためのルールは、個々の環境やサイトの特性によって設計したほうがよい」と気づき、「それならば、主要とされる設計手法を柔軟に取り入れられる受け皿を作ろう」という方針に切り替えた結果がこのCASCです。
今後、更に新たな概念や手法が生まれる事は想像に容易いですが、 この仕組みが近年のいずれかの現場にとって、顧客のベネフィット向上のきっかけになれば幸いです。
公開元・ライセンスについて
この仕組みは、Qwi Projectにより、企画・設計・公開しています。
このサイトに掲載している情報は、概念・仕組み・提案であり、使用・導入によるライセンスは発生しません。
このサイトからダウンロードできるファイルを使用するに限り、「MITライセンス」が適用されます。
詳細については「Qwi Project ＞ LICENSE」のページをご覧ください。