(S)CSSの書き方メモ

style.scss

style.cssになるSCSSファイルではCSSは書かないようにします。ただし例外としてCSS文法での@importルールはその必要性からここに書きます。Webフォントなんかで使いますね。それ以外はSCSSの@importでモジュール化した各種SCSSファイルを読み込んでいきます。

@import url("http://fonts.googleapis.com/css?family=Pacifico");

@import "vars";

@import "reset";
@import "clearfix";
@import "vendor-extension";

@import "basics";
@import "layout";
@import "widget";
@import "print";

_vars.scss

以降のSCSSファイルで使用するグローバル変数を定義するSCSSファイルです。これにもCSSは書きません。フォントファミリのショートカットや基本となる幾つかの色、グリッド定義などはここに書いて再利用しやすくします。対してブログパーツ的なもののスタイル指定等で必要になる変数はここで定義する必要が無いので、混乱を避けるためにここには書きません。

// Font
$sans-serif: "Lucida Grande", "Lucida Sans Unicode", sans-serif;
$monospace:  "Monaco", "Andale Mono", monospace;

// Color
$dark:   rgb(115, 143, 153);
$normal: rgb(136, 187, 204);
$light:  rgb(172, 215, 230);

$link:  $dark;
$hover: $normal;

// Size
$font-size:    16px;
$icon-size:    32px;
$favicon-size: 16px;

// Layout
$gutter: 16px;
$column: $gutter * 3;
$cwidth: ($column + $gutter) * 12 - $gutter;

繰り返し使うならばSVGグラデーションのData URIスキーム化したものなどもここにあると良さそうです。

reset.scssやclearfix.scss、_vendor-extension.scss

これらはサイト単位で一々作ると面倒な気がします。なので自分なりのベースを作って、それのシンボリック・リンクを張っておくのが良いのではないかと。

_basics.scss

HTMLの各要素に対するCSSを書きます。内容はWHATWGのHTML仕様に従ってSectionsやGrouping content、Text-level semanticsなどのカテゴリごとにまとめておくと修正する時に楽でしょう。思い切ってそのカテゴリ毎に分割してしまうのもありかもしれません。スタイル指定はトップレベルで指定してあっても後で困らないように、なるべくシンプルなものにしておきます。normalize.cssやvanilla.cssの類いを自分のサイト向けにカスタマイズした程度のものだけ書くというのが近いでしょうか。

// Root
html {
  overflow-y: scroll;
}

// Sections
body {
  line-height: 1.75;
  color: $fg;
  background-color: $bg;
  background-image: url("../images/bg-body.png");
  font-family: $sans-serif;
}

section, article {
  @include clearfix;
}

h2 {
  margin: ($font-size * 6) 0 ($font-size * 3) 0;
  line-height: normal;
  font-size: 150%; // 24px
  text-shadow: 0 1px 0 $bg;
}

// Grouping content
p {
  margin: ($font-size * 2) 0;

  a {
    text-decoration: underline;
  }
}

// Text-level semantics
a {
  color: $link;
  text-decoration: none;

  &:hover {
    color: $hover;
  }
}

em {
  font-weight: bold;
}

// Embedded content
img {
  max-width: 100%;
  vertical-align: text-bottom;
}

見出しのマージン調節とか全体的な色の調整などが中心になります。

ここまでのスタイルでだいたいページが読めるものになります。

_layout.scss

レイアウト関係のCSSです。ヘッダーやフッターの配置の仕方などを決定するCSSをここに書きます。Media Queriesによる分岐もレイアウト絡みのものなのでここへ。SCSSではネストした中でクエリを書けますが、Moble Firstの書き方とはあまり相性が良くない気がするので、普通にトップレベルで書いた方が良いと思います。

// Header
body > header {
  border-top: ($font-size * 0.25) solid $lightest;
  color: lighten($fg, 20%);
  text-shadow: 0 1px 0 $bg;
}

// Contents
#contents {
  margin: 0 auto;
  padding: 0 $gutter;
  max-width: $cwidth;
}

グリッド絡みの変数はグローバルではなくここに置いた方がメンテナンス性が高いような気がしています。

_widgets.scss

ごく一部で使う部品のスタイル指定をまとめておくSCSSファイルです。クラス指定をせざるを得ないようになった要素に対するスタイルはだいたいここに放り込まれることになるでしょう。これより前のSCSSファイルではセレクタでクラス指定が出てこないのが理想です(そう現実は甘く無いですが)。

このサイトではGoogle Code Prettifyやフッターの並んでいるアイコンのためのスタイルなどがここに含まれています。ぶっちゃけると、コンテンツ的になくても良いスタイル指定を置いておくSCSSファイルです。

_print.scss

印刷向けスタイルシートですが、これはちょっと保留気味です。最近になって別にするのをやめたんですが、早計だったかもしれません。