csste.stおもしろそう - 思ったこと

http://csste.st/ってサイトが面白そうだったのでざっくり訳しました。
だいぶ意訳なので間違ってるかもです。
まだ本家が未完成なので、このへんで一旦休止。
ツールは別途まとめ記事で書きます。

CSSのテストってなぜやるの？どうやってやるの？

CSSって変更を加えるのは簡単だけどテストするのは難しい

CSSは宣言型言語といって、基本的な変更を加えるのは簡単だけど、あらゆる箇所に予期しない影響を与えないようにするのはとっても難しい。
このサイトでは、今あるCSSのテストで使えるようなツールやテクニックを、CSSテストの提案と今後の発展のために集めるよ。

集める目的は？

多くのCSSテストツールは0から作られてるけど、それぞれ似たような処理が含まれてる。そういう情報をココに集めることで集合知みたいなのを作って、似たようなツールを分類することで、開発者がツールやテクニックを探すのを楽にしてあげて、0から作るんじゃなくて色々参考にした上で作れるようになってほしい。

テクニック

これらはCSSのテストに使える主なテクニックです。
最初に宣言型言語のテストについて読むことをお勧めします。

文法チェック

これは、あなたが書いたコードが実際に動作するかをチェックします。今時のエディタはビルトインかプラグインでこの機能があります。
対応したツール...CSSLint, SublimeLinter

基本的なコーディング規約

意図しない結果を生むような、複数人で開発しているコードに一貫性をもたせます。これは、ミスをより発見しやすくしますし、どんなプロジェクトでも使えます。インデントでタブを使うかスペースを使うか選べますが、どっちかだけにしましょう。
規約を考えるのが面倒ならCSSLintが便利です。例えば、widthとpaddingを一つのエレメントで指定すると、CSSLintに怒られます。

div {
    width:100px;
    padding:0 10px;
}


1: warning at line 3, col 2
Using width with padding can sometimes 
make elements larger than you expect.

おそらく、widthとpaddingを同時に使うとサイズが予想より大きくなっちゃうからです。
対応したツール...CSSLint

プロジェクトのコーディング規約

意図しない結果を生むような、複数人で開発しているコードに一貫性をもたせます。これも、ミスをより発見しやすくします。
対応したツール...CSSUnit, GhostStory

ブラウザ間の仕様チェック

視覚的な差分

ページがうまく描写されたらスクリーンショットを撮りましょう。プロジェクトにちょっとでも変更が加えられたらその度にスクリーンショットを撮って比較しましょう。何も起きてなきゃ大丈夫だけど、何か変わってたらどこかがおかしいです。
これはおそらく、CSSのデベロッパーが行う最も一般的なCSSのテスト手法です。CSSは主に視覚的なものを表現するツールで、そのため、デベロッパーは変更を目で確認します。視覚的に壊れてないことを確認してください。コンピュータは大量なデータ同士の比較が得意なので、テストツールに投げるのも簡単です。
Problems with this technique
Content Fragile
It is content-fragile. Any copy changes will break tests. Even something as simple as a 'last updated on' date in the footer of a page will trigger a failure exactly the same as an actual error would. This can be worked around by testing entirely with mocked content or by only running image diff tests against a 'living styleguide' if your project uses one.

DOM-unaware
Once the page or element has been flattened down to an image, it has no relation to the underlying DOM structure. This makes it harder to identify the root cause of the problem it has identified. You know that something has gone wrong but you'll still need to spend time figuring out exactly where.

Tools