週報だけど週末の話だけ。

開発

ウェブサイトのデザインを改良しよう→CSSを全然メンテナンスしていなかった→CSS周りを整理しよう。

ということで、変数を使うためだけにSASSを導入していたが、本格的に@mixinを活用してみた。また、tailwindcssにあるようなプロトタイプ用クラスが使えると便利なので、一部を参考にしながらこのサイトのCSSにも取り入れてみた。

ただ、思うように動かないことも分かった。CSSフレームワークで定義された基本的なデザインをtailwindcssの書き方で拡張できると便利なのだが、クラス名だけだと修飾の優先度が低い。tailwindcssを使っていると毎回一からデザインを構築させられるのはこういう理由だ。パッケージ化したデザインは!importantを使わないと拡張できない。

あとはcheckbox, radio, sliderのデザインをきちんと作ってみた。疑似要素の良い練習になった。疑似要素を使ったり、細かいノウハウが必要なので苦労したが、どうせすぐに忘れてしまうだろう。とくにsliderはベンダープリフィックスを触らないといけない。

デザインは開かれている方がよいが、コンポーネントは閉じている方が使いやすい。どちらも捨てがたい。