CSS Nite LP54「Coder's High 2017」フォローアップ（8）高津戸 壮さん（ピクセルグリッド） | CSS Nite公式サイト

2017年11月4日（土）ベルサール半蔵門 イベントホールで開催したCSS Nite LP54「Coder's High 2017」のフォローアップとして、高津戸 壮さん（ピクセルグリッド）の『CSS設計方法論とその先』セッションのスライドなどを公開します。

• スライド（PDF）
• 動画

フォローアップメッセージは、イベント開催直後（2017年11月）の時点のものです。

「CSS設計方法論とその先」を担当した高津戸です。ありがとうござました。

私のセッションはでは、具体的なコードの書き方というよりむしろ、コードを書く上での概念的なところに終始してお話させていただきました。セッション内で取り上げたOOCSS、BEM，Enduring CSS、Atomic CSSなどのCSS設計方法論の詳細につきましては、本セッションでは詳しく取り上げませんでしたが、もしセッションを聞いて、ご興味を持たれましたら、ご参照されることをおすすめします。特にBEMにつきましては、今やデファクトスタンダードとも言える書き方となっていると言ってしまっても良いほどに広まった考え方です。

アンケートでいただいた感想として、「結局どうすればいいのか分からなかった」という意見を拝見しました。申し訳ありません、その答えを提示することはできません。私のセッションで最もお伝えしたいことは、CSS設計はどうすれば良いのか、どこかに答えが転がっているわけではないということです。そして、そのヒントとなることをパラパラと紹介させていただきました。

CSSの設計について、そこまで突き詰めて考える必要がないケースというのも多いです（まず、そこも一つ重要な認識だと思います）。ですが、規模の大きいサイトになってくると、この問題は重くのしかかってきます。UIの統一性維持、運用コスト増加の回避、スケーラビリティの確保など、多くの問題を回避するためキーになってきます。そのような問題を解決することができるスキルというのは、単にコードを書く以上の能力が必要とされます。そして、それはHTMLとCSSを書く人が次のステップとして踏み出す一つの道かと私は考えます。

最後に宣伝となりますが、弊社サービスCodeGridにおいてもCSS設計に関する記事があります。月額有料制ですがもしよろしければご参照いただければと思います。

ECSSで書かれた具体的なサイトが知りたい

コレだというのは自分も把握していないのですが、Enduring CSS著者のBen Frain氏が、ECSSを使ったサイトを集めたいと言っているのをGitHubやTwitter上で見かけました。

• Do you public a project example that you use ecss?
• Do you know of or have built a site that uses ECSS?

まぁ、サイトを見てもそのコンパイル元のソースコードが読めるわけではないのでなんともですが、よろしければご参照下さい。

• Object Oriented CSS
• BEM
• airbnb/css: Airbnbスタイルガイド
• nao215/css-style-guide: Airbnbスタイルガイド翻訳
• stylelint
• U.S. Web Design Standards
• Atomic Design
• Defining Design Systems ? EightShapes
• Enduring CSS
• Atomic CSS
• Let’s Define Exactly What Atomic CSS is | CSS-Tricks