Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

なんでCSSすぐ死んでしまうん

68,425 views

Published on

Frontrend in Kanazawa -(2014年10月18日開催)で使用したスライドです。

http://labo.dmm.com/frontrend/

Published in: Technology
  • Be the first to comment

なんでCSSすぐ死んでしまうん

  1. 1. なんでCSS すぐ死んでしまうん Frontrend in Kanazawa https://www.flickr.com/photos/tveskov/3387394098
  2. 2. @pocotan001 Hayato Mizuno
  3. 3. @大阪 http://peatix.com/event/55901
  4. 4. BIG CSS https://www.youtube.com/watch?v=R-BX4N8egEc https://www.flickr.com/photos/nickpiggott/5212359135
  5. 5. “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
  6. 6. 簡単なシンタックス ≠ 簡単な言語 ! 異なるバージョンとブラウザベンダーへの依存 ! ネームスペースの問題 ! 紳士協定だけでルBIG ールをCSS 制限する難しさ ! … https://www.youtube.com/watch?v=R-BX4N8egEc https://www.flickr.com/photos/nickpiggott/5212359135
  7. 7. http://p.twipple.jp/qk9sw
  8. 8. http://p.twipple.jp/qk9sw div { background: pink; }
  9. 9. 望ましい設計のゴール https://www.flickr.com/photos/nickpiggott/5212959770/in/photostream/
  10. 10. メンテナンス 60% 開発 40% http://d.hatena.ne.jp/asakichy/20120420/1334872770
  11. 11. メンテナンス 60% 開発 40% 要件変更 60% 移行 23% バグ修正 17% http://d.hatena.ne.jp/asakichy/20120420/1334872770
  12. 12. メンテナンス 60% 開発 40% コードを 理解する時間 30% http://d.hatena.ne.jp/asakichy/20120420/1334872770
  13. 13. 良いCSS設計のゴール メンテナンス 60% 開発 40% コードを 理解する時間 30% http://article.enja.io/articles/css-architecture.html http://d.hatena.ne.jp/asakichy/20120420/1334872770 ! 予測しやすい ! 再利用しやすい ! 保守しやすい ! 拡張しやすい
  14. 14. http://goo.gl/OnnMm
  15. 15. http://goo.gl/OnnMm 設計はルーズなプロセスである ! 問題を解決することで新たな問題を生む ! うまくいくかどうかは試してみないとわからない ! 要件が変われば設計も変わる(かもしれない)
  16. 16. メソドロジーとルール https://www.flickr.com/photos/bdesham/2432400623
  17. 17. “我々はページをデザインしているの ではない、コンポーネントのシステ ムをデザインしているのだ。 “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/
  18. 18. http://styletil.es/
  19. 19. http://sparkbox.github.io/style-prototype/
  20. 20. http://medialoot.com/item/free-flat-ui-design-kit/
  21. 21. http://getbootstrap.com/
  22. 22. https://www.polymer-project.org/
  23. 23. https://www.flihctktpr.c:/o/cmo/dpehpoetons.io/la/peoncuolfetaann0/50914/f3u1ll/3E2tq2r9c6/
  24. 24. <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
  25. 25. <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
  26. 26. https:/h/wttwpsw:/./flwicwkrw.c.opmol/ypmheort-opsr/olajeecnt.uolfrega/nto/o5l9s4/d3e1s3ig2n2e9r6/
  27. 27. https://www.flickr.com/photohst/tlape:/n/cuulfesatonm/5e9le4m31e3n2ts2.9io6/
  28. 28. http://www.bestpsdfreebies.com/freebie/appz-psd-theme/
  29. 29. 再利用可能な チャンクに分離する - OOCSS - https://github.com/stubbornella/oocss/wiki
  30. 30. .button { ... } ! .panel { ... }
  31. 31. 付加要素は Modifierで拡張する
  32. 32. HTML <a class="button">Download</a> CSS .button { ... } !
  33. 33. 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; }
  34. 34. 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; }
  35. 35. 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; }
  36. 36. .panel { ... }
  37. 37. .panel { ... } ! .panel-colored { ... }
  38. 38. .panel { ... } ! .panel-colored { ... } ステートルール - SMACSS - https://smacss.com/book/type-state
  39. 39. .panel { ... } ! .panel-colored { ... }
  40. 40. .panel { ... } ! /* States */ .is-panel-active { ... }
  41. 41. .panel { ... } ! /* States */ .panel.is-active { ... }
  42. 42. .panel { ... } ! /* States */ .panel:hover, .panel.is-active { ... }
  43. 43. 再利用しない ユニークな部分は?
  44. 44. プロジェクトレイヤー - MCSS - http://operatino.github.io/MCSS/ja/
  45. 45. .tagline { ... }
  46. 46. .tagline { ... } ! .tagline .button { ... }
  47. 47. プロジェクトレイヤー - FLOCSS - https://github.com/hiloki/flocss
  48. 48. .p-tagline { ... } ! .p-tagline .c-button { ... }
  49. 49. 関心を分離せよ https://www.flickr.com/photos/clement127/9761836954
  50. 50. シナリオを立て 汎用さに対応する
  51. 51. <a class="button">Download</a>
  52. 52. <a class="button">Download</a> ! <button class="button">Download</button>
  53. 53. <a class="button">Download</a> ! <button class="button">Download</button> ! <span class="button">Download</span>
  54. 54. .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; }
  55. 55. .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; } ベースは後から 変更するのが難しい
  56. 56. .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で 拡張すべき要素か どうかをよく検討する
  57. 57. .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; }
  58. 58. スタイルとJSの フックを分離する
  59. 59. HTML <div class="panel"></div> JS $('.panel').on('click' ...);
  60. 60. HTML <div class="panel js-ui-featured"></div> JS $('.js-ui-featured').on('click' ...);
  61. 61. AngularJS https://angularjs.org/
  62. 62. <div class="panel" ng-click="..."> </div>
  63. 63. コンポーネント同士の 関係を疎にする
  64. 64. .panel { ... } ! .panel .heading { ... }
  65. 65. .panel { ... } ! .heading { ... }
  66. 66. .panel { ... } ! .heading 関{ 連...す }る 要素として 捉えるなら サブコンポーネント として定義する
  67. 67. .panel { ... } ! .panel-heading { ... }
  68. 68. .panel { ... } ! .panel-heading { ... } もしくは命名で どのようなルールが 適用されるかを伝える
  69. 69. http://getbootstrap.com/
  70. 70. http://getbootstrap.com/ Button groups
  71. 71. <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/
  72. 72. レイアウトを 分離する - SMACSS - https://smacss.com/book/type-state
  73. 73. .panel { float: left; box-sizing: border-box; margin-right: 20px; padding: 20px; width: 220px; background: #fff; }
  74. 74. .panel { float: left; box-sizing: border-box; margin-right: 20px; padding: 20px; width: 220px; background: #fff; }
  75. 75. .l-featured .panel { float: left; margin-right: 20px; width: 220px; }
  76. 76. .l-featured .panel { float: left; margin-right: 20px; width: 220px; } ユーティリティで 対応する - SUIT CSS - https://github.com/suitcss
  77. 77. .u-float-left { float: left; } ! .u-margin-r-m { margin-right: 20px; } ! ...
  78. 78. .u-float-left { float: left; } ! .u-margin-r-m { margin-right: 20px; } ! ... グリッドシステム を活用する - Kite - http://hiloki.github.io/kitecss/
  79. 79. <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>
  80. 80. http://hiloki.github.io/kitecss/
  81. 81. 命名のルール https://www.flickr.com/photos/bfishadow/3634061465
  82. 82. https://bem.info/
  83. 83. https://bem.info/ block block_modifier block__element block__element_modifier
  84. 84. http://article.enja.io/articles/about-html-semantics-and-front-end-architecture.html
  85. 85. component component--modifier component__subcomponent component__subcomponent--modifier http://article.enja.io/articles/about-html-semantics-and-front-end-architecture.html
  86. 86. https://github.com/hiloki/flocss
  87. 87. c-component c-component—modifier c-component__subcomponent c-component__subcomponent—modifier https://github.com/hiloki/flocss
  88. 88. .button { ... } ! .button-raised { ... } ! .button-large { ... }
  89. 89. .button { ... } ! .button—-raised { ... } ! .button—-large { ... }
  90. 90. .panel { ... } ! .panel-heading { ... }
  91. 91. .panel { ... } ! .panel__heading { ... }
  92. 92. https://github.com/bjankord/CSS-Components-Modifiers-And-Subcomponents-Collection
  93. 93. スタイルガイドドリブン開発 http://webuild.envato.com/blog/styleguide-driven-development/ https://www.flickr.com/photos/tveskov/5550625027
  94. 94. http://kaleistyleguide.com/
  95. 95. http://kaleistyleguide.com/ シナリオを 可視化する
  96. 96. 生きたスタイルガイド を持ち込む
  97. 97. https://www.flickr.com/photos/dex1138/7002850433 Code Smells http://article.enja.io/articles/code-smells-in-css.html
  98. 98. スタイルの取り消し
  99. 99. .button { box-sizing: border-box; padding: 12px 26px; text-align: center; } ! .button—-no-padding { スタイルの取り消し padding: 0; }
  100. 100. .button { box-sizing: border-box; padding: 12px 26px; text-align: center; } ! .button—-no-padding { スタイルの取り消し padding: 0; }
  101. 101. .button { box-sizing: border-box; text-align: center; } ! .button—-large { スタイルの取り消し padding: 12px 26px; }
  102. 102. マジックナンバー
  103. 103. マジックナンバー .bubble { position: absolute; top: -57px; left: 0; ... }
  104. 104. マジックナンバー .bubble { position: absolute; top: -57px; left: 0; ... }
  105. 105. マジックナンバー .bubble { position: absolute; bottom: 100%; left: 0; ... }
  106. 106. 受動的な詳細度
  107. 107. #main .button { margin: 20px !important; width: 100% !important; 受動的な詳細度 }
  108. 108. #main .button { margin: 20px !important; width: 100% !important; 受動的な詳細度 }
  109. 109. .u-margin-m { margin: 20px !important; } ! .button--full { 受動的な詳細度 width: 100%; }
  110. 110. 競合する要素に優先順位を ! ピクセルパーフェクト or フレキシブル ! すぐに稼働するコード or 美しいコード 競合する要素に優先順位を ! DRY or 保守性 ! 正しさ or 一貫性 ! 汎用性 or シンプルさ
  111. 111. https://github.com/pocotan001/ptan-no-css
  112. 112. https://github.com/pocotan001/ptan-no-css ! ベースはFLOCSSを採用 ! 例外としてコンポーネントはプリフィックスなし ! ユーティリティのみ略語を許容 ! CSSプリプロセッサーはなし ! Concat, Myth, Autoprefixer, Minify
  113. 113. Designer ♥ Developer http://www.flickr.com/photos/fallentomato/11768159726
  114. 114. “壊れない完璧な設計を求めるのでは なく、壊れたときに勇気を持って修 復できる設計を。 - cssradar
  115. 115. THANK YOU https://www.flickr.com/photos/tveskov/3387394098

×