古いテーマの修正例#4

CSS篇。

a { text-decoration:none; outline:0; vertical-align:baseline; background:transparent; font-size:100%; color:#402a23; }
a:hover, a:active { outline:none; }
main, .inner { position:relative; }
.inner { width:1100px; max-width:100%; margin:0 auto; padding:0 50px; }
header { background:#fff; font-weight:500; }
header .main { height:130px; padding:25px 0 0; }
header .logo { float:left; }
header .contact { float:right; text-align:right; padding:5px 0 0; }
header .pop { font-size:0.9em; line-height:1em; }
header .mobile { display:none; }

相変わらず{}を1行で書きたがる癖。フレームワーク使ってるわけでもなにか命名ルールがあるわけでもなくひたすらコピペと自己流。行き当たりばったりで継ぎ足し。

こういうのは直しようがないので自動整形だけして終わり。現代では素人の書いたCSSの修正が一番難易度高い。

GitLabで表示したら!マークで警告が出る…。人間が分かってなくてもツールが教えてくれるんだから使えるものは使わないと。

5年前はlessやsassを使うように変更したりしてたけどビルド後のファイルを直接変更するようなめちゃくちゃな状態だったのでやめた。相手のスキルに合わせるべき。

このサイトでBootstrap 4使ってる理由も誰でも使えるようにだから。テーマ変更時でもGutenbergでの投稿でAdditional CSS Classをカスタマイズしたい時でも。コード書いてるブロックにはbg-light p-3