(S)CSSの書き方メモ

HTML5時代に向いていそうな(S)CSSの書き方を模索しています。SCSSで書くのでモジュール式に色々分割した方が良さそうだな……とか色々試してますが、なかなかこれ!というものに辿りつけません……。ということで、ここ最近の書き方をメモがてら晒してみる試みです。

実際にこのサイトで使っているSCSSファイルを抜粋しつつ列記していきます。

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.cssvanilla.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

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


CSSファイルの効率的な編集というのは多くの人の悲願らしく、CMS界隈では既に様々な方法で効率化が図られています。逆にWebデザイン界隈ではあまり話題にならないというか、「そんなことよりCSS3ですよねー」的な感じで見なかったふりをされているような気がします。HTML5への切り替えやSCSSの導入、Media Queriesの採用等、リデザインにならないまでもCSSファイルを見直すタイミングが数多くあると思うので、そういった機会にCSSファイルそのものの書き方みたいなものを色々模索してみるのも良いのではないかと思います。