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.

使いやすいWordPressのためのCSSのつくりかた

8,708 views

Published on

第45回 WordBench 大阪での発表資料です。
あとがき:http://www.torounit.com/blog/2015/09/15/2088/

Published in: Engineering
  • Be the first to comment

使いやすいWordPressのためのCSSのつくりかた

  1. 1. 使いやすいWordPress のためのCSSのつくりかた 2015.09.12 @WordBench Osaka 2015.09.12 @WordBench Osaka 1
  2. 2. whoami じこしょうかい 2015.09.12 @WordBench Osaka 2
  3. 3. Toro_Unit 占部 紘 (うらべ ひろし) Frontend Engineer / Plugin Developer / Web Designer Github: @torounit Twitter: @Toro_Unit Facebook: fb.me/torounit Blog: http://www.torounit.com 2015.09.12 @WordBench Osaka 3
  4. 4. Profile • 福島県郡山市生まれ。 • 群馬県太田市育ち。 • にじゅうろくさい。 source: https://commons.wikimedia.org/wiki/ File:Gunma- NaganoPrefecturalRoad11202.jpg 2015.09.12 @WordBench Osaka 4
  5. 5. 今日は 2015.09.12 @WordBench Osaka 5
  6. 6. 長野県松本市からはる ばるやってきました。 source: https://commons.wikimedia.org/wiki/ File: 130608MatsumotoCastleMatsumotoNa ganoprefJapan02bs4.jpg 2015.09.12 @WordBench Osaka 6
  7. 7. 2015.09.12 @WordBench Osaka 7
  8. 8. WordBench大阪初参加です!! 初参加は緊張するものです。 2回目以降の参加の方は、自分の知らない人最低2人、話しかけ てみましょう! とのことなので、みなさんよろしくお願いします。 2015.09.12 @WordBench Osaka 8
  9. 9. WordPressとの関わり 2015.09.12 @WordBench Osaka 9
  10. 10. WordCamp Kansai 2015 Speaker その節はお世話になりました。 2015.09.12 @WordBench Osaka 10
  11. 11. WordPress 4.3 Core Contributer 追いつけ追い越せKiteさん。 2015.09.12 @WordBench Osaka 11
  12. 12. Plugin Development • Custom Post Type Permalinks • Simple Post Type Permalinks • Powerful Post Per Page • etc... 2015.09.12 @WordBench Osaka 12
  13. 13. WordCamp Tokyoでは CIの話をする予定。(仮) 2015.09.12 @WordBench Osaka 13
  14. 14. ですが 2015.09.12 @WordBench Osaka 14
  15. 15. 今年のWordBench大阪 はテーマの年らしい。 2015.09.12 @WordBench Osaka 15
  16. 16. というわけで 2015.09.12 @WordBench Osaka 16
  17. 17. 全力でCSSの話をします!!! 2015.09.12 @WordBench Osaka 17
  18. 18. Today's Agenda. 1. Editor Styleの話 2. CSSの設計について 2015.09.12 @WordBench Osaka 18
  19. 19. §1.Editor Styleの話 2015.09.12 @WordBench Osaka 19
  20. 20. WordPressでブログを 書いてる人! 2015.09.12 @WordBench Osaka 20
  21. 21. テキストエディタでHTMLとか書いて る人!挙手! 2015.09.12 @WordBench Osaka 21
  22. 22. もったいない!!! 2015.09.12 @WordBench Osaka 22
  23. 23. もったいない!!! • 最近のWordPressのビジュアルエディタへの力の入れ方が尋 常じゃない。 • Markdownライクな書き方が出来るようになって、かなり書 きやすくなった。 • HTMLとかCSS大好きですけど、正直書かなくて済むなら書 きたくない。 2015.09.12 @WordBench Osaka 23
  24. 24. そんなあなたたちにおくります。 2015.09.12 @WordBench Osaka 24
  25. 25. Do you know Editor Style? おまえはエディタースタイルを知っているか 2015.09.12 @WordBench Osaka 25
  26. 26. Editor Style とは。 WordPressのビジュアルエディタに適用されるCSSのこと。 <?php add_editor_style('./editor-style.css'); ?> 2015.09.12 @WordBench Osaka 26
  27. 27. これを使うと 2015.09.12 @WordBench Osaka 27
  28. 28. 2015.09.12 @WordBench Osaka 28
  29. 29. これが 2015.09.12 @WordBench Osaka 29
  30. 30. 2015.09.12 @WordBench Osaka 30
  31. 31. こうなる 2015.09.12 @WordBench Osaka 31
  32. 32. これは作るしかない! (デフォルトテーマにも入ってる!) 2015.09.12 @WordBench Osaka 32
  33. 33. But... 2015.09.12 @WordBench Osaka 33
  34. 34. めんどくさい。 2015.09.12 @WordBench Osaka 34
  35. 35. めんどくさい。 • ビジュアルエディタとテーマのHTML構造の違う。 • デザイン変更のたびにeditor-styleも確認する必要。。 • 二重管理だるい。 2015.09.12 @WordBench Osaka 35
  36. 36. どうすれば。。。 2015.09.12 @WordBench Osaka 36
  37. 37. じゃぁ、テーマで使っているCSSをそ のまま Editor Style にできれば・・・ 2015.09.12 @WordBench Osaka 37
  38. 38. add_editor_style('./style.css'); 2015.09.12 @WordBench Osaka 38
  39. 39. But... 2015.09.12 @WordBench Osaka 39
  40. 40. ビジュアルエディタとテーマでは HTML構造が違う。 2015.09.12 @WordBench Osaka 40
  41. 41. ビジュアルエディタのHTML <html> <body> 本文 </body> </html> 2015.09.12 @WordBench Osaka 41
  42. 42. テーマのHTML <html> <body> <header> </header> <main> <article> <h1>タイトル</h1> 本文 </article> </main> </body> </html> 2015.09.12 @WordBench Osaka 42
  43. 43. じゃぁどうしよう? 2015.09.12 @WordBench Osaka 43
  44. 44. the_contentで挿入される本文から CSSを作る。 2015.09.12 @WordBench Osaka 44
  45. 45. ブログ本文からCSSを作ると。 • ブログ本文からCSSを作ると、本文欄からクラスや、div等を ある程度減らせる。 • 見出しとかリストとかにいちいちClassを付けたりするとか が発生しない! 2015.09.12 @WordBench Osaka 45
  46. 46. 具体的な方法 2015.09.12 @WordBench Osaka 46
  47. 47. 1.HTML要素へのCSSを、本文のもの にする。 2015.09.12 @WordBench Osaka 47
  48. 48. とりあえずこんな順番でCSSを書いてると思うんです。 1. Reset.css / Normalize 2. HTML要素へのCSS (h1,h2,h3,a,table,ul,li, etc...) 3. クラスとかIDとか (.alignleft,.alignright,.media-object,etc...) 2015.09.12 @WordBench Osaka 48
  49. 49. とりあえずこんな順番でCSSを書いてると思うんです。 1. Reset.css / Normalize 2. HTML要素へのCSS (h1,h2,h3,a,table,ul,li, etc...) 3. クラスとかIDとか (.alignleft,.alignright,.media-object,etc...) 本文欄のデザインをタイプセレクタに適用する! 2015.09.12 @WordBench Osaka 49
  50. 50. 本文(the_contentの中身)のCSS = サイトのデフォルトのスタイルとして 設計する! 2015.09.12 @WordBench Osaka 50
  51. 51. めんどくさい? 2015.09.12 @WordBench Osaka 51
  52. 52. そうでもない。 2015.09.12 @WordBench Osaka 52
  53. 53. • テーマ側のHTMLには大抵Classとか当ててCSSを書いてる。 そのClassでやれば済む話。 • 最初のタイプセレクタへのCSSをちゃんとサイトのデフォル トのデザインにしようぜ!ということ。Classで上書きしてた らあんまり意味が無い。全ての箇所で上書きするようなCSS とか要らなく無い? • WYSIWYGエディタを持つCMSであれば、WYSIWYGを使い 倒せるようにCSSを設計するべき。 2015.09.12 @WordBench Osaka 53
  54. 54. それでも面倒? 2015.09.12 @WordBench Osaka 54
  55. 55. そうか・・・じゃぁ 2015.09.12 @WordBench Osaka 55
  56. 56. Sass等で解決。 2015.09.12 @WordBench Osaka 56
  57. 57. こんなmixin作っておけば便利かも。 @mixin box-reset() { display: block; margin: 0; padding: 0; border: none; color: inherit; &::before, &::after { content: normal; } } 2015.09.12 @WordBench Osaka 57
  58. 58. とりあえず、見出し周りをちゃんとや れば何とかなること多い。 2015.09.12 @WordBench Osaka 58
  59. 59. 2.body_class, post_classを使った CSSは避ける 2015.09.12 @WordBench Osaka 59
  60. 60. • ビジュアルエディターには存在しないクラスを出力する。こ れらを使うと、編集画面と本番で表示が異なる事態が発生し がち。 • これに依存すると、同じHTMLを書いたのに挙動がページご とに変わるというCSSが大量生産される。つらい。 2015.09.12 @WordBench Osaka 60
  61. 61. ページごとにCSSを作るという発想を 止めて、モジュールを組み合わせてペ ージを作るという発想に転換しよう。 2015.09.12 @WordBench Osaka 61
  62. 62. 3.その他の細かいノウハウ 2015.09.12 @WordBench Osaka 62
  63. 63. • トップページや複雑なページから作るとだいたいやらかす。 テーマユニットテストを活用しよう。その後にシンプルな文 章だけのページなどから作ってテストをしていくと良い。プ ライバシーポリシーとか、法律上の表記とか。 • 見出し周りは複雑になりがち。サイドバー・タイトルなど、 ハードコーディングするものは、基本的にh1を使ってクラス を当てるようにするといいかも。生のh1を使うケースは意外 に少ないし、ビジュアルエディタ内では基本使わない。 2015.09.12 @WordBench Osaka 63
  64. 64. • モジュールの組み合わせで作ると、「TinyMCE Template等 で、特定のパーツを挿入できるようにする」などの拡張も行 いやすい。 • CSSをしっかり設計すると当然、管理画面からの更新もやり やすくなるよ! • ブログ書くのがめんどくさくなくなるかも。。。? 2015.09.12 @WordBench Osaka 64
  65. 65. 第一部 完 第二部につづく。 2015.09.12 @WordBench Osaka 65
  66. 66. §2.CSSの設計について 2015.09.12 @WordBench Osaka 66
  67. 67. 初めに言っておきますが・・・ 2015.09.12 @WordBench Osaka 67
  68. 68. 「Web制作者のためのCSS設 計の教科書」(メロン本)にだ いたい全部書いてあります! みんな読もう! 2015.09.12 @WordBench Osaka 68
  69. 69. 突然ですが 2015.09.12 @WordBench Osaka 69
  70. 70. CSSって簡単?難しい? 2015.09.12 @WordBench Osaka 70
  71. 71. その1 2015.09.12 @WordBench Osaka 71
  72. 72. CSSって簡単! たとえばこんなHTML <h1 class="title">サイトのタイトル</h1> <main id="main-contents"> <h1 class="title">ブログのタイトル</h1> <article class="post"> <header class="headline"> <h1 class="title">記事のタイトル</h1> </header> </article> </main> 2015.09.12 @WordBench Osaka 72
  73. 73. CSSって簡単! .title { color: red; } 2015.09.12 @WordBench Osaka 73
  74. 74. CSSって簡単! .title { color: red; } .post .title { color: orange; } 2015.09.12 @WordBench Osaka 74
  75. 75. CSSって簡単????? .title { color: red; } #main-contents .title { color: green; } .post .title { color: orange; /*上書きされる。。。*/ } 2015.09.12 @WordBench Osaka 75
  76. 76. CSSって簡単???????????????? .title {} #main-contents .title {} .post .title {} h1.title {} main#main-contents article .title {} main#main-contents .headline h1 {} main article header h1.title {} main#main-contents .post:first-child h1 {} 2015.09.12 @WordBench Osaka 76
  77. 77. CHAOSの予感!!! 2015.09.12 @WordBench Osaka 77
  78. 78. その2 2015.09.12 @WordBench Osaka 78
  79. 79. CSSって簡単! .title { border-left: 10px solid #CCC; font-size: 2em; } 2015.09.12 @WordBench Osaka 79
  80. 80. CSSって簡単!?? .title { border-left: 10px solid #CCC; padding: 0 0 0 5px; font-size: 2em; } .sidebar .title { background-color: #333; color: #FFF; padding: 0; border: 0; } 2015.09.12 @WordBench Osaka 80
  81. 81. CSSって簡単!?????????? .title { border-left: 10px solid #CCC; padding: 0 0 0 5px; font-size: 2em; } .title::before { content: "§"; } .sidebar .title { background-color: #333; color: #FFF; padding: 0; border: 0; } .title::before { display:none; } 2015.09.12 @WordBench Osaka 81
  82. 82. スパゲッティな予感!!! 2015.09.12 @WordBench Osaka 82
  83. 83. CSSは簡単に書けるけ ど、ちゃんとしたCSSっ て難しい。 2015.09.12 @WordBench Osaka 83
  84. 84. ちゃんとしたCSSって? 2015.09.12 @WordBench Osaka 84
  85. 85. ちゃんとしたCSSって? CSS Architecture — Philip Walton • 原文:http://philipwalton.com/articles/css-architecture/ • 日本語訳:http://article.enja.io/articles/css-architecture.html 2015.09.12 @WordBench Osaka 85
  86. 86. 良いCSSとは? • 予測しやすい • 再利用しやすい • 保守しやすい • 拡張しやすい 2015.09.12 @WordBench Osaka 86
  87. 87. というわけで 2015.09.12 @WordBench Osaka 87
  88. 88. ちゃんとCSSも設計しよう 「とりあえずデザインが実現できればOK」は卒業しよう。 2015.09.12 @WordBench Osaka 88
  89. 89. どうやるの? 2015.09.12 @WordBench Osaka 89
  90. 90. 1.マークアップに依存しない 2015.09.12 @WordBench Osaka 90
  91. 91. たとえばこんなHTML <article> <h1>タイトル</h1> <p>本文</p> </article> 2015.09.12 @WordBench Osaka 91
  92. 92. たとえばこんなCSS article { border: 1px solid #666; padding: 16px; } article h1 { margin: 0 0 0.5em; font-size: 1.7em; } 2015.09.12 @WordBench Osaka 92
  93. 93. HTMLが変更になった! <div> <h2>タイトル</h2> <p>本文</p> </div> CSSが効かない!! 2015.09.12 @WordBench Osaka 93
  94. 94. こうしよう。 2015.09.12 @WordBench Osaka 94
  95. 95. HTML <article class="post"> <h1 class="post-title">タイトル</h1> <p>本文</p> </article> CSS .post { } .post-title { } 2015.09.12 @WordBench Osaka 95
  96. 96. 文書構造とCSSをしっか り分離する。 2015.09.12 @WordBench Osaka 96
  97. 97. 2.コンポーネント志向な CSSを作る。 2015.09.12 @WordBench Osaka 97
  98. 98. さっきの例ですが、こうでも良さそうですよね。 .post { } .post .title { } 2015.09.12 @WordBench Osaka 98
  99. 99. でも。 2015.09.12 @WordBench Osaka 99
  100. 100. .widget { hoge: piyo; } .widget .title { hoge: piyo; } 2015.09.12 @WordBench Osaka 100
  101. 101. <div class="widget"> <h1 class="title">最近のエントリー</h1> <article class="post"> <h1 class="title">タイトル</h1> </article> </div> Conflict! 2015.09.12 @WordBench Osaka 101
  102. 102. クラス名 ≒ グローバル変数 2015.09.12 @WordBench Osaka 102
  103. 103. .widget { } .widget-title { } .post { } .post-title { } No conflict!!! 2015.09.12 @WordBench Osaka 103
  104. 104. 3.親セレクタに依存しない 2015.09.12 @WordBench Osaka 104
  105. 105. .main-contents { float: left; } .home .main-contents { float: none; } 一見良さそうだけど。 2015.09.12 @WordBench Osaka 105
  106. 106. .main-contents { float: left; display: block; } .home .main-contents, .page .main-contents { float: none; } .blog .main-contents, .single .main-contents { float: right; } 2015.09.12 @WordBench Osaka 106
  107. 107. .main-contents { float: left; display: block; } .home .main-contents, .page .main-contents { float: none; } .blog .main-contents, .single .main-contents, .date .main-contents, .archive .main-contents { float: right; } 2015.09.12 @WordBench Osaka 107
  108. 108. 同じクラスがHTMLの書き方で次第で 全く別の挙動をする! とても解りづらい!! 混乱する! バグの原因になりやすい。 HTMLの祖先要素とか何個あると思ってんの? 2015.09.12 @WordBench Osaka 108
  109. 109. こうしよう 2015.09.12 @WordBench Osaka 109
  110. 110. .main-contents { float: left; } .main-contents--single-column { float: none; } HTMLのコンテキストを考えなくて済む。 2015.09.12 @WordBench Osaka 110
  111. 111. モジュールのことはモジュールに解決 させよう。 2015.09.12 @WordBench Osaka 111
  112. 112. ここら辺の話を体系化したものが 所謂CSSアーキテクチャー と呼ばれているもの。 2015.09.12 @WordBench Osaka 112
  113. 113. CSSアーキテクチャー 2015.09.12 @WordBench Osaka 113
  114. 114. 1.OOCSS すべてはここからはじまった 2015.09.12 @WordBench Osaka 114
  115. 115. OOCSS 元Yahoo!の Nicole Sullivan氏 (@stubbornella)が提唱したCSSの設計原 則。 https://github.com/stubbornella/ oocss/wiki 2015.09.12 @WordBench Osaka 115
  116. 116. OOCSSの2大原則 1. 構造と見た目を分離。 2. コンテナとコンテンツの分離。 2015.09.12 @WordBench Osaka 116
  117. 117. 構造と見た目の分離 2015.09.12 @WordBench Osaka 117
  118. 118. .submit-btn { display: inline-block; padding: 10px; color: #FFF; background: #66C; } .link-btn { display: inline-block; padding: 10px; color: #333; background: #C90; } 2015.09.12 @WordBench Osaka 118
  119. 119. 構造と見た目の分離すると・・・ 2015.09.12 @WordBench Osaka 119
  120. 120. /*ボタンの構造*/ .btn { display: inline-block; padding: 10px; } /*ボタンの見た目*/ .btn-submit { color: #FFF; background: #66C; } .btn-link { color: #333; background: #C90; } 2015.09.12 @WordBench Osaka 120
  121. 121. 構造と見た目の分離するメリット 1.コードの重複が避けられる。保守性が上がる。 2.拡張がとても用意になる。 2015.09.12 @WordBench Osaka 121
  122. 122. コンテナとコンテンツの分離 <aside class="sidebar"> <div> <img class="avatar" /> </div> </aside> .sidebar .avatar { width: 200px; border: 5px solid #FFF; box-shadow: 0 2px 3px #000; } 2015.09.12 @WordBench Osaka 122
  123. 123. コンテナとコンテンツの分離すると。 2015.09.12 @WordBench Osaka 123
  124. 124. <aside class="sidebar"> <div class="sidebar-widget"> <img class="avatar" /> </div> </aside> .sidebar-widget { /** コンテナ **/ width: 200px; } .avatar { /** コンテンツ **/ width: 100%; border: 5px solid #FFF; box-shadow: 0 2px 3px #000; } 2015.09.12 @WordBench Osaka 124
  125. 125. コンテナとコンテンツの分離するメリット 1.場所、コンテキストに依存しないコードが増える。 2.再利用しやすい! 2015.09.12 @WordBench Osaka 125
  126. 126. 再利用の例 2015.09.12 @WordBench Osaka 126
  127. 127. <article class="comment"> <div class="comment-user"> <img class="avatar" /> </div> </article> .comment-user { position: absolute; width: 100px; } .avatar { width: 100%; border: 5px solid #FFF; box-shadow: 0 2px 3px #000; } 2015.09.12 @WordBench Osaka 127
  128. 128. OOCSSの例 • Bootstrap • Foundation 2015.09.12 @WordBench Osaka 128
  129. 129. 2.SMACSS 元Yahoo!の Jonathan Snook氏 (@snookca)によって提唱されたCSSの設 計方針。 https://smacss.com/ 2015.09.12 @WordBench Osaka 129
  130. 130. SMACSSの基本 CSSを5種類に分類。 • Base • Layout • Module • State • Theme 2015.09.12 @WordBench Osaka 130
  131. 131. Base プロジェクトのデフォルトのCSS定義する。class等は使わず HTML要素に対してCSSを定義する。 例 • Reset / Normalize • タイプセレクタへのスタイル。プロジェクトのデフォルトの デザイン。 2015.09.12 @WordBench Osaka 131
  132. 132. Layout 2015.09.12 @WordBench Osaka 132
  133. 133. Layout サイトのレイアウトを定義するCSS群。クラスには、.l-main等 のプリフィックスをつける。 例 • メインカラム/サイドバー • ヘッダー・フッター 2015.09.12 @WordBench Osaka 133
  134. 134. Module 2015.09.12 @WordBench Osaka 134
  135. 135. Module ページ内を構成するコンポーネント群。レイアウト以外は基本 的に全てここに属する。SMACSSでCSSを書くと基本的には Moduleが大量に作られる。 • ボタン • メディアオブジェクト • その他もろもろ 2015.09.12 @WordBench Osaka 135
  136. 136. Moduleの命名規約 モジュールに属するスタイルの命名は、.{モジュール名}-{スタイ ル名}とする。 .widget { } .widget-title { } .widget-body { } 2015.09.12 @WordBench Osaka 136
  137. 137. State 2015.09.12 @WordBench Osaka 137
  138. 138. State .is-active等のJavaScript変更されたりするような、状態を表す CSS。他のCSSを上書きできるように設計する必要がある。 .navigation-item { } .navigation-item.is-active { } 2015.09.12 @WordBench Osaka 138
  139. 139. Theme 2015.09.12 @WordBench Osaka 139
  140. 140. Theme 名前の通り、テーマを切り替えたりするときに使う。ブログサ ービスなどでCSSを切り替えるとか。 • ぶっちゃけあまり使ったことが無い。 • オルタネイトスタイルシートなど。 • 他には、多言語対応でフォントや文字方向を使ったり。。。 むしろ良い使い方教えて下さい。 2015.09.12 @WordBench Osaka 140
  141. 141. SMACSSの採用例 • Pure: Yahoo!が作ったCSSフレームワーク http://purecss.io/ • 昔の web-starter-kit 2015.09.12 @WordBench Osaka 141
  142. 142. 3.BEM(MindBEMding) 2015.09.12 @WordBench Osaka 142
  143. 143. BEM ロシアのYandexが作った、CSSのセレクタの命名規約、設計方 針。 CSSを Block, Element, Modifierの3つに分類して考える。 MindBEMding – getting your head ’round BEM syntax http://csswizardry.com/2013/01/mindbemding-getting-your- head-round-bem-syntax/ 2015.09.12 @WordBench Osaka 143
  144. 144. Block 所謂、SMACSSで言うところのModule。HTMLを構成するコン ポーネントの単位。 .block { } 2015.09.12 @WordBench Osaka 144
  145. 145. Element Blockの子要素。 .block__element { } 2015.09.12 @WordBench Osaka 145
  146. 146. Modifier BlockやElementの拡張。 .block--modifier { } .block__element--modifier { } 2015.09.12 @WordBench Osaka 146
  147. 147. BEMの例 .post { /* Block */ } .post__title { /* Element */ } .post--sticky { /* Modifier */ } .post__title--new { } 2015.09.12 @WordBench Osaka 147
  148. 148. __とか--がきもちわる い。 2015.09.12 @WordBench Osaka 148
  149. 149. • プロジェクトの中で一貫性がとれていれば、なんでも良い。 • ただWordPressはハイフン区切りの命名が多いので、そのま ま使うのが無難。そのまま使うとBEMなフレームワークとか も扱いやすい。 • 気持ち悪い分わかりやすい。 2015.09.12 @WordBench Osaka 149
  150. 150. • EmmetだとBEMモードがある。それだと、 Block__Element_Modifierになってる。 EmmetのBEMフィルターでBEMるときのHTMLをサクッと書 く | clear sky source: http://maboroshi.biz/clearskysource/?p=926 2015.09.12 @WordBench Osaka 150
  151. 151. BEMのメリット • とにかくわかりやすい。SMACSSと違い、elementと modifierの区別が明確。 • 特徴的な命名なので、HTML側で間違ったClassの使い方など を発見しやすい。 参考:BEMという命名規則とSass 3.3の新しい記法 - アインシュ タインの電話番号 http://blog.ruedap.com/2013/10/29/block-element-modifier 2015.09.12 @WordBench Osaka 151
  152. 152. BEMの例 • Material Design Lite • Comico http://www.comico.jp/ • NBA.COMの各チームのスケジュール。http://www.nba.com/ spurs/schedule 2015.09.12 @WordBench Osaka 152
  153. 153. 注意事項 • block__elem1__elem2 とかやらない。マークアップへの依存 を深めることになるので、block__elem1, block__elem2とか にする。 • もしくは別のBlockに分割する。 2015.09.12 @WordBench Osaka 153
  154. 154. 応用編 2015.09.12 @WordBench Osaka 154
  155. 155. FLOCSS 2015.09.12 @WordBench Osaka 155
  156. 156. FLOCSS 日本でCSSと言えばこの人!なサイバー エージェントの谷 拓樹氏(@hiloki)に よるCSSの構成案. ドキュメント(日本語): https://github.com/hiloki/flocss 2015.09.12 @WordBench Osaka 156
  157. 157. FLOCSSのCSSのカテゴリー • Foundation • Layout • Object • Component • Project • Utility 2015.09.12 @WordBench Osaka 157
  158. 158. FLOCSSのCSSの原則 他のモジュールへのカスケーディングは原則禁止 .c-card > .c-media__title { /* NG!!!!!! */ } SMACSS等でもこれをやり出すとモジュール同士が密結合にな ってCSSが腐海化するので避けるべき。 2015.09.12 @WordBench Osaka 158
  159. 159. Foundation • Normalize.css / Reset.css • プロジェクトのデフォルトスタイル. • 要はSMACSSで言うところのBase. Layout • ヘッダー・フッター・メインカラム・サイドバー等 2015.09.12 @WordBench Osaka 159
  160. 160. Object 2015.09.12 @WordBench Osaka 160
  161. 161. Component • 再利用出来るパターン。Bootstrap等で出てくるコンポーネン トなど。 • Media Object / Button / Card / etc.. • 抽象化されたモジュール群。 2015.09.12 @WordBench Osaka 161
  162. 162. Project • プロジェクト固有のパターン。具体的なモジュール群。 • Projectから、Componentへのカスケーディングは許可 • それでもやっぱりセレクタの詳細度が上がるので、モディフ ァイアで事足りるならそちらでやる方が無難なケースが多い かも。 .p-book > .c-media__title { /* OK */ } 2015.09.12 @WordBench Osaka 162
  163. 163. Utility • いわゆる、ヘルパークラス、便利クラス。 • show・hide / 文字サイズとか。 • WordPressの.alignleftとかはここに所属。 • 同じようなモディファイアが大量生産されるときは、ここに 突っ込むと良いかもしれない。 2015.09.12 @WordBench Osaka 163
  164. 164. 事例 • http://torounit.com Repository: https://github.com/torounit/torounit2015 2015.09.12 @WordBench Osaka 164
  165. 165. 補足 • ざっくり言うと、SMACSS + MCSS(Multilayer CSS). • 内容がかぶるので紹介しませんが、日本語ドキュメントもあ るので、一見の価値あり。http://operatino.github.io/MCSS/ ja/ 2015.09.12 @WordBench Osaka 165
  166. 166. ITCSS 2015.09.12 @WordBench Osaka 166
  167. 167. ITCSS CSS界のアイドル、CSS Wizardryこと、 Harry Roberts(@csswizardry)氏による CSS設計案。 • 情報すくなめ。日本語情報あんまり ない。たぶん谷さんのスライドくら い。ただし、元のスライドが素晴ら しいし、図も多めなので全然読め る。 スライド:https://speakerdeck.com/ dafed/managing-css-projects-with-itcss 2015.09.12 @WordBench Osaka 167
  168. 168. カオスなCSS 引用元: https://speakerdeck.com/dafed/ managing-css-projects-with-itcss 2015.09.12 @WordBench Osaka 168
  169. 169. 2015.09.12 @WordBench Osaka 169
  170. 170. おまえのセレクタで地球がやばい 2015.09.12 @WordBench Osaka 170
  171. 171. こうしよう! 2015.09.12 @WordBench Osaka 171
  172. 172. 2015.09.12 @WordBench Osaka 172
  173. 173. 2015.09.12 @WordBench Osaka 173
  174. 174. ITCSSのレイヤー 2015.09.12 @WordBench Osaka 174
  175. 175. Setting: グローバルな変数 Tools: Mixin、Function Generic: Normalize、Reset Base: デフォルトのスタイル。要素セレクタ。 Objects: 装飾のないパターン。FLOCSSでいうComponent. Components: FLOCSSでいうところのProject. プロジェクト固 有のコンポーネントパターン。 Trumps: ユーティリティクラス。便利クラス。 2015.09.12 @WordBench Osaka 175
  176. 176. 事例 http://csswizardry.com/ • https://github.com/csswizardry/csswizardry.github.com 2015.09.12 @WordBench Osaka 176
  177. 177. 公式サイト・ドキュメント 2015.09.12 @WordBench Osaka 177
  178. 178. 2015.09.12 @WordBench Osaka 178
  179. 179. スライドを読もう。 サイトは1ページしか無いけど、スライドはかなり詳細なのでわ かりやすい。英語だけだけど結構わかりやすい。 https://speakerdeck.com/dafed/managing-css-projects-with- itcss 2015.09.12 @WordBench Osaka 179
  180. 180. フレームワーク 2015.09.12 @WordBench Osaka 180
  181. 181. inuit.css 2015.09.12 @WordBench Osaka 181
  182. 182. 2015.09.12 @WordBench Osaka 182
  183. 183. 一応レポジトリはある。 割とコミットされてる。 2015.09.12 @WordBench Osaka 183
  184. 184. 2015.09.12 @WordBench Osaka 184
  185. 185. Others • MCSS (http://operatino.github.io/MCSS/ja/) • SUIT CSS (https://suitcss.github.io/) • AMCSS (https://amcss.github.io/) 2015.09.12 @WordBench Osaka 185
  186. 186. これらをちゃんと運用するために。 2015.09.12 @WordBench Osaka 186
  187. 187. • CSSは文法がゆるふわなので、強い自制心が必要!!! • CSSはすぐ壊れる。常にリファクタリングしながら進める。 • 後でやろうとするとだいたいスパゲッティなCSSになってて 手遅れになる。 • 使わなくなったらいつでも削除出来るような設計が大事。 • 初動が肝心。 2015.09.12 @WordBench Osaka 187
  188. 188. • 巨大なモジュールを作ると大抵使い回しが辛い。スクロール しないで読めるようなモジュールが一番使い勝手が良かった りする。1つのモジュールの仕事なのかをよく考えること。 • 疎結合大事。モノリシックなCSSを管理できるほど人間は賢 くない。 • 著名なCSSフレームワークはやっぱり参考に出来ることが多 い。 2015.09.12 @WordBench Osaka 188
  189. 189. • 基本的にはOOCSSからの派生物。とりあえず、OOCSSの考 え方は身体にたたき込む。 • ドキュメントの整備は重要。それが面倒ならFLOCSSを使う のが無難。 2015.09.12 @WordBench Osaka 189
  190. 190. • IDセレクタは滅ぼそう。IDにはページ内リンクのアンカーと いう仕事もある。一つのセレクタにいろんな仕事を持たせる とリファクタリングが大変。 • Sass等を使うと、"&"を使うことでだいぶ書きやすくなる。 • モジュールごとにファイルを分割しないと訳がわからなくな るので、とりあえずSass使おう。 2015.09.12 @WordBench Osaka 190
  191. 191. 強い心・クソコードへの憎しみ・CSSへの愛が大事 2015.09.12 @WordBench Osaka 191
  192. 192. CSSの設計はまだ発展途上。 柔軟な頭で考えよう。 ドキュメントは大事。せめてコメントに命名規約とか採用する設計を記述しておくのが良いかと。 2015.09.12 @WordBench Osaka 192
  193. 193. とりあえず 2015.09.12 @WordBench Osaka 193
  194. 194. おまえらCSSもちゃんと設計しろ!!! 2015.09.12 @WordBench Osaka 194
  195. 195. 余談 2015.09.12 @WordBench Osaka 195
  196. 196. • 個人的にはITCSS押し。inuit.cssが小さな単位で独立したレポ ジトリになっていてnpmで取ってこれるのは楽。 • AMCSSは良いと思うけどセレクタが書きづらい。ここら辺を 解消できるツールがあれば。 2015.09.12 @WordBench Osaka 196
  197. 197. • 「Every Declaration Just Once」とかいう話もあるけど、 CMSのように最初にCSSを用意してHTMLを追加していくも のにはつらいと思う。 • CMSは基本的に、ページが容量の許す限り増やせる。なので プロジェクトごとにCSSフレームワークを作るくらいの気持 ちでやった方が良い。 • 静的サイトと同じようなデザイン要件だとCMSでやるメリッ トが薄まるのでそこら辺のコントロールも大切。 2015.09.12 @WordBench Osaka 197
  198. 198. • WebComponentsの夢は忘れよう。(Scoped Styleとか) • でもモジュラーなHTML/CSSというのはこれからもっと必要 な考え方。(ex. React.js) • プリプロセッサは悩むならSCSS使えば良いと思う。ツールも 情報も採用例も多い。 2015.09.12 @WordBench Osaka 198
  199. 199. 参考資料 • 谷拓樹氏のスライド全般。http://www.slideshare.net/hiloki/ • 昨今のCSS設計事情からみるCSS設計のあり方とは | HTML5Experts.jp https://html5experts.jp/hiloki/14372/ • IDを使わないCSSの設計|Web Design KOJIKA17 http://kojika17.com/2013/09/dont-use-ids.html 2015.09.12 @WordBench Osaka 199
  200. 200. 参考資料 • CSS 設計の長い夢 - ペパボのフロントエンドスタンダード http://pepabo.github.io/docs/frontend/standard/css- architecture/ • なんでCSSすぐ死んでしまうん http://www.slideshare.net/ hayatomizuno/css-41084761 2015.09.12 @WordBench Osaka 200
  201. 201. おわり。 2015.09.12 @WordBench Osaka 201

×