CSSのフレームワークをやりたくない理由

CSS フレームワークが辛い。
最近、Vuetifyと言うものに触れたのだが、昔から自分はこういうのが苦手で、直感的でもないし学習コストもそれなりで、完璧にデザインカンプを再現するのが難しいと感じる。

一発で理解しずらいルール

かくしてもVuetyfy未経験のまま現場にぶち込まれたわけだが、clsss名がまたわけわからない。
class="d-block mb-2"みたいなのはまだ優しい方であるが、
mb-2は暗号のようだが、調べれば内容がすぐに出てきた。要はmargin-bottomなのだが単位が無いせいで、サイズ感が掴めないのである。
この辺は、調べれば回答出てくるのでまだ生優しいが、
一体、d-blockと言うclass名を何から名づけたのか？と言う疑問に対してフロントエンドの担当者は、こう答えた「初期設定のまま流用です」と。
これでは一体どんなプロパティが書かれているか想像しづらいのである。

バラバラな記述ディレクトリで遭難

やはり、コンポーネント内にある要素には初期設定のstyleが強制的に当たるのであるが、
肝心のstyleプロパティがコンポーネントと対になる場所かコンポーネント内に書かれていないのである。
ようやく見つけたと思ったら、大変奥深くのため修正作業でディレクトリを行ったり来たりするため、
修正作業に時間が取られるのである。
やっぱり手書きでコンポーネントに紐づけられたところにstyleが書いてあるとすぐに発見できるのでキャッチアップにかけるコストはかからない。

要素に強制的に当たるstyle

僕は、これは御法度だと思っているのである。
デザイナーはそこまで配慮してくれないのが普通だから、
たとえば何かと除外するためにカスタムスタイルを書かなくてはならない。
それだったら、最初から手書きでいいじゃんと。

しかし、フレームワーク特有の階層の複雑さから、相殺するスタイルを書くのも大変である。
これと後述のことで、数ピクセル単位の微調整が格段にやりにくくなるのだ。

トドメを刺される

前述の相殺するスタイルを書くのに関して、なんと場合によって!importantを使っているものがあるではないか！！
!importantを合わせて使用したプロパティを最優先で使用することにするものなのでimportantを使うのはなるべく控えて、どうにもこうにも行き詰まったらの最終手段としたいところである。

importantをimportantで相殺するなんて馬鹿げたことが発生してしまったのである。
こんな事態が発生してしまっては、これでは全くどのimportantが優先度が高いのか全くとしてわからないCSSが出来上がってしまうのである。
もう笑止千万である。
これでは修正作業の時に毎回、どうなっているかわからないstyleと格闘することとなるのである。

以上を総合的にまとめると

・マジでキャッチアップが大変
・初見の人は学習コストがそれなりにかかる
・階層が遭難しやすいレベルなので作業も手書きより時間がかかる。

だから自分はCSS手書きにしたい！！