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

CSS設計を破綻させない

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/

Shota Kubota

December 03, 2016
Tweet

More Decks by Shota Kubota

Other Decks in Programming

Transcript

  1. View Slide

  2. View Slide

  3. View Slide

  4. View Slide

  5. View Slide

  6. View Slide

  7. View Slide

  8. View Slide

  9. View Slide

  10. View Slide

  11. View Slide

  12. View Slide

  13. View Slide

  14. View Slide

  15. View Slide

  16. View Slide

  17. View Slide

  18. View Slide

  19. View Slide

  20. View Slide

  21. View Slide

  22. View Slide

  23. View Slide

  24. View Slide

  25. View Slide

  26. View Slide

  27. View Slide

  28. View Slide

  29. View Slide

  30. View Slide

  31. View Slide

  32. View Slide

  33. View Slide

  34. View Slide

  35. View Slide

  36. View Slide

  37. View Slide

  38. View Slide

  39. View Slide

  40. View Slide

  41. View Slide

  42. View Slide

  43. View Slide

  44. View Slide

  45. View Slide

  46. View Slide

  47. View Slide

  48. View Slide

  49. View Slide

  50. View Slide

  51. View Slide

  52. View Slide

  53. View Slide

  54. View Slide