UserCSSのリファクタリングをしたい
最近
CSSの知識が充実してきて色々と意味がわかるようになってきた
これまで
のらてつ研究所のUserCSSはよくわからずにとりあえず結果さえ得られれば良しとしてごちゃごちゃやってきた
htmlの構造・セレクタもよくわからない状態で「目に入ったセレクタであれこれ試してみたらなんかできた!」という感じで書いてきた
なのでコードの必然性に自信がない記述が多い
なので
見た目は大体納得できているので変えないとして
これまでに書いたコードを見直してリファクタリングしたい
……が、
面倒くさいんだよなあ~~~
やらなければならないか?
別にやらなくても支障があるわけではない
今後書き換えるときに!importantが干渉したりすると厄介ではある
でもそうなったら最初から書き直しても良いような
ただ変なコードをそのままにしている状態には「恥」を感じる
参照されていることもあるようなので謎コードがあると良くない感じがする
実際ネックになっているのは
「過去の私はどういう意図でこれを書いたか」を読解し直すのが認知資源的に消耗が激しい
実際どのくらいおかしいコードが混じっているのかが想像できない
普通に妥当なコードも多いのかもしれない
妥当性の判断がかなりしんどい
日本語を読むようにコードは読めない
最初から書き直したほうが速いような
修正するよりは速いかもしれないけど、速いからと言って一瞬で終わるわけではない
やるとしたらいつやるか?
知識は増えてきたが、まだすいすい書ける程ではないし知らないプロパティも色々ある
今やり直しても、また書き直したくなることになる可能性が高い
やるにしてももっと経験を積んでからガーッと書き直す方が良さそうではある
結論
とりあえず今は我慢して放置
明らかにおかしいところを見つけたらその都度直す
作業記録
2021/12/01
リファクタリングというか、良くない記述を直した
主にページ一覧の表示に関するCSS
:not(grid-md):not(grid-lg)でカードサイズのclassを限定したり
わざわざ指定し直しているところがいくつかあったため
計算部分の意味をわかりやすくしたり
余白をカスタムプロパティで設定してカードの幅や位置の計算を明解に
(見た目はほぼ変わっていません)
実際に適用しているコードは直したけど「●hogehoge」の説明ページの内容はまだ直していない
2021/12/02
各説明ページの記述を見直して諸々修正した
settings等の記述を多少親切にした
リンクをちゃんと貼るなどしてわかりやすいようにした
(前までCSSに自信がなかったのであまり活用したいと思われないようにしていた)
_CSS_Title ページ指定をURLからページタイトルに変更等
あと気になっているのは_CSS_Grid、_CSS_Grid-md、_CSS_Grid-lgの記述
height、width、margin等の設定に確信がない且つ確認が手間
2021/12/04
_CSS_Grid、_CSS_Grid-md、_CSS_Grid-lgについて不要な記述の削除をした
試してみて意味を成していないとわかったものを消した
参考にしたCSSをコピペしただけで挙動の根拠がまだはっきりしていないというところがあるのでコードの確認は完了していない
2021/12/06
_CSS_Grid-md、_CSS_Grid-lg
多分これ以上シンプルにはならないのでこれで完了とする
_CSS_Gridも整理
settingsがなんとなくごちゃごちゃしているがとりあえずはこれでいいことにするか