CSSで個人的に腹立つ事例

はじめに

基本的にコーディングは同じ結果、想定の動きをするとしても、「中身が思ったのと違う！」という事は多々あるかと思います。逆も然りで、設定した覚えのない想定外の結果を得て慌てて原因を探しに行くこともしばしば。

フロントエンド、お前のことだよ。

今回は実装で私が高確率でやらかす、「こんちくしょー！」となった事例を自戒も込めていくつか挙げていこうと思います。主にCSS多め。フレームワークはnext.jsです。

100%になってない奴は誰だ

横幅100%にすると、何故か親要素の横幅を超えていく。子は親を超えていくものとは言うものの、頼むからこっちが想定してる時だけにしてくれ。
原因はwidth: 100%を設定した要素の内にある子要素が100%を超えた横幅を持っている時。

横幅100%に従ってる中に紛れてるから原因特定が一番面倒くさい。

なんでそんなに縦長になっちゃうの

heightを設定して覚えがないのにやたらと縦長になる。躍起になって縦幅をpx指定にしてみても頑なに効かない。
縦横の幅指定が効かないのは大体親要素につけたdisplayのせい。gridかflexつけてる事が大半でした。

割とすぐ気付くけど歯噛みするものの一つです。

君の名はundefinedじゃない

何をどうやってもundefined、設定したはずのクラス名を読み込まない。
そういう時は大体インポートするファイルを間違ってるか、もしくはHTML側で変な書き方をしているか。
誤

<div className={`${style["style1"]}${style["style2"]}`}>TEST</div>

正

<div className={`${style["style1"]} ${style["style2"]}`}>TEST</div>

文字列故にコードのチェックも効かない。半角たった一つなのに影響力があまりに大きすぎる。

異様に空いたスペース

gapで設定したはずなのにとある部分だけやたら隙間ができてる。なんだったら40pxで設定してた部分が40px+40pxになってる。どうにも消した筈の要素が消す場所を一つ下の階層にしてしまったのが原因。画面上に居座るな、おとなしく成仏してくれ。
誤

<div style={{display: "flex", gap: "40px"}}>
    <div className={style["child1"]} />
    <div className={style["child2"]}>
        <div style={{display: "none"}}>
        </div>
    </div>
    <div className={style["child3"]} />
</div>

正

<div style={{display: "flex", gap: "40px"}}>
    <div className={style["child1"]} />
    <div className={style["child2"]} style={{display: "none"}}>
        <div>
        </div>
    </div>
    <div className={style["child3"]} />
</div>

こうやって書くと「間違えるか？」とも思うけど、コンポーネント分けしてたら案外やらかす。ものっすごくやらかす。

思いつくのはこのあたりだけど、他にもあれば追加していくかもしれません。

100%(100%じゃない)亜種　20241115追記

一つ思い出したものがある。
一番上に書いた横幅100%に関するものの亜種が存在した。

このパターン。
一見問題なくない？と思うじゃ無いですか。

そ　の　右　の　余　白　は　な　ん　だ　。

よくよく中の要素を丁寧に調べていくと、実は突き抜けてたパターンが存在した。
突き抜けるならもっとわかりやすくしてくれ！！！！ステルスするんじゃない！！！！！