ITCSSの良いところ

by hiro

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

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