css設計

cssの設計は保守性高いcssを組み立てる必要があります。

つまり変更を加えたい時に時間をかけずに変更ができるように設計しておくという事です。

以下で紹介するOOCSS、BEM、SMACSS、FLOCSSは、

大規模サイトなどで使われています。

命名規則なども含めて知識として頭に入れておけば、CSSの全体設計を理解しやすくなります。

マルチクラスとシングルクラス

マルチクラスは複数のクラスを使うこと。(OOCSS,SMACSS,FLOCSS)

シングルクラスは一つのクラスで定義します。(BEM)

OOCSS

OOCSSはオブジェクト指向に基づいて設計。代表的なものがBootstrap。

再利用できるように親子を分けて独立して書く。

さらに基本構造と見た目を分けて書きます。

<section class="box">
  　<div class="btn btn-blue">ボタン１</btn>
　　　<div class="btn btn-blue">ボタン１</btn>
</section>

.box {
 padding-left: 200px;
 padding-right: 200px;
}

.btn {
     width: 300px;
     text-align:center;
     margin: 0 auto;
}

.btn-blue {
      background: blue;
}

.btn-red {
       background: red;
}

BEM

• Block
• Element(Block内にある要素)
• Modifier(色や大きさなどの装飾を表す要素)

命名の書き方は以下の通り

<section class="box">
  　<div class="box__btn--blue">ボタン１</btn>
　　　<div class="box__btn--red">ボタン１</btn>
</section>

BEMはSassと相性がいいです。

.box {
       padding-left: 200px;
       padding-right: 200px;
      
      &__btn {
          width: 300px;
          text-align:center;
          margin: 0 auto;
          
          &--blue {
            background: blue;
           }
           &--red {
            background: red;
           }
      }
}

SMACSS

構成は以下の通りです。

• Base(reset.cssなど)
• Layout(プレフィックスに l- をつける)
• Module(親モジュールの名前をプレフィックスにつける)
• State(プレフィックスに is- をつける)
• Theme(プレフィックスに theme- をつける)

<section class="l-container">
  　<ul class="menu">
           <li class="menu-item is-ative theme-blue">メニュー１</li>
           <li class="menu-item theme-red">メニュー２</li>
   </ul>
</section>

FLOCSS

• Foundation(reset.cssなど)
• Layout(idセレクタを使う)
• Object
  • Component(プレフィックスに c- をつける)
  • Project(プレフィックスに p- をつける)
  • Utility(プレフィックスに u- をつける)

<section class="container">
  　<ul class="c-menu">
           <li class="c-menu__item c-menu__item--active">メニュー１</li>
           <li class="c-menu__item c-menu__item--red u-mbl">メニュー２</li>
   </ul>
</section>

Utilityの使い方例

.u-mbl {
        margin-left: 20px;
}