CSS設計を破綻させない

Cb0e411d88a1bcd1562890c816970a8e?s=47 Shota Kubota
December 03, 2016

 CSS設計を破綻させない

2016/12/3のbuilderscon tokyo 2016で話した内容です。

---

## 資料内のリンク

- "CSS is too fragile"が最初に書かれた記事? http://www.andoh.org/2009/11/web-directions-east-2009-nicole.html
- CSS ルールセット構造図 · terkel.jp http://terkel.jp/archives/2011/09/css-rule-structure/
- "デザインの意図を正確に理解した上で書かれたCSSは破綻しない" の元ネタ http://morishitter.hatenablog.com/entry/2016/07/29/204642
- CSS Stats http://www.cssstats.com/
- StyleStats http://www.stylestats.org/
- CSS Specificity Graph Generator https://jonassebastianohlsson.com/specificity-graph/
- FLOCSS https://github.com/hiloki/flocss
- BEM https://en.bem.info/methodology/naming-convention/
- 神獄のヴァルハラゲートのCSS設計 - I'm kubosho_ http://blog.kubosho.com/entry/2014/12/09/valhalla-gate-css-architecture
- Atomic Design http://atomicdesign.bradfrost.com
- CSS Modules https://github.com/css-modules/css-modules

---

Q&A

- inuscript/sort-specificity https://github.com/inuscript/sort-specificity

---

## 参考資料

- 僕はCSSを見殺しにした - dskd http://dskd.jp/archives/54.html
- Atomic Design powered by React @ AbemaTV http://www.slideshare.net/ygoto3q/atomic-desigin-powered-by-react-abematv
- AbemaTVのランタイムパフォーマンスのAudit - 1000ch.net https://1000ch.net/posts/2016/abematv-runtime-perf-audit.html
- The Specificity Graph – CSS Wizardry – CSS, OOCSS, front-end architecture, performance and more, by Harry Roberts http://csswizardry.com/2014/10/the-specificity-graph/
- CSS specificity graphs in practice | Blog | Decade City https://decadecity.net/blog/2014/11/26/css-specificity-graphs
- Enduring CSSの設計思想 - ECSSが目指す設計 | CodeGrid https://app.codegrid.net/entry/2016-ecss-1
- SMACSSによるCSSの設計 - ベースとレイアウト | CodeGrid https://app.codegrid.net/entry/smacss-1
- 破綻しにくいCSS設計の法則 15 - Qiita http://qiita.com/BYODKM/items/b8f545453f656270212a
- CSSが破綻する4つの理由 - Qiita http://qiita.com/BYODKM/items/8c777db2d89f4e830c93

---

HTML版はこちら: https://kubosho.github.io/s/20161203-builderscon/

Cb0e411d88a1bcd1562890c816970a8e?s=128

Shota Kubota

December 03, 2016
Tweet

Transcript

  1. None
  2. None
  3. None
  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  14. None
  15. None
  16. None
  17. None
  18. None
  19. None
  20. None
  21. None
  22. None
  23. None
  24. None
  25. None
  26. None
  27. None
  28. None
  29. None
  30. None
  31. None
  32. None
  33. None
  34. None
  35. None
  36. None
  37. None
  38. None
  39. None
  40. None
  41. None
  42. None
  43. None
  44. None
  45. None
  46. None
  47. None
  48. None
  49. None
  50. None
  51. None
  52. None
  53. None
  54. None