ITCSSの良いところ

ITCSSを採用して共同開発しやすいCSS設計をZOZOTOWNに導入した話（ https://techblog.zozo.com/entry/itcss-to-zozotown ）という記事を公開し、登壇用に作成したスライドです。

Transcript

1. ITCSSの良いところ 株式会社ZOZOテクノロジーズ ZOZOTOWN本部/ZOZOWEB部/EC2 菊地 宏之 Copyright © ZOZO Technologies, Inc.
2. © ZOZO Technologies, Inc. 2 自己紹介
3. © ZOZO Technologies, Inc. 株式会社ZOZOテクノロジーズ ZOZOTOWN本部/ZOZOWEB部/EC2 菊地 宏之 2020年04月 BtoB開発本部 2020年10月 ZOZOTOWN本部 やってること • フロントエンド設計 • 開発改善 • アクセシビリティ改善 3
4. © ZOZO Technologies, Inc. https://zozo.jp/
 • 日本最大級のファッション通販サイト • 1,400以上のショップ、8,200以上のブランドの取り扱い（ともに 2021年3月末時点） • 常時83万点以上の商品アイテム数と毎日平均2,900点以上の新着 商品を掲載 • コスメ専門モール「ZOZOCOSME」や靴の専門モール 「ZOZOSHOES」、ラグジュアリー＆デザイナーズゾーン 「ZOZOVILLA」を展開 • 即日配送サービス • ギフトラッピングサービス • ツケ払い など 4
5. © ZOZO Technologies, Inc. 5 https://fbz.zozo.com/
 
 • ZOZOTOWN出店企業の自社ECのフルフィルメント支援サービス • 自社EC運営のための撮影・採寸・梱包・配送などの各種フルフィ ルメント業務を、ZOZOTOWNの物流センター「ZOZOBASE」が 受託 • 設備投資・人件費・在庫保管料などの負担なしで、自社ECの運営 が可能 • 各販売チャネル（自社EC・店舗・ZOZOTOWN）の在庫連携が可 能。これにより、商品欠品による販売機会の損失を最小化
6. © ZOZO Technologies, Inc. 6 はじめに
7. © ZOZO Technologies, Inc. 最近、ZOZOTOWNでは「ITCSS」という設計思想を採用して、 CSS設計を見直しました。 詳しくは、TECH BLOGの記事をご覧ください！ 今日はこのITCSSについて紹介します。 はじめに 7 ITCSSを採用して共同開発しやすいCSS設計をZOZOTOWNに導入した話 https://techblog.zozo.com/entry/itcss-to-zozotown
8. © ZOZO Technologies, Inc. 8 ITCSSとは
9. © ZOZO Technologies, Inc. ITCSSは、CSS Wizardy の Harry Roberts氏が提唱したCSSの 詳細度を管理する設計思想です。 「Inverted Triangle CSS (逆三角形のCSS)」の略で、CSSの定 義を詳細度順に階層化して記述します。基本は7つのレイヤー が定義されており、この記述が逆三角形として可視化されま す。 下位レイヤー（図の下側）ほど、CSSの詳細度が高い定義を行 います。また、上位レイヤーの定義が下位レイヤーの定義を上 書きすることを禁止しています。 これらのレイヤーは必要に応じて追加・削除することが許容さ れています。 ITCSSとは 9
10. © ZOZO Technologies, Inc. 10 ITCSSの良いところ
11. © ZOZO Technologies, Inc. ＼共同開発がしやすい／ ITCSSの良いところ 11
12. © ZOZO Technologies, Inc. • レイヤーの役割が明確 ◦ 定義場所のルールが明確なため、初参加の開発メンバーへの説明コスト が低い ◦ レイヤー分けされているため、複数メンバーが同時に作業しても競合し づらい • ルールが柔軟 ◦ 自由にレイヤーを追加・削除することができるため、開発メンバーの意 見を取り入れやすい ◦ 命名規則などを独自に組み込みやすい 共同開発がしやすい 12
13. © ZOZO Technologies, Inc. レイヤー拡張の例（ZOZOTOWN） 13 ＃ レイヤー 役割 1 Settings CSSプリプロセッサなどで利用する変数や設定 2 Tools CSSプリプロセッサで利用するmixinやfunctionなどの定義 3 Generic リセットスタイルや固有のリセットスタイル定義 4 Base 素のHTML 要素のスタイル定義 5 Layouts 追加レイヤー（※） 6 Objects OOCSSの概念に基づいた定義 7 Vendor 追加レイヤー（※） 8 Components 再利用可能なコンポーネント（UIパーツ）を定義 9 Model 追加レイヤー（※） 10 Site 追加レイヤー（※） 11 Pages 追加レイヤー（※） 12 Trumps（Utility） ヘルパー・ユーティリティ系の汎用スタイルを定義 cf. ITCSSを採用して共同開発しやすいCSS設計をZOZOTOWNに導入した話 https://techblog.zozo.com/entry/itcss-to-zozotown （※）役割の詳細はブログ記事をご覧ください
14. © ZOZO Technologies, Inc. 14 まとめ
15. © ZOZO Technologies, Inc. ITCSSは、CSSの課題である詳細度の管理のしやすさだけではなく、共同開発の しやすさも魅力です。 これからCSS設計を始める方は、ITCSSを取り入れてみてはいかがでしょうか。 まとめ 15