GitHubやLonely Planetに触発されて、この手のエントリーが続いています。今回は、CodePenのChris Coyierのブログ。

Overview

• SCSS
• Autoprefixer
• RailsのAsset Pipeline
• スタイルの方針はあるが、目的はほぼ見た目の整合性をとるため
• 「classを多用する」以外に、アーキテクチャは採用していない
• ページ当たり、2-3個のCSSファイル
• media queryの@mixinを使うが、.scssファイルごとにオンオフできるようにしている
• コメントを残すのには賛成派

Preprocessing

• Sass / LESS / Stylus でも必要条件は満たしているが、SCSSを使っている理由は、コミュニティがよいのと、総合的に見てよいと思う理由があるから。
• SCSSで、便利だと思う機能は順に、@import / @mixin / nesting / variables / @extend / math / loop

Prefixing

• Autoprefixerがよくできているので、CSSのプロパティ/バリューのprefixについてはあまり意識したことがない。特にflexboxのフォールバックの処理が気に入っている。
• かつては、Compassを使っていた。しかし、95%の用途はCSS3の@mixinであり、prefixのために@includeだらけにするくらいなら、「あるべき姿になるようただ書くだけ。」というアプローチの方がよいと思った。SVG gradientの生成機能はよかったが、IE9のためだけなので、Compassを引き続き使うほどの理由にはならなかった。

Rails

• Rails Asset Pipelineを愛用。"Expires" にかなり先の日付を設定し、デプロイの度に設定日を更新しているので、都度うまくキャッシュしてくれる。
• SprocketsはJavaScriptのみに使っている。CSSについては、Sassの方が依存関係をもっとうまく扱ってくれる。@variablesや@mixinがファイルをまたいで使える。
• CSSファイルはレポジトリにはコミットしない。その方がGitを使うにはよいので。アセットは全て、デプロイ時にまとめてコンパイルする。

Organization of Code

ものすごくこだわっているスタイルガイド

• propertyとnestの2スペースインデント
• selectorの後ろと、{ の前の1スペース
• declarationは1行に一つ（diffを見やすくするため）
• : の後ろに1スペース
• selectorと同じインデントで } を閉じる
• lengthとしての0には単位をつけない
• アンダースコアでなくハイフンを使う

そこそここだわっているスタイルガイド

• 関連性の強いblockが続くときは、行間を空けない。わりと関連性のある場合は、1行空ける。ほぼ関係ない場合は、2行。

まったく気にしてないスタイルガイド

• propertyの順番。height/widthのように関連してるものはまとまっていることが多いものの。。
• コメントのスタイル

自分で書くときは、自分が提唱したスタイルガイドに従ってないときもある。

Architecture

• 「なるべくclassでやる。」という方針のみ。
• selector combinatorを利用してnestをしないとか、nestの深さの規定をつくるとかするわけではない。あまり深くしないということだけ気をつけておけば、ケースバイケースでどうするのがバランスとしてベストなのかは、後から直せるので。
• 詳細度をなるべく低く設定しておく。どうしてもoverrideしなくてはいけないことがあるし、低くしておけば、万が一再度overrideするときも、!importantを使わなくて済むかも。
• 例外はよくあるが、サイズの単位は、remとpxの順で多く使っている。

Requests

各ページはCSSファイルを2-3個リクエストするかたちにしている。リクエスト数を小さくし、かつ、一つのファイルに全てまとめてわかりづらくしたくないので。

Media Queries

• media queryで@mixinを使っている。自分のネーミングのパターンはけっこう気に入っている。（コードが原文にあるので参照ください。）
• .scssファイルの頭で、@if ($MQs == true) {のtrueもしくはfalseをセットして、オンオフの切り替えができるようにしている。レスポンシブデザインでないページとそうであるページがあるが、コンポーネントは共有している。

Commenting

後から読んで、意味がわからないとか、関連のある内容でなくなってるとか、がない限りは、コメントはよく使っているので、削除しない。

Statics

• .scssファイルが160個。ネーミングにも気をつけているし、Sublimetextのprojectで見つけるのは容易いので、ファイル探しに困ることはない。
• それらのファイルには、全部で、13,345行のコード。
• global.css: 11.8k, page.css: 5.5k, editor.css: 6.2K
• カスタムフォントやJavaScriptに比べると、CSSのパフォーマンスへの影響は小さい。

The Future

• lintingはしてないが、やりたいと思っている。JavaScriptのlintingはしていて、満足している。
• ローカルにソースマップはつくってない。今のところ、Sass / Chromeではワークしてないと思うので。
• publicにもprivateにもパターンライブラリのビルドはもっていない。ビジュアルパターンのライブラリはつくったほうがよいと思っている。

#codepen #css