簡単な業務アプリだとBootstrapなどのCSSフレームワークを使うことが多かったのですが、不必要な機能があることもあり、自作で非常に手軽なCSSを集めてこれを共通のCSSとして使うことが多いです。
https://github.com/umanari145/css/tree/master/css_framework
これからも随時増やしていきますが、主に下記のような要素を入れております。
Contents
既存の処理の簡略化
margin-top:10px→mt10 など省略して書くことにより頻出処理を簡略化。
ちなみにtailwindというCSSのライブラリでも上記のような頻出処理を簡便なクラスで書くことができます。
https://tailwindcss.com/
他によくあるのがflex系ですかね。
|
1 |
flex_fs_c → justify-content:flex-start,align-items:center |
メディアクエリ用
レスポンシブ対策用に手軽にスマホの時はdisplay:noneにするなど。
display:〜を変更したり、blockとflexinlin-blockの変更など。
頻出タイプのCSS
主にモーダルウィンドウ、スクロールテーブル、ローディングなどです。
ライブラリを使ってもいいですが、手軽なものを実装しておき、クラス一発でこれらを実装できるようにすると便利です。
PHPなどでもそうなのですが、難しいことを知っていることもそうですが、普段やっていることをより簡略化して、短時間でできるようにすることの方が費用対効果は高い気がします。
