2015年11月12日

なぜ CSS や Grunt はつらいと言われるのか

少し主語を大きく書いてしまいましたが、*.css と gruntfile.js についての話です。

「CSS に死を！」と言われたり、「CSS 勉強するのはだるい」と言われたりしますが、これらを見ていると「Grunt がつらい」という話と共通項があると感じました。

どちらも設定ファイルである

自分の考えとして前提を書くと「*.css と gruntfile.js はそれぞれ「どのような見た目にするか」「どのようなタスクを実行するか」を定義するための設定ファイルである」という考えです。

その前提のもと、設定ファイルであるという利点と欠点をこれから書いていきます。

*.css や *gruntfile.js は 200-250 行くらいまでなら、ソースコードの全体が少ない時間で把握でき、何をしているものなのかすぐに分かると思います。

CSS・Grunt ともに、ブログや Qiita などに上がっているソースコードをコピペしてくれば、なんとなくそれっぽい見た目になったり、タスクが実行できるようになると思います。

CSS はすぐに、無計画にルールセットを増やしたことによるファイルサイズの肥大化、スタイルの思いもよらぬ上書き (それに伴う !important 地獄)、必要ないルールセットの放置などが発生します。

Grunt も、無計画にタスクを増やしたことによるファイルサイズの肥大化、必要ないタスクの放置が発生しやすいと感じます。

ファイルサイズの肥大化については、CSS・Grunt ともにファイルを分割すれば良いという話ですが、CSS は @import を使うと CSS ファイルの読み込みが並列でおこなわれないため、全ての CSS ファイルを読み込むための時間がかかってしまう問題を抱えています。

また、Grunt も loadTasks() を使えば別ファイルに分割したタスクを読み込むことはできます。しかし、定義されているタスクの一覧性が悪くなるということと、読み込んだタスクが何をやっているのかを見るのが若干面倒という問題を抱えています。

CSS は MindBEMding だったり、SUIT CSS だったり、セレクタの設計手法が複数あります。

また、画像置換の手法についても、昔ながらの text-indent: -9999px; とする手法から、text-indent white-space overflow を組み合わせる手法、擬似要素を使う手法など複数あります。

Grunt も例えば Sass を CSS にコンパイルしたいといった時に、gruntjs/grunt-contrib-sass を使えば良いのか、sindresorhus/grunt-sass を使えば良いのか、分からなくなると思います。

複数ある手法から最適解を求めたいところですが、そこに至るまでの時間が長くなりがちで、それがだるさに繋がるのかなと思います。

と、書いてみたものの、特に思い浮かばないので、ここは任せました。