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

1. なんでCSS すぐ死んでしまうん Frontrend in Kanazawa https://www.flickr.com/photos/tveskov/3387394098

2. @pocotan001 Hayato Mizuno

3. @大阪 http://peatix.com/event/55901

4. BIG CSS https://www.youtube.com/watch?v=R-BX4N8egEc https://www.flickr.com/photos/nickpiggott/5212359135

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. 簡単なシンタックス ≠ 簡単な言語 ! 異なるバージョンとブラウザベンダーへの依存 ! ネームスペースの問題 ! 紳士協定だけでルBIG ールをCSS 制限する難しさ ! … https://www.youtube.com/watch?v=R-BX4N8egEc https://www.flickr.com/photos/nickpiggott/5212359135

7. http://p.twipple.jp/qk9sw

8. http://p.twipple.jp/qk9sw div { background: pink; }

9. 望ましい設計のゴール https://www.flickr.com/photos/nickpiggott/5212959770/in/photostream/

10. メンテナンス 60% 開発 40% http://d.hatena.ne.jp/asakichy/20120420/1334872770

11. メンテナンス 60% 開発 40% 要件変更 60% 移行 23% バグ修正 17% http://d.hatena.ne.jp/asakichy/20120420/1334872770

12. メンテナンス 60% 開発 40% コードを理解する時間 30% http://d.hatena.ne.jp/asakichy/20120420/1334872770

13. 良いCSS設計のゴールメンテナンス 60% 開発 40% コードを理解する時間 30% http://article.enja.io/articles/css-architecture.html http://d.hatena.ne.jp/asakichy/20120420/1334872770 ! 予測しやすい ! 再利用しやすい ! 保守しやすい ! 拡張しやすい

14. http://goo.gl/OnnMm

15. http://goo.gl/OnnMm 設計はルーズなプロセスである ! 問題を解決することで新たな問題を生む ! うまくいくかどうかは試してみないとわからない ! 要件が変われば設計も変わる（かもしれない）

16. メソドロジーとルール https://www.flickr.com/photos/bdesham/2432400623

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. http://styletil.es/

19. http://sparkbox.github.io/style-prototype/

20. http://medialoot.com/item/free-flat-ui-design-kit/

21. http://getbootstrap.com/

22. https://www.polymer-project.org/

23. https://www.flihctktpr.c:/o/cmo/dpehpoetons.io/la/peoncuolfetaann0/50914/f3u1ll/3E2tq2r9c6/

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. <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. https:/h/wttwpsw:/./flwicwkrw.c.opmol/ypmheort-opsr/olajeecnt.uolfrega/nto/o5l9s4/d3e1s3ig2n2e9r6/

27. https://www.flickr.com/photohst/tlape:/n/cuulfesatonm/5e9le4m31e3n2ts2.9io6/

28. http://www.bestpsdfreebies.com/freebie/appz-psd-theme/

29. 再利用可能なチャンクに分離する - OOCSS - https://github.com/stubbornella/oocss/wiki

30. .button { ... } ! .panel { ... }

31. 付加要素は Modifierで拡張する

32. HTML <a class="button">Download</a> CSS .button { ... } !

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. 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. 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. .panel { ... }

37. .panel { ... } ! .panel-colored { ... }

38. .panel { ... } ! .panel-colored { ... } ステートルール - SMACSS - https://smacss.com/book/type-state

39. .panel { ... } ! .panel-colored { ... }

40. .panel { ... } ! /* States */ .is-panel-active { ... }

41. .panel { ... } ! /* States */ .panel.is-active { ... }

42. .panel { ... } ! /* States */ .panel:hover, .panel.is-active { ... }

43. 再利用しないユニークな部分は？

44. プロジェクトレイヤー - MCSS - http://operatino.github.io/MCSS/ja/

45. .tagline { ... }

46. .tagline { ... } ! .tagline .button { ... }

47. プロジェクトレイヤー - FLOCSS - https://github.com/hiloki/flocss

48. .p-tagline { ... } ! .p-tagline .c-button { ... }

49. 関心を分離せよ https://www.flickr.com/photos/clement127/9761836954

50. シナリオを立て汎用さに対応する

51. <a class="button">Download</a>

52. <a class="button">Download</a> ! <button class="button">Download</button>

53. <a class="button">Download</a> ! <button class="button">Download</button> ! <span class="button">Download</span>

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. .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. .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. .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. スタイルとJSのフックを分離する

59. HTML <div class="panel"></div> JS $('.panel').on('click' ...);

60. HTML <div class="panel js-ui-featured"></div> JS $('.js-ui-featured').on('click' ...);

61. AngularJS https://angularjs.org/

62. <div class="panel" ng-click="..."> </div>

63. コンポーネント同士の関係を疎にする

64. .panel { ... } ! .panel .heading { ... }

65. .panel { ... } ! .heading { ... }

