Edited at

CSS設計 特徴まとめメモ

More than 1 year has passed since last update.


CSS設計の目的確認


  • 予測・再利用・保守・拡張を楽にするため

  • CSSコード量を減らすため


OOCSS



  • 構造(骨組み)と、見た目(スキン,色,大きさ)の分離 ( Separate Structure & Skin )


    • 構造 - width, height, border, padding, margin 等

    • スキン - color, border-color, background-color 等




  • コンテナと内容の分離(Separate container and content)


    • 要素セレクタを使わない。クラスセレクタを使う

    • 場所を限定しない。階層指定セレクタ(子、子孫、隣接、複数)をできるだけ使用しない。 [ 意見 - ただこの方法によりCSSコードからは何処で使用されているかは分からないため、場所を明示する場合はコメントを使うと良いと思います。]



  • マルチクラス向き


 2016-11-30 21.03.02.jpg

src: http://www.slideshare.net/horiguchiseito/master-architecture-forcss (P.12)


BEM


  • 厳格な命名規則がある


  • 要素を Block、Element、Modifier の3つに分ける


    • Block ( nav, ul, div, article, section, dl ... )

    • Element : Blockの中の一つ一つの要素 ( h2, p, span ... )

    • Modifier : プロパティ




  • __ (アンダーバー×2) / _ (アンダーバー×1) / - (ハイフン) を単語と単語を区切るセパレーターとして使う


    • Block と Element の区切り


      • 「Block__Element」アンダースコア2つ



    • Modifier との区切り


      • 「Element--Modifier」ハイフン2つ



    • Block (又はElement) と Modifier の区切り / Modifier key と value の区切り


      • 「Block_key_value」「Element_key_value」アンダースコア1つ





  • シングルクラス向き


 2016-11-30 21.02.40.jpg

src: http://www.slideshare.net/horiguchiseito/master-architecture-forcss (P.30)


SMACSS


  • Base - サイト全体のスタイル

  • Layout - ヘッダー・フッター・ナビゲーション・メインコンテンツ・サイドバーなどのレイアウトスタイル。クラス名頭文字に”lー”を付ける。

  • Module – 再利用可能なパーツ要素、クラス名頭文字に親パーツクラス名を-(ハイフン)区切りで付ける。

  • State(状態) - js用クラス。クラス名頭文字に”is-”を付ける。

  • Theme – テーマルール。スキン的なサイト全体の色違いなど。


etc


  • FLOCSS(フロックス)

  • MindBEMding

  • MCSS

  • MVCSS

  • AMCSS

  • ITCSS

  • Critical Rendering Path


コツ


  • 設計はオリジナルすぎない事。既存手法を使いつつ、厳しすぎないルールにする

  • ベストの設計方法は、時と場合(メンバー・案件の内容・期限)などにより変化する。

  • BEMは案外面倒ではない

  • OOCSSとBEMは混ぜると、少々危険


    • BEM - シングルクラス向き

    • OOCSS - マルチクラス向き




用語


  • Descendent Name



  • スタイルガイド ( モジュール一覧 / コンポーネント一覧 )


    • html+cssのべた書き or ジェネレーターで作成可能

    • ジェネレーター


      • KSS (KnyleStyleSheets)

      • StyleDocco

      • hologram

      • FrontNote

      • StyleGuideBoilerPlate



    • 参考になるもの


      • CSSフレームワーク


        • BootStrap

        • WebStarterKit

        • Topcoat



      • コーディングルール


        • Github

        • Google HTML/CSS Style Guide








設計に必要なこと


  • 設計指針 ( 約束事 )

  • ディレクトリ構成

『 悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)2014.09.09 - http://www.slideshare.net/horiguchiseito/master-architecture-forcss


参考


  1. CSS設計をどうやって行うのかまとめてみた - Qiita - 2016.03.18 : http://qiita.com/soyanchu/items/8ca8876ced9f6db23d10

  2. すぐに実践できるCSS設計 OOCSSの基本を理解しよう - 2015.11.24 http://sinap.jp/blog/2015/11/sinap-oocss.html

  3. CSS設計における3大メソッド[OOCSS][BEM][SMACSS] - 2016.08.03 http://www.risewill.co.jp/blog/archives/5652

  4. 悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応) - 2014.09.09 : http://www.slideshare.net/horiguchiseito/master-architecture-forcss