コーディングで地味に忘れる仕上げテクニック

n番煎じですが、急いでコーディングすると忘れがちでテストのときにハッと気づくヌケモレを戒めとしてまとめておきます。
もう忘れないぞ〜。

flexboxのカラム崩れ回避

カードを並べるデザインなどで、flexboxでjustify-content: space-betweenにする機会は多いと思います。

カラムが3つの場合、カードが3nまたは3n+1個の時は良いのですが、3n+2この時はこのようにカードが左詰にならずに崩れてしまいます。

崩れを回避するために擬似要素を加える必要があります。

button要素をクリックすると、オレンジの枠が自動で付きます(chromeの場合)。
スタイルと合わない場合は、以下のように指定して消しましょう。

.btn {
    outline: none;
}

selectの三角アイコン「▼」を消し、独自のスタイルを当てる事は多いかと思います。

select要素では擬似要素が使えないので、大体selectをdivで囲んであげて、そのdiv要素の擬似要素としてアイコンを作ります。
その際、アイコンはselectの親が持つ要素なので、タップしてもselectの選択肢が開きません。

hotjarなどでスマホユーザを見てみると、アイコンをタップして選択肢を広げている人を多く見かけますので、タップしてもなにも音沙汰がないとストレスになってしまいます。

See the Pen select box by shake (@mgmgshake) on CodePen.

そんな時は、擬似要素にpointer-events: none;を付け加えます。

そうするとこのアイコン自体はタップしても無視され、下にあるselect要素のタップ判定となります。