CSS Nite LP47「Coder's High 2016」フォローアップ（8）高津戸 壮さん（ピクセルグリッド）

2016年9月24日（土）TKPガーデンシティPREMIUM神保町で開催したCSS Nite LP47「Coder's High 2016」のフォローアップとして、高津戸 壮さん（ピクセルグリッド）の『Enduring CSS』セッションのスライドなどを公開します。

• スライド（HTML）
• スライド（PDF）
• 音声
• 動画

セッション8「Enduring CSS」を担当したピクセルグリッドの高津戸です。長時間のイベントでしたが、ご清聴くださり、ありがとうございました。

アンケートにて頂いた質問にご回答いたします。

サイト全体でデザインを統一したい時向かなそう

これについてはその通りだと思います。私も、コーポレートサイトを作る場合、サイト全体で共通のモジュールをデザインし、そのモジュールを使いまわして多くのページを量産するというような方法を採用してきたことがほとんどでした。このような場合、サイト全体で共通のモジュールが多くなるため、名前空間で明確に分けるというのは難しいように思えます。

一応、ECSS書籍の中では、サイト全体で横断して使われるようなモジュールには、sw-（SiteWide）という名前空間を用意し、この名前空間に属させるというような例が紹介されています。しかし同時に、この名前空間に属するモジュールが多すぎると、やはり後でモジュールを変更したり、消したりするのは難しくなるため、ECSSのやりたいことを実現できなくなってしまう故、塩梅を考えよとのアドバイスも同時に書かれています。

結局のところ、サイトをどのように運用していくかという点について考えた時、長い運用に耐えられるという点に最も重きを置いて考えられたのがECSSであり、どのような場合においても、常にベストな答えというわけでは無いでしょう。全てECSSのとおりにする必要は全くありませんので、自分のプロジェクトには向いているのか向いていないのかを判断し、良さそうであれば、部分的にでも、採用してみると良いのではないでしょうか。

ECSSにぴったりマッチさせるには、Webサイトのデザイン自体も、それとなくECSSの思想に寄せて作られているような状態にする必要があるかもしれません。

メンテナンスのときに漏れが発生しそう

同じようなモジュールでも、別のCSSで書かれているという考えが基本となるため、例えば「このデザイン見出しの文字サイズを変えたい」と思った時、何箇所もCSSを編集する必要が出てくるというケースはあるでしょう。これについては、分けて考えるというECSSが取った選択のデメリットと言って良いかと思います。前述したように、そういったモジュールを、全体で共通のモジュールとして考えるのも一つの答えです。

bodyにidを振っていたけれどそれをクラスの頭につける感じでしょうか？

セッション内で挙げたのは、テンプレートごとに別の名前空間を用意するという例でした。この例においては、そのようなイメージと近いものと考えて良いかと思います。

ただ、名前空間の切り方は自由なので、ページ毎という縛りにとらわれる必要は無く、そこはサイトに合わせて自分で設計して問題無い部分です。

CSSを分けるとリクエストが増えて高速化の観点からすると心配

分けて考えるとお伝えしましたが、最終的にブラウザが読むCSSのファイルを、名前空間の数だけ用意するというわけではありません。ECSSでは、CSSの管理は何らかのビルドツールを使って行うことを推奨しており、書籍の中では、postCSSを使ったgulpのセットアップ例が紹介されています。

あえて分けたいという箇所については、そのように名前空間でまとめたCSSファイルを用意しても良いかと思います。ですが、基本的には、gulpなりでCSSはいくつかのファイルにまとめてしまい、gzipするというのが推奨される方法のようです。

ベース部分の設定についてはSMACSSなどの分け方と共存するかんじでしょうか

この点については、とりたててECSS内では触れられていませんが、必要に応じてnormalize.cssや最小限のreset.cssを読み込むと良いであろうと書かれています。

http://ecss.io/chapter5.html

ビルドを頑張らねばならないというのはどういうことか？

ECSSでは名前空間でモジュールをグルーピングし、名前空間ごとにCSSや画像、JSをまとめることとなります。HTMLではこれらを全て個別に読み込むわけではなく、一つのファイルにまとめてしまい、それを読み込ませるのが、前述した高速化の視点からは望ましいでしょう。

これを行うには、gulp等のビルドツールを用いる必要が出てきます。つまるところ、全体で一つのCSSに全部かいてしまうという方法をやめ、名前空間ごとに分けて管理しようというやり方を選んだのがECSSなので、この分けたファイルらをまとめたり何なりしたい場合、ビルドするという工程は必要になってきます。

CodeGrid、記事単位で売ってくれると嬉しいかも

これは宣伝となりますが、本セッションで紹介した内容をもうちょっと深掘りした記事が、弊社サービス、CodeGridでお読みいただけます。

https://app.codegrid.net/series/2016-ecss

CodeGridは今のところ月額制の支払い方法を基本としており、記事単位での販売は行っておりません。すみません！しかしながら、ご要望は開発の方にフィードバックさせていただきます。初月は無料ですので、気になる方はご購読頂けると幸いです。