Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ITCSSの良いところ

21a3c1f87953789898527dc908152b48?s=47 hiro
September 08, 2021

 ITCSSの良いところ

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

21a3c1f87953789898527dc908152b48?s=128

hiro

September 08, 2021
Tweet

More Decks by hiro

Other Decks in Programming

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

  16. None