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

公開日: 2015年11月12日更新日: 2022年6月21日

少し主語を大きく書いてしまいましたが、*.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 を使えば良いのか、分からなくなります。

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

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