66. .panel { ... } ! .heading 関{ 連...す }る要素として捉えるならサブコンポーネントとして定義する

67. .panel { ... } ! .panel-heading { ... }

68. .panel { ... } ! .panel-heading { ... } もしくは命名でどのようなルールが適用されるかを伝える

69. http://getbootstrap.com/

70. http://getbootstrap.com/ Button groups

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. レイアウトを分離する - SMACSS - https://smacss.com/book/type-state

73. .panel { float: left; box-sizing: border-box; margin-right: 20px; padding: 20px; width: 220px; background: #fff; }

74. .panel { float: left; box-sizing: border-box; margin-right: 20px; padding: 20px; width: 220px; background: #fff; }

75. .l-featured .panel { float: left; margin-right: 20px; width: 220px; }

76. .l-featured .panel { float: left; margin-right: 20px; width: 220px; } ユーティリティで対応する - SUIT CSS - https://github.com/suitcss

77. .u-float-left { float: left; } ! .u-margin-r-m { margin-right: 20px; } ! ...

78. .u-float-left { float: left; } ! .u-margin-r-m { margin-right: 20px; } ! ... グリッドシステムを活用する - Kite - http://hiloki.github.io/kitecss/

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. http://hiloki.github.io/kitecss/

81. 命名のルール https://www.flickr.com/photos/bfishadow/3634061465

82. https://bem.info/

83. https://bem.info/ block block_modifier block__element block__element_modifier

84. http://article.enja.io/articles/about-html-semantics-and-front-end-architecture.html

85. component component--modifier component__subcomponent component__subcomponent--modifier http://article.enja.io/articles/about-html-semantics-and-front-end-architecture.html

86. https://github.com/hiloki/flocss

87. c-component c-component—modifier c-component__subcomponent c-component__subcomponent—modifier https://github.com/hiloki/flocss

88. .button { ... } ! .button-raised { ... } ! .button-large { ... }

89. .button { ... } ! .button—-raised { ... } ! .button—-large { ... }

90. .panel { ... } ! .panel-heading { ... }

91. .panel { ... } ! .panel__heading { ... }

92. https://github.com/bjankord/CSS-Components-Modifiers-And-Subcomponents-Collection

93. スタイルガイドドリブン開発 http://webuild.envato.com/blog/styleguide-driven-development/ https://www.flickr.com/photos/tveskov/5550625027

94. http://kaleistyleguide.com/

95. http://kaleistyleguide.com/ シナリオを可視化する

96. 生きたスタイルガイドを持ち込む

97. https://www.flickr.com/photos/dex1138/7002850433 Code Smells http://article.enja.io/articles/code-smells-in-css.html

98. スタイルの取り消し

99. .button { box-sizing: border-box; padding: 12px 26px; text-align: center; } ! .button—-no-padding { スタイルの取り消し padding: 0; }

100. .button { box-sizing: border-box; padding: 12px 26px; text-align: center; } ! .button—-no-padding { スタイルの取り消し padding: 0; }

101. .button { box-sizing: border-box; text-align: center; } ! .button—-large { スタイルの取り消し padding: 12px 26px; }

102. マジックナンバー

103. マジックナンバー .bubble { position: absolute; top: -57px; left: 0; ... }

104. マジックナンバー .bubble { position: absolute; top: -57px; left: 0; ... }

105. マジックナンバー .bubble { position: absolute; bottom: 100%; left: 0; ... }

106. 受動的な詳細度

107. #main .button { margin: 20px !important; width: 100% !important; 受動的な詳細度 }

108. #main .button { margin: 20px !important; width: 100% !important; 受動的な詳細度 }

109. .u-margin-m { margin: 20px !important; } ! .button--full { 受動的な詳細度 width: 100%; }

110. 競合する要素に優先順位を ! ピクセルパーフェクト or フレキシブル ! すぐに稼働するコード or 美しいコード競合する要素に優先順位を ! DRY or 保守性 ! 正しさ or 一貫性 ! 汎用性 or シンプルさ

111. https://github.com/pocotan001/ptan-no-css

112. https://github.com/pocotan001/ptan-no-css ! ベースはFLOCSSを採用 ! 例外としてコンポーネントはプリフィックスなし ! ユーティリティのみ略語を許容 ! CSSプリプロセッサーはなし ! Concat, Myth, Autoprefixer, Minify

113. Designer ♥ Developer http://www.flickr.com/photos/fallentomato/11768159726

114. “壊れない完璧な設計を求めるのではなく、壊れたときに勇気を持って修復できる設計を。 - cssradar

115. THANK YOU https://www.flickr.com/photos/tveskov/3387394098

SlideShare for iOS

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

by Hayato Mizuno , Front-end Developer at CyberAgent, Inc.

on Nov 04, 2014

Statistics

Views

Actions

1 Embed 0

Accessibility

Categories

Upload Details

Usage Rights

Report content

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