css設計はじめの一歩

sass css設計

今更ですが・・・。
sassの基本とsassをつかったときの基本的な設計の仕方を教えて貰ったのでメモ。

おすすめされたコンパイラ→

Prepros :: Compile Less, Sass, CoffeeScript and much more with live browser refreshing.

BEMは命名ルールが厳格なので納期の短いものやメンバーのスキル状態によっては向かないことも。 oocssやsmacssはBEMにくらべて自由度が高いため取り入れやすい。

sass基本構文

  • ネスト
.header {
  background-color: #999;
  .logo{
    width: 100px;
    height: 200px;
    > a{
      color: red;
    }
  }
}

  • 変数

    カラーコードなど名前を決めておくとよい。

$color-default : #333;

a{
  color: $color-default;
}

  • &

    親を継承できる。擬似クラス、複合クラスで使用すると便利。

  .buton{
    display: block;
    &.button-primary{
      background-color: yellow;
    }
    &.button-secondary{
      background-color: orange;
    }
  }

  • @import

    読み込まれるscssはアンダーバーから始まる名前にする。
    そうするとコンパイル対象でなくなるのでインポートするファイルは_から始めると良い。

@import '_base';
  • コメント
cssでも残したい場合は
/*コメント*/
cssでは残さない場合は
//コメント

OOCSS

まず機能によって切り分ける。 似た機能の中で使いまわせるものを使い回す。

ストラクチャーとスキンに分ける

少ない記述でクラスを組み合わせて、たくさんのバリエーションを作ることができる。

ストラクチャー（構造　共通するパーツ）
スキン（カラーやサイズ）

<button type="button" name="button" class="button button-defalut">ボタン</button>
<button type="button" name="button" class="button button-blue button-large">ボタン</button>
<button type="button" name="button" class="button button-red">ボタン</button>

//ストラクチャー
.button{
  display: block;
  border-radius: 3px;
  border : 0;
  text-align: center;
  padding: 10px 30px;
  font-size: 15px;
  color: #fff;
  cursor: pointer;
}

//スキン
.button-defalut{
  background-color: #000;
}
.button-blue{
  background-color: blue;
}
.button-red{
  background-color: red;
}
.button-large{
  font-size: 24px;
}

より厳しく書くなら

//ストラクチャー
.button{
  display: inline-block;
  border-radius: 3px;
  border : 0;
  text-align: center;
  padding: 10px 30px;
  font-size: 15px;
  color: #fff;
  cursor: pointer;
  //スキン
  &.button-defalut{
    background-color: #000;
  }
  &.button-blue{
    background-color: blue;
  }
  &.button-red{
    background-color: red;
  }
  &.button-large{
    font-size: 24px;
  }
}

コンテナとコンテンツに分ける

<!--検索フォーム-->
<form class="search" action="index.html" method="post">
  <input class="input" type="text" name="name" value="">
  <button class="button">search</button>
</form>
<!--ログインフォーム-->
<form class="login" action="index.html" method="post">
  <input class="input" type="button" name="name" value="">
  <input class="input" type="button" name="name" value="">
  <button class="button" type="button" name="button">login</button>
</form>

//コンテナ
.search{
  display: inline-block;
  padding: 10px;
  border : 1px solid #000;
}
.login{
  display: inline-block;
  padding: 10px;
  border : 1px solid #000;
  width: 230px;
  text-align: center;
  .input{
    margin-bottom: 10px;
    width: 100%;
  }
}
//コンテンツ
.input
  border-radius: 3px;
  background-color: #fff;
  font-size: 16px;
  padding: 10px 30px;
}

SMACSS

カテゴライズする。

  • base
  • layout
  • module
  • state
  • theme

カテゴライズしたものをディレクトリ構成に活かす。 それにsassの機能をつかうときにつかう分のディレクトリ(settingやtoolなど)を足してつくるといい。

layout、stateなどはSMACSSの推奨命名ルール通り.l-や.is~などつけて命名するとわかりやすくなる。

stateはmoduleディレクトリの各モジュールのscssファイルの中で書いていくといい。 読み込みの順番に気をつける。

.
├── css
│   └── style.css
├── index.html
├── js
├── layout
│   └── _l-header.scss
├── prepros.cfg
└── sass
    ├── base
    │   ├── _generic.scss
    │   └── _normalize.scss
    ├── layout
    │   ├── _l-contents.scss
    │   └── _l-header.scss
    ├── module
    │   ├── _botton.scss
    │   ├── _card.scss
    │   └── _mainVisual.scss
    ├── setting
    │   └── _settings.scss
    ├── style.scss
    └── tool
        └── _keyframes.scss

style.scss内

//setting
@import "setting/_settings.scss";
@import "tool/_keyframes.scss";
// base
@import "base/_normalize.scss";
@import "base/_generic.scss";
// layout
@import "layout/_l-contents.scss";
@import "layout/_l-header.scss";
// module
@import "module/_botton.scss";
@import "module/_card.scss";
@import "module/_mainVisual.scss"

最強のCSS設計 チーム開発を成功に導くケーススタディ

最強のCSS設計 チーム開発を成功に導くケーススタディ