悩まないコーディングをしよう！ OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計（Sass対応）
•
211 likes•61,299 views
CSS設計に関わるあれこれ。 基本〜実践的な内容です。 OOCSS, BEM, SMACSSとかも出てきます。
悩まないコーディングをしよう！ OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計（Sass対応）
- 1. Architecture for CSS 悩まないコーディングをしよう！ OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計
- 2. ホリグチ セイト 自己紹介 Front-End-Engineer 担当している業務 html,css,jsを用いいた中規模メディアサイト, Webアプリケーションの開発 趣味 Lang-8（先週から）、漫画（いろいろ）、 宇宙とかSFとか 経歴 2001 ! 2014 2014 初めてWebサイトを作る。当時最もモダンな「メモ帳」なるエディターを使い、 また「おえかき掲示板」「キリ番システム」などのリッチコンテンツを提供した。 デザイナーからフロントエンドエンジニアに転身。 カルタ大会やハッカソンなど、業務外の事で活躍し始める。
- 3. アジェンダ はじめに CSS設計の3大メソッド OOCSS BEM SMACSS 設計で必要な3つのこと 設計指針 ディレクトリ構成 スタイルガイド 業務で実践してみてわかった7つのこと まとめ
- 5. CSS設計とは ! CSSをより体系立て、より構造化させることで、 制作とメンテナンスをより容易に行うこと ※引用1 『SMACSS: Scalable and Modular Architecture for CSS』
- 9. CSS設計の3大メソッド
- 10. OOCSS BEM SMACSS
- 11. OOCSS
- 12. オブジェクト指向に基づいて考案された設計手法。 米Yahoo!のNicole Sullivan氏によって考案された。 ! OOCSSで設計されている代表的なサイト ! ! OOCSSとは
- 18. 要素をContainerとContentsに切り離して考える .text .input .heading .btn
- 21. 要素をContainerとContentsに切り離して考える .registration > button{ … } というような、依存したスタイルの充て方ではなく、 .btn{ … }というように独立させてスタイルを充てると、色々なところで使い回せる
- 22. ストラクチャーとスキンを切り離そう (color) skin (display,text-align,…etc) structure (width,height)
- 23. structure skin
- 24. structure skin .btn{ display: inline-‐block; border-‐radius: 5px; text-‐align: center; } .btn-‐green{ background: green; } .btn-‐black{ background: black; } .btn-‐pink{ background: pink; } .btn-‐blue{ background: blue; }
- 25. structure skin .btn{ display: inline-‐block; border-‐radius: 5px; text-‐align: center; } .btn-‐large{ width: 300px; height: 50px; } .btn-‐medium{ width: 200px; height: 40px; } .btn-‐small{ width: 100px; height: 30px; }
- 26. structure + skin = <button class="btn btn-‐pink btn-‐medium">button</button>
- 27. structure + skin = <button class="btn btn-‐black btn-‐large">button</button>
- 28. structure + skin = <button class="btn btn-‐green btn-‐small">button</button>
- 29. BEM
- 30. html構造を明確にすることに軸を置いた設計方法。厳格な命名規則が特徴。 ロシアのYandex社によって考案された。 ! BEMで設計されている代表的なサイト ! ! BEMとは
- 31. 大きな特徴は以下の2つ 要素を Block, Element, Modifierの3つに分ける .Block__Element_Modifierという命名ルールを用いる
- 33. Block, Element, Modifier Block
- 34. Block, Element, Modifier .registration
- 35. Block, Element, Modifier Element
- 36. Block, Element, Modifier .registraion__heading .registraion__text .registraion__input .registraion__btn
- 37. Block, Element, Modifier Modifier
- 38. Block, Element, Modifier .registraion__btn_color_bule
- 39. MindBEMding BEMのエッセンスをとり入れつつ、命名ルールは 自分たちでカスタマイズするのもあり CSS Wizardly Harry Roberts氏 http://csswizardry.com/2013/01/mindbemding-getting-your-head -round-bem-syntax/
- 40. SMACSS
- 41. SMACSSとは OOCSS,BEMの流れを汲みつつ、著者の経験や理論も交えてドキュメントに落とし 込まれたスタイルガイド（コーディングルール）。 Jonathan Snook氏によって考案された。
- 43. Base Layout Module State Theme
- 44. Base Layout Module State Theme ! reset.css helper.css …etc
- 45. Base Layout Module State Theme
- 46. Base Layout Module State Theme
- 47. Base Layout Module State Theme .tab .is-current
- 48. Base Layout Module State Theme
- 49. その他にもいろいろ マルチクラス推奨 ざっくりした命名規則 Sassでの実装方法 などなど
- 50. 設計で必要な3つのこと
- 52. 設計指針
- 53. 設計指針 コーディングを行う際に守るべき約束事。 方針。 コーディング中に迷いが生じたら、これを 元に判断・解決する
- 54. 設計指針 例 SMACSSの場合 HTMLとコンテントのセマンティックな価値を向上すること 特定のHTML構造への依存を低減すること ※引用1 『SMACSS: Scalable and Modular Architecture for CSS 日 本語』
- 55. 設計指針 例 KOJI ISHIMOTO氏の場合 絶対にCSSを増やしたくない class名で悩みたくない 完璧じゃなくてもいい 石本 光司 @t32k Front-end-engineer サイバーエージェント所属 JS Girl ファウンダー ※引用2 KOJI ISHIMOTO『ぼくのかんがえたさいきょうのしーえしゅえしゅ』
- 56. ディレクトリ構成
- 57. ディレクトリ構成例（SMACSSベース） html scss js image
- 58. ディレクトリ構成例（SMACSSベース） html scss js image
- 59. ディレクトリ構成例（SMACSSベース） normlize.scss helper.scss header.scss footer.scss main.scss side.scss button.scss heading.scss table.scss form.scss scss mixin.scss …etc setting.scss common.scss base layout module
- 60. ディレクトリ構成例（SMACSSベース） scss mixin.scss setting.scss common.scss normlize.scss helper.scss header.scss footer.scss main.scss side.scss button.scss heading.scss table.scss form.scss …etc base layout module
- 61. ディレクトリ構成例（SMACSSベース） common.scss @importして1つのCSSに @import "normlize.scss"; @import “helper.scss”; ! @import "header.scss"; @import "footer.scss"; @import "main.scss"; @import "side.scss"; ! @import "button.scss"; @import "heading.scss"; @import "table.scss"; @import "form.scss";
- 62. ディレクトリ構成 まとめ カテゴライズして分けておくと管理しやすい SMACSSなどのスタイルガイドを参考にしよう （他にこんなのもあります）
- 63. スタイルガイド
- 64. スタイルガイド モジュールの一覧表。コンポーネント一覧と 呼ばれることもしばしば。 コーディングルールやカラーコードを載せる となお良い。
- 67. スタイルガイド 参考になるもの CSS フレームワーク コーディングルール
- 68. スタイルガイド まとめ コンポーネントの一覧があると保守しやすく、 コミュニケーションコストを減らせる ジェネレーターを使おう
- 71. 設計がオリジナルすぎると残業増える 設計者＆作業者のコミュニケーションコストが増える 既存の手法を取り入れつつ、厳しすぎないルールを設ける S 命名ルールってこの場合はどう なるの？ このデータはどこに入れるべき？ これはElement ? それともBlockかな？ oh…
- 72. ベストプラクティスなんてない！
- 73. ベストプラクティスなんてない！ 時と場合による S メンバー案件の内容期限
- 74. S ベストプラクティスなんてない！ メンバー案件の内容期限 自分なりの設計をしてみよう
- 75. 言葉の意味はしっかり定義しとく
- 76. 言葉の意味はしっかり定義しとく ContainerとContentとか、 BlockとElementtとか、 Moduleとか…言い方多すぎ？ Layoutってどこの部分？ S
- 77. BEMは案外めんどくない
- 78. S BEMは案外めんどくない Dashのスニペット機能が超絶楽 PhpStormの補完機能は強力 .block{ &__element{ background: black; } } Sass 3.3̃の使うと省略できる .block__element{ background: black; }
- 80. S OOCSSとBEMは混ぜるとちょい危険 OOCSS シングルクラス向きマルチクラス向き .registration__btn_color_pink .btn .btn_pink .btn_small
- 81. S OOCSSとBEMは混ぜるとちょい危険 OOCSS .Block__Element._modifier .registraion__btn._color_pink
- 83. S セマンティックにこだわりすぎるのもよくない .btn-blue .btn-pink .btn-green .btn-default .btn-primary .btn-success .btn-a .btn-b .btn-c 予測しやすい予測しづらい 変更しづらい変更しやすい
- 85. オブジェクト指向を勉強するとOOCSSが楽しくなる スーパークラスとサブクラス 複合オブジェクト など S オススメ ITmedia エンタープライズ『5分で絶対に分かるオブジェクト指向』 URL : http://www.itmedia.co.jp/im/articles/0703/06/news125.html
- 86. まとめ
- 88. S たくさん知ろう OOCSS
- 90. OOCSS S 自分なりの設計をしてみよう 自分や周りの環境に合わせて、最適な設計をしよう
- 91. S 参考文献 ※引用1 Jonathan Snook,斉藤祐也『SMACSS: Scalable and Modular Architecture for CSS』 https://smacss.com/ja ※引用2 KOJI ISHIMOTO『MOL - Designing for a Mobile World!』 http://t32k.me/mol/log/the-perfect-css-i-thought/ ※引用3 Twitter『 Bootstrap』 http://getbootstrap.com/ 谷 拓樹『Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」 の設計手法』 http://www.impressjapan.jp/books/1113101128 株式会社ピクセルグリッド『Code Grid』 https://app.codegrid.net/ Harry Roberts『CSS Wizardly』 http://csswizardry.com/
- 92. ご清聴ありがとうございました！