Open4

Web Components

吉川雅彦吉川雅彦

CSSをどう記述するか

参考

https://yuheiy.hatenablog.com/entry/2020/05/25/021342

思考

  • <button type="button" class="button button--secondary button--iconLeftArrow">foo</button>
    • コンポーネント制作時：エンジニアまたはデザイナーがコンポーネントのHTMLとCSSを記述
  • <button type="button" class="button" data-variant="secondary" data-icon="left-arrow">foo</button>
    • コンポーネント制作時：エンジニアまたはデザイナーがコンポーネントのHTMLとCSSを記述（少しCSSが楽？）
  • <button type="button" class="button blue iconLeftArrow">foo</button>
    • コンポーネント制作時：エンジニアまたはデザイナーがコンポーネントのHTMLを記述（ユーティリティが初めから用意されている前提。また、共通言語があれば（つまりFigmaのデータがユーティリティという言語に変換可能なら）エンジニアのみでも実装可能）