CSS Architecture

Transcript

1. ? by yuki.ohnaka ＠ no4 1
2. CSS Architecture by yuki.ohnaka ＠ no4 2
3. About Me yuki ohnaka 株式会社ナンバーフォー Front-end / Server-side / Native-App engineer Vue / React / TypeScript / Java / PHP / Kotlin / Swift / Python / Docker / Ansible ... Qiita / Zenn by yuki.ohnaka ＠ no4 3
4. 良い CSS Architecture とは？ 予測しやすい 再利用しやすい 保守しやすい 拡張しやすい 出典: CSS Architecture by yuki.ohnaka ＠ no4 4
5. (c) 2017 niewals by yuki.ohnaka ＠ no4 5
6. CSS 設計をするときの 7 つのポイント by yuki.ohnaka ＠ no4 6
7. 1. コンテンツとスタイリングは疎結合にする <!-- no good --> <article class="article"> <h2 class="article__title">title</h2> </article> /** no good */ .article h2 { /** */ } by yuki.ohnaka ＠ no4 7
8. 1. コンテンツとスタイリングは疎結合にする <!-- good --> <article class="article"> <h2 class="article__title">title</h2> </article> /** good */ .article__title { /** */ } by yuki.ohnaka ＠ no4 8
9. 2. 影響範囲を無闇に拡げない /** no good */ #main-nav > div { /** */ } /** good */ .main-nav__section { /** */ } by yuki.ohnaka ＠ no4 9
10. 3. 親に関わらず動くようにする /** no good */ #main-nav .article { /** */ } /** good */ .article { /** */ } by yuki.ohnaka ＠ no4 10
11. 4. 詳細度を無闇にあげない /** no good */ #main-nav ul li ul li div { /** */ } /** good */ .main-nav-sub-list__inner { /** */ } by yuki.ohnaka ＠ no4 11
12. 5. 影響範囲が想像できるクラス名 <!-- no good --> <article class="article"> <h2 class="title">title</h2> </article> /** no good */ .article .title { /** */ } by yuki.ohnaka ＠ no4 12
13. 5. 影響範囲が想像できるクラス名 <!-- good --> <article class="article"> <h2 class="article__title">title</h2> </article> /** good */ .article__title { /** */ } by yuki.ohnaka ＠ no4 13
14. 6. 見た目・機能・役割が想像できるクラス名 /** no good */ .title1 { /** */ } /** good */ .page-title { /** */ } by yuki.ohnaka ＠ no4 14
15. 7. コンポーネントにマージンを持たせない /** no good */ .article { margin-left: 20px; } /** good */ .article-container { display: grid; column-gap: 20px; } .article { /** */ } by yuki.ohnaka ＠ no4 15
16. さぁ、やってみよう by yuki.ohnaka ＠ no4 16
17. チームで開発するためには、具体的なルールが 必要 by yuki.ohnaka ＠ no4 17
18. 既存の CSS を設計を取り入れる BEM (MindBEMding) OOCSS SMACSS FLOCSS Enduring CSS (ECSS) 必要に応じてカスタムする場合はある。 by yuki.ohnaka ＠ no4 18
19. ご清聴ありがとうございました by yuki.ohnaka ＠ no4 19
20. @ おまけ by yuki.ohnaka ＠ no4 20
21. CSS Architecture は必要か？ by yuki.ohnaka ＠ no4 21
22. 最近 CSS の周辺環境 は便利になってきている scoped CSS (Vue) CSS Modules (with React) CSS in JS (with React) styled-components (with React) Utility first CSS FW (tailwind) with Web Components もう CSS Architecture なんてどうでもいいのでは？ by yuki.ohnaka ＠ no4 22
23. 引き続き CSS Architecture は必要 解決できていない課題もある モダンな開発以外の開発案件もまだたくさんある CSS Architecture で考慮していた要素が、別（コンポーネント設計 など）に移っただけなので、考えなければいけないことは一緒。 by yuki.ohnaka ＠ no4 23
24. シングルクラス VS マルチクラス by yuki.ohnaka ＠ no4 24
25. 抽象的過ぎないマルチクラスがおすすめ by yuki.ohnaka ＠ no4 25