TL;DR
CSS類とVue少し、の話です。
Bulmaで作りはじめてBootstrapGridに変更、最終的には抜きたい話、SassとPostCSSについて。
経験値的にはBootstrapは大分昔に若干触ったことがある、Bulmaは初めてでした。
cssフレームワーク
制作中の変化
初回はBulmaを使用して制作し始めていたものの、
Bootstrap(Grid)に変更、最終的にはそれすらも抜きたいと感じています。
理由
Bulmaを辞めた理由
- 命名規則がBootstrapとは違うので知見が無さ過ぎたため何かを実装する度にBulmaのドキュメントに飛ぶ必要がありとても手間だった
- 大した規模のサイトでもないのでそれにのっかって得られるメリットが無かった
- 総合的に全部一から実装したほうが早そうだったし、オリジナル性も出せそうだった
Bootstrap-gridを辞めたい理由
- やはりサイト規模的に不要で、なにかあると調べたりBootstrapの実装を見たりしないといけなかった
総合的にこの規模感でCSSに慣れているのであれば、自分でガリガリ書いた方が安心もできるし、早いという結論でした。
Sassの使用
あまりPostCSSが好きではないのでSass(scss)を使用しました。
NuxtでSassを使用するためには、node-sass と sass-loader を追加でインストールする必要があります。
また、Vueコンポーネントの中で全体で定義している変数やmixinを使用するためにnuxt-sass-resources-loaderを使用しました。
このパッケージをインストールしてコンポーネントの中で読み込みたい変数等のみをimportしたファイルを作成して下記のような指定を追加することで、
各.vueファイルの中のstyleタグの中で変数やmixinを参照できるようになります。
nuxt.config.js
modules: [
['nuxt-sass-resources-loader', [
'assets/scss/variables_for_vue.scss',
]],
余談: Postcss
- CSSをトランスパイルして使用する場合プロジェクトによりプラグインが異なる
- この仕組み（特に何らかの言語的仕様があるわけではない）のため、IntelliJではエディタ補完が上手くいかない（重大）
- Babelとは違い未来のCSSの仕様がそのまま取り込まれているわけではない
- その割に結局Sassでできること以上のことをやっているプロジェクトを身近で見ていない
- なんか流行っているから、でいれてそうなプロジェクトが多い
- 拡張子も人の好みによって異なり、考えられていないプロジェクトが存在する（CSSも触る仕事があるのにPostCSSのトランスパイル用のファイルを.cssという拡張子で作成するなど）
これらを踏まえると人員流動性や勉強コストを考えた時にsassを使用したほうが良い印象があるので見かけてもあまり良い印象がありません。
そしてこういう話をすると特に何も反応がないことが多い…。
おわりに
CSSのフレームワークは結構見た目も引っ張られつつ、そこにのっかった実装というのが常に負担になってくるので
個人的にはあまり入れたくないなという感想でした。
目次
このサイト作ったぞシリーズです。