Corder's High 2017 「CSSをちゃんと書くためには？」 レポート

東京で開催された「CSS Nite LP54 Corder’s High 2017」の参加レポートです。

セッション4つめはまぼろしの久保さん、伊藤さん。

CSSをちゃんと書く？

Webサイトのデザインの壊し方

div {
  width: 100% !important; /* 宣言 */
}

丁寧に作ったCSS設計も宣言で簡単に壊せる

本当にあった怖いCSS

a {
  color: #000 !important;
}

なぜ起きる？

• 宣言をとにかく詰め込む
• 宣言の選び方が下手

CSSの仕様

視覚整形モデル

• 要素の種類
• ボックスの生成
• 位置決定スキーム

ボックスの生成

詳しくはWebで 視覚整形モデル

• display プロパティを意識する
  • 利用できるプロパティが変わってくる
    • block, 置換要素, table, flexなどで挙動が違う
    • 仕様書（Applise to）を見て確認しよう

宣言を設計する

• 継承を上手く利用する
  • プロパティをまとめる
• colorは前景色なので、他のプロパティに影響する

.box {
  border: 1px solid; /* border-color: #000になる */
  color: #000;
}

• Width を無駄に書いて肥大化させてしまう
  • max-width などを利用することで短い記述でスマートにできる

Sassについて

• CSSメタ言語、プリプロセッサーの一つ
• コンパイルしてCSS形式に変換させる
• Bootstrap v4でも使われている
• Sass記法とSCSS記法がある
  • 普通のCSSと変わりない、ブロック構文で書ける
• Sassがコンパイルできるツールはたくさんある

SassでちゃんとCSS

• 変数
  • $name: value;で宣言
  • 大きさ、キーワード、文字列など変数化できる
  • 何でもかんでも変数にしない
    • $main-margin, $sub-margin, $small-margin … 無駄😭
    • $main-border, $sub-border … 無駄😭
  • 汎用性の高い変数にする
    • ベースになる数値だけ変数化する
      • 無駄に変数として別けるのではなく、演算させる
      • データマップを使ってまとめる

$colors: {
  main: #000,
  sub: #111
};

.box {
  color: map-get($colors, main);
}

• ネスティング

  • 宣言ブロックを入れ子で記述できる
  • 詳細度はできるだけ小さく
    • & を活用
      • 親ブロックのセレクタが代入されるので入れ子にならずに吐き出される

• @import

  • @import 'path/to/scss-partial-file'で宣言
  • コンパイル時に一つに結合される
  • partialファイルの先頭に_を付けておけば出力されなくなる
  • でもpartialファイルが増えてくると見つけづらくなる
    • モジュールごとにpartialファイルにする

• @mixin

  • @mixin hoge(arg) {...} で設定
  • 引数を渡せる
    • 引数は必須ではない
    • ブロックの記述は @content で取得可能
  • 冗長な記述やスニペット的な宣言の処理に向いている
  • マップでメディアクエリを@mixin化
    • 引数で処理を増やしたり。

• @function

  • @function hoge(arg) {...} で設定
  • hoge(arg)の形で使用
  • 値を返す
    • mixinはプロパティを返すが、functionは値だけを返す

$z-map: {
  header,
  nav
}

@function z($name) {
  @return index($z-map, $name);
}

.header {
  z-index: z(header);
}

.nav {
  z-index: z(nav);
}

CSSのためのSCSSを構築