ITCSSの良いところ

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

Transcript

1. ITCSSの良いところ
   株式会社ZOZOテクノロジーズ
   ZOZOTOWN本部/ZOZOWEB部/EC2
   菊地 宏之
   Copyright © ZOZO Technologies, Inc.
   

   View Slide

2. © ZOZO Technologies, Inc.
   2
   自己紹介
   

   View Slide

3. © ZOZO Technologies, Inc.
   株式会社ZOZOテクノロジーズ
   ZOZOTOWN本部/ZOZOWEB部/EC2
   菊地 宏之
   2020年04月 BtoB開発本部
   2020年10月 ZOZOTOWN本部
   やってること
   ● フロントエンド設計
   ● 開発改善
   ● アクセシビリティ改善
   3
   

   View Slide

4. © ZOZO Technologies, Inc.
   https://zozo.jp/

   ● 日本最大級のファッション通販サイト
   ● 1,400以上のショップ、8,200以上のブランドの取り扱い（ともに
   2021年3月末時点）
   ● 常時83万点以上の商品アイテム数と毎日平均2,900点以上の新着
   商品を掲載
   ● コスメ専門モール「ZOZOCOSME」や靴の専門モール
   「ZOZOSHOES」、ラグジュアリー＆デザイナーズゾーン
   「ZOZOVILLA」を展開
   ● 即日配送サービス
   ● ギフトラッピングサービス
   ● ツケ払い など
   4
   

   View Slide

5. © ZOZO Technologies, Inc.
   5
   https://fbz.zozo.com/

   

   ● ZOZOTOWN出店企業の自社ECのフルフィルメント支援サービス
   ● 自社EC運営のための撮影・採寸・梱包・配送などの各種フルフィ
   ルメント業務を、ZOZOTOWNの物流センター「ZOZOBASE」が
   受託
   ● 設備投資・人件費・在庫保管料などの負担なしで、自社ECの運営
   が可能
   ● 各販売チャネル（自社EC・店舗・ZOZOTOWN）の在庫連携が可
   能。これにより、商品欠品による販売機会の損失を最小化
   

   View Slide

6. © ZOZO Technologies, Inc.
   6
   はじめに
   

   View Slide

7. © ZOZO Technologies, Inc.
   最近、ZOZOTOWNでは「ITCSS」という設計思想を採用して、
   CSS設計を見直しました。
   詳しくは、TECH BLOGの記事をご覧ください！
   今日はこのITCSSについて紹介します。
   はじめに
   7
   ITCSSを採用して共同開発しやすいCSS設計をZOZOTOWNに導入した話
   https://techblog.zozo.com/entry/itcss-to-zozotown
   

   View Slide

8. © ZOZO Technologies, Inc.
   8
   ITCSSとは
   

   View Slide

9. © ZOZO Technologies, Inc.
   ITCSSは、CSS Wizardy の Harry Roberts氏が提唱したCSSの
   詳細度を管理する設計思想です。
   「Inverted Triangle CSS (逆三角形のCSS)」の略で、CSSの定
   義を詳細度順に階層化して記述します。基本は7つのレイヤー
   が定義されており、この記述が逆三角形として可視化されま
   す。
   下位レイヤー（図の下側）ほど、CSSの詳細度が高い定義を行
   います。また、上位レイヤーの定義が下位レイヤーの定義を上
   書きすることを禁止しています。
   これらのレイヤーは必要に応じて追加・削除することが許容さ
   れています。
   ITCSSとは
   9
   

   View Slide

10. © ZOZO Technologies, Inc.
    10
    ITCSSの良いところ
    

    View Slide

11. © ZOZO Technologies, Inc.
    ＼共同開発がしやすい／
    ITCSSの良いところ
    11
    

    View Slide

12. © ZOZO Technologies, Inc.
    ● レイヤーの役割が明確
    ○ 定義場所のルールが明確なため、初参加の開発メンバーへの説明コスト
    が低い
    ○ レイヤー分けされているため、複数メンバーが同時に作業しても競合し
    づらい
    ● ルールが柔軟
    ○ 自由にレイヤーを追加・削除することができるため、開発メンバーの意
    見を取り入れやすい
    ○ 命名規則などを独自に組み込みやすい
    共同開発がしやすい
    12
    

    View Slide

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
    （※）役割の詳細はブログ記事をご覧ください
    

    View Slide

14. © ZOZO Technologies, Inc.
    14
    まとめ
    

    View Slide

15. © ZOZO Technologies, Inc.
    ITCSSは、CSSの課題である詳細度の管理のしやすさだけではなく、共同開発の
    しやすさも魅力です。
    これからCSS設計を始める方は、ITCSSを取り入れてみてはいかがでしょうか。
    まとめ
    15
    

    View Slide

16. View Slide