Download as PDF, PPTX
Uploaded byHoriguchi Seito
PDF, PPTX61,498 views
悩まないコーディングをしよう！ OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計（Sass対応）
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つのこと まとめ
- 4.
- 5.CSS設計とは ! CSSをより体系立て、より構造化させることで、制作とメンテナンスをより容易に行うこと ※引用1 『SMACSS: Scalable and Modular Architecture for CSS』
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.オブジェクト指向に基づいて考案された設計手法。 米Yahoo!のNicole Sullivan氏によって考案された。! OOCSSで設計されている代表的なサイト ! ! OOCSSとは
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.要素をContainerとContentsに切り離して考える .text .input.heading .btn
- 19.
- 20.
- 21.要素をContainerとContentsに切り離して考える .registration >button{ … } というような、依存したスタイルの充て方ではなく、 .btn{ … }というように独立させてスタイルを充てると、色々なところで使い回せる
- 22.ストラクチャーとスキンを切り離そう (color) skin(display,text-align,…etc) structure (width,height)
- 23.
- 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.
- 30.html構造を明確にすることに軸を置いた設計方法。厳格な命名規則が特徴。 ロシアのYandex社によって考案された。 !BEMで設計されている代表的なサイト ! ! BEMとは
- 31.大きな特徴は以下の2つ 要素を Block,Element, Modifierの3つに分ける .Block__Element_Modifierという命名ルールを用いる
- 32.
- 33.
- 34.Block, Element, Modifier.registration
- 35.Block, Element, ModifierElement
- 36.Block, Element, Modifier.registraion__heading .registraion__text .registraion__input .registraion__btn
- 37.Block, Element, ModifierModifier
- 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.
- 41.SMACSSとは OOCSS,BEMの流れを汲みつつ、著者の経験や理論も交えてドキュメントに落とし 込まれたスタイルガイド（コーディングルール）。Jonathan Snook氏によって考案された。
- 42.
- 43.Base Layout ModuleState Theme
- 44.Base Layout ModuleState Theme ! reset.css helper.css …etc
- 45.Base Layout ModuleState Theme
- 46.Base Layout ModuleState Theme
- 47.Base Layout ModuleState Theme .tab .is-current
- 48.Base Layout ModuleState Theme
- 49.その他にもいろいろ マルチクラス推奨 ざっくりした命名規則Sassでの実装方法 などなど
- 50.
- 51.
- 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 scssjs image
- 58.ディレクトリ構成例（SMACSSベース） html scssjs image
- 59.ディレクトリ構成例（SMACSSベース） normlize.scss helper.scssheader.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.scsssetting.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.
- 63.
- 64.スタイルガイド モジュールの一覧表。コンポーネント一覧と 呼ばれることもしばしば。コーディングルールやカラーコードを載せる となお良い。
- 65.
- 66.
- 67.スタイルガイド 参考になるもの CSS フレームワークコーディングルール
- 68.
- 69.
- 70.
- 71.設計がオリジナルすぎると残業増える 設計者＆作業者のコミュニケーションコストが増える 既存の手法を取り入れつつ、厳しすぎないルールを設けるS 命名ルールってこの場合はどう なるの？ このデータはどこに入れるべき？ これはElement ? それともBlockかな？ oh…
- 72.
- 73.ベストプラクティスなんてない！ 時と場合による Sメンバー案件の内容期限
- 74.S ベストプラクティスなんてない！ メンバー案件の内容期限自分なりの設計をしてみよう
- 75.
- 76.言葉の意味はしっかり定義しとく ContainerとContentとか、 BlockとElementtとか、Moduleとか…言い方多すぎ？ Layoutってどこの部分？ S
- 77.
- 78.S BEMは案外めんどくない Dashのスニペット機能が超絶楽PhpStormの補完機能は強力 .block{ &__element{ background: black; } } Sass 3.3̃の使うと省略できる .block__element{ background: black; }
- 79.
- 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
- 82.
- 83.S セマンティックにこだわりすぎるのもよくない .btn-blue.btn-pink .btn-green .btn-default .btn-primary .btn-success .btn-a .btn-b .btn-c 予測しやすい予測しづらい 変更しづらい変更しやすい
- 84.
- 85.オブジェクト指向を勉強するとOOCSSが楽しくなる スーパークラスとサブクラス 複合オブジェクト などS オススメ ITmedia エンタープライズ『5分で絶対に分かるオブジェクト指向』 URL : http://www.itmedia.co.jp/im/articles/0703/06/news125.html
- 86.
- 87.
- 88.
- 89.
- 90.OOCSS S 自分なりの設計をしてみよう自分や周りの環境に合わせて、最適な設計をしよう
- 91.S 参考文献 ※引用1 JonathanSnook,斉藤祐也『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.