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/

Transcript