なんでCSSすぐ死んでしまうん
240 likes80,054 views
Frontrend in Kanazawa -（2014年10月18日開催）で使用したスライドです。 http://labo.dmm.com/frontrend/
More Related Content
What's hot (20)
Viewers also liked (20)
Similar to なんでCSSすぐ死んでしまうん (20)
More from Hayato Mizuno (9)
なんでCSSすぐ死んでしまうん
- 1. なんでCSS すぐ死んでしまうん Frontrend in Kanazawa https://www.flickr.com/photos/tveskov/3387394098
- 5. BIG CSS https://www.youtube.com/watch?v=R-BX4N8egEc https://www.flickr.com/photos/nickpiggott/5212359135
- 6. “CSSはその単純さゆえに、 大規模な実装では管理が難しい。 BIG CSS “CSS, for all its simplicity, is a difficult language to manage in large-scale implementations. ” - MVCSS / Overview https://www.youtube.com/http://watch?mvcss.v=github.R-BX4N8egEc io/ https://www.flickr.com/photos/nickpiggott/5212359135
- 7. 簡単なシンタックス ≠ 簡単な言語 ! 異なるバージョンとブラウザベンダーへの依存 ! ネームスペースの問題 ! 紳士協定だけでルBIG ールをCSS 制限する難しさ ! … https://www.youtube.com/watch?v=R-BX4N8egEc https://www.flickr.com/photos/nickpiggott/5212359135
- 9. http://p.twipple.jp/qk9sw div { background: pink; }
- 11. メンテナンス 60% 開発 40% http://d.hatena.ne.jp/asakichy/20120420/1334872770
- 12. メンテナンス 60% 開発 40% 要件変更 60% 移行 23% バグ修正 17% http://d.hatena.ne.jp/asakichy/20120420/1334872770
- 13. メンテナンス 60% 開発 40% コードを 理解する時間 30% http://d.hatena.ne.jp/asakichy/20120420/1334872770
- 14. 良いCSS設計のゴール メンテナンス 60% 開発 40% コードを 理解する時間 30% http://article.enja.io/articles/css-architecture.html http://d.hatena.ne.jp/asakichy/20120420/1334872770 ! 予測しやすい ! 再利用しやすい ! 保守しやすい ! 拡張しやすい
- 16. http://goo.gl/OnnMm 設計はルーズなプロセスである ! 問題を解決することで新たな問題を生む ! うまくいくかどうかは試してみないとわからない ! 要件が変われば設計も変わる（かもしれない）
- 17. メソドロジーとルール https://www.flickr.com/photos/bdesham/2432400623
- 18. “我々はページをデザインしているの ではない、コンポーネントのシステ ムをデザインしているのだ。 “We're not designing pages, we're designing systems of components. ” - Stephen Hay http://bradfrostweb.com/blog/mobile/bdconf-stephen-hay-presents-responsive-design-workflow/
- 25. <paper-button label="button"> </paper-button> ! <paper-button label="button" raisedButton> </paper-button> https://www.polymer-project.org/docs/elements/paper-elements.html#paper-button
- 26. <paper-button label="button"> </paper-button> ! <paper-button label="button" raisedButton> </paper-button> Visual Non-visual ! <core-icon> ! <core-list> ! <core-overlay> ! … ! <core-ajax> ! <core-media-query> ! <core-localstorage> ! … https://www.polymer-project.org/docs/elements/paper-elements.html#paper-button
- 27. https:/h/wttwpsw:/./flwicwkrw.c.opmol/ypmheort-opsr/olajeecnt.uolfrega/nto/o5l9s4/d3e1s3ig2n2e9r6/
- 30. 再利用可能な チャンクに分離する - OOCSS - https://github.com/stubbornella/oocss/wiki
- 33. .button { ... } ! .panel { ... }
- 36. HTML <a class="button">Download</a> CSS .button { ... } !
- 37. HTML <a class="button">Download</a> CSS .button { ... } .button-raised { box-shadow: 0 1px 1px rgba(0, 0, 0, .5); } .button-large { font-size: 24px; }
- 38. HTML <a class="button button-raised">Download</a> CSS .button { ... } .button-raised { box-shadow: 0 1px 1px rgba(0, 0, 0, .5); } .button-large { font-size: 24px; }
- 39. HTML <a class="button button-large">Download</a> CSS .button { ... } .button-raised { box-shadow: 0 1px 1px rgba(0, 0, 0, .5); } .button-large { font-size: 24px; }
- 41. .panel { ... }
- 42. .panel { ... } ! .panel-colored { ... }
- 43. .panel { ... } ! .panel-colored { ... } ステートルール - SMACSS - https://smacss.com/book/type-state
- 44. .panel { ... } ! .panel-colored { ... }
- 45. .panel { ... } ! /* States */ .is-panel-active { ... }
- 46. .panel { ... } ! /* States */ .panel.is-active { ... }
- 47. .panel { ... } ! /* States */ .panel:hover, .panel.is-active { ... }
- 49. 再利用しない ユニークな部分は？
- 50. プロジェクトレイヤー - MCSS - http://operatino.github.io/MCSS/ja/
- 52. .tagline { ... }
- 53. .tagline { ... } ! .tagline .button { ... }
- 54. プロジェクトレイヤー - FLOCSS - https://github.com/hiloki/flocss
- 55. .p-tagline { ... } ! .p-tagline .c-button { ... }
- 56. 関心を分離せよ https://www.flickr.com/photos/clement127/9761836954
- 58. シナリオを立て 汎用さに対応する
- 60. <a class="button">Download</a> ! <button class="button">Download</button>
- 61. <a class="button">Download</a> ! <button class="button">Download</button> ! <span class="button">Download</span>
- 62. .button { position: relative; display: inline-block; box-sizing: border-box; padding: 12px 26px; border: none; background: #f12078; color: #fff; vertical-align: middle; text-align: center; text-decoration: none; font-size: 18px; cursor: pointer; user-select: none; }
- 63. .button { position: relative; display: inline-block; box-sizing: border-box; padding: 12px 26px; border: none; background: #f12078; color: #fff; vertical-align: middle; text-align: center; text-decoration: none; font-size: 18px; cursor: pointer; user-select: none; } ベースは後から 変更するのが難しい
- 64. .button { position: relative; display: inline-block; box-sizing: border-box; padding: 12px 26px; border: none; background: #f12078; color: #fff; vertical-align: middle; text-align: center; text-decoration: none; font-size: 18px; cursor: pointer; user-select: none; } Modifierで 拡張すべき要素か どうかをよく検討する
- 65. .button { position: relative; display: inline-block; box-sizing: border-box; padding: 12px 26px; border: none; background: #f12078; color: #fff; vertical-align: middle; text-align: center; text-decoration: none; font-size: 18px; cursor: pointer; user-select: none; }
- 68. HTML <div class="panel"></div> JS $('.panel').on('click' ...);
- 69. HTML <div class="panel js-ui-featured"></div> JS $('.js-ui-featured').on('click' ...);
- 71. <div class="panel" ng-click="..."> </div>
- 74. .panel { ... } ! .panel .heading { ... }
- 75. .panel { ... } ! .heading { ... }
- 76. .panel { ... } ! .heading 関{ 連...す }る 要素として 捉えるなら サブコンポーネント として定義する
- 77. .panel { ... } ! .panel-heading { ... }
- 78. .panel { ... } ! .panel-heading { ... } もしくは命名で どのようなルールが 適用されるかを伝える
- 81. <Bduivtt oclna sgsr=o"butpn-sg:roup"> <button class="btn">Left</button> <button class="btn">Middle</button> <button class="btn">Right</button> </div> http://getbootstrap.com/
- 83. レイアウトを 分離する - SMACSS - https://smacss.com/book/type-state
- 84. .panel { float: left; box-sizing: border-box; margin-right: 20px; padding: 20px; width: 220px; background: #fff; }
- 85. .panel { float: left; box-sizing: border-box; margin-right: 20px; padding: 20px; width: 220px; background: #fff; }
- 86. .l-featured .panel { float: left; margin-right: 20px; width: 220px; }
- 87. .l-featured .panel { float: left; margin-right: 20px; width: 220px; } ユーティリティで 対応する - SUIT CSS - https://github.com/suitcss
- 88. .u-float-left { float: left; } ! .u-margin-r-m { margin-right: 20px; } ! ...
- 89. .u-float-left { float: left; } ! .u-margin-r-m { margin-right: 20px; } ! ... グリッドシステム を活用する - Kite - http://hiloki.github.io/kitecss/
- 90. <div class="kite kite--grid has-gutter"> <div class="panel kite__item is-3of12"> ... </div> <div class="panel kite__item is-3of12"> ... </div> <div class="panel kite__item is-3of12"> ... </div> <div class="panel kite__item is-3of12"> ... </div> </div>
- 94. https://bem.info/ block block_modifier block__element block__element_modifier
- 96. component component--modifier component__subcomponent component__subcomponent--modifier http://article.enja.io/articles/about-html-semantics-and-front-end-architecture.html
- 98. c-component c-component—modifier c-component__subcomponent c-component__subcomponent—modifier https://github.com/hiloki/flocss
- 100. .button { ... } ! .button-raised { ... } ! .button-large { ... }
- 101. .button { ... } ! .button—-raised { ... } ! .button—-large { ... }
- 103. .panel { ... } ! .panel-heading { ... }
- 104. .panel { ... } ! .panel__heading { ... }
- 110. 生きたスタイルガイド を持ち込む
- 112. https://www.flickr.com/photos/dex1138/7002850433 Code Smells http://article.enja.io/articles/code-smells-in-css.html
- 113. スタイルの取り消し
- 114. .button { box-sizing: border-box; padding: 12px 26px; text-align: center; } ! .button—-no-padding { スタイルの取り消し padding: 0; }
- 115. .button { box-sizing: border-box; padding: 12px 26px; text-align: center; } ! .button—-no-padding { スタイルの取り消し padding: 0; }
- 116. .button { box-sizing: border-box; text-align: center; } ! .button—-large { スタイルの取り消し padding: 12px 26px; }
- 117. マジックナンバー
- 118. マジックナンバー .bubble { position: absolute; top: -57px; left: 0; ... }
- 119. マジックナンバー .bubble { position: absolute; top: -57px; left: 0; ... }
- 120. マジックナンバー .bubble { position: absolute; bottom: 100%; left: 0; ... }
- 121. 受動的な詳細度
- 122. #main .button { margin: 20px !important; width: 100% !important; 受動的な詳細度 }
- 123. #main .button { margin: 20px !important; width: 100% !important; 受動的な詳細度 }
- 124. .u-margin-m { margin: 20px !important; } ! .button--full { 受動的な詳細度 width: 100%; }
- 125. 競合する要素に優先順位を ! ピクセルパーフェクト or フレキシブル ! すぐに稼働するコード or 美しいコード 競合する要素に優先順位を ! DRY or 保守性 ! 正しさ or 一貫性 ! 汎用性 or シンプルさ
- 127. https://github.com/pocotan001/ptan-no-css ! ベースはFLOCSSを採用 ! 例外としてコンポーネントはプリフィックスなし ! ユーティリティのみ略語を許容 ! CSSプリプロセッサーはなし ! Concat, Myth, Autoprefixer, Minify
- 128. Designer ♥ Developer http://www.flickr.com/photos/fallentomato/11768159726
- 129. “壊れない完璧な設計を求めるのでは なく、壊れたときに勇気を持って修 復できる設計を。 - cssradar