私のベストプラクティス – CSS

1. はじめに

今どき、CSSは宝の持ち腐れになっています。Angular/React/Vue/…の開発者とUIデザイナーのあいだには、深い溝があります。

UIデザイナーは<div>を30個も入れ子にして、CSSクラスを40個も付けます。一方のAngular開発者は2週間おきに最新ライブラリに夢中になっていて、その依存関係地獄はピア依存関係の衝突のせいで、とっくにnpm i --forceなしではビルドできなくなっています。TypeScript狂にとって、CSSやHTMLはどうでもいいのです。ごく単純な入力欄にさえMaterialを使わずにはいられません。そうしないとバリデーションをうまく作れないのではと不安だからです。ましてや、車輪の再発明で時間を無駄にするなんてまっぴらです。ところが、ライブラリが対応していない最初の要件が来た途端、節約したはずの時間はすべて失われ、気づけばそのライブラリのGitHub Issueを読みふけっている――そのことに本人は気づいていません。

フルスタックのプロジェクトにいる開発者には、フロントエンドデザイナーとしての腕を存分に振るう機会はめったにありません。Figmaで画面モックを渡され、そのとおりに実装するだけです。この手のフロントエンド開発者の多くは、たった1行のCSSでレスポンシブなレイアウトが作れることすら知りません。CSSはかつてないほど強力になっています。JSによるスタイルのハックや、大量のメディアクエリ、IE 8対策の回避策に追われた時代は終わりました。万歳！

2. 完璧な中央寄せ

面接でいつも受けが良かったわけではありませんが、私は気に入っていました。フロントエンドは得意かと聞かれると、よく「ええ、<div>を縦方向の中央に配置できますよ」と答えていたのです。

divの中央寄せは、難しいことで有名だ。

でも、それももう過去の話です：

.parent {
    display: grid;
    place-items: center
}

3. レスポンシブなGrid

.parent {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

4. レスポンシブなFlex

.parent {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.box {
    flex: 1 1 150px; /*  Stretching: */
    flex: 0 1 150px; /*  No stretching: */
    margin: 5px;
}

5. ページレイアウト

.parent {
    display: grid;
    grid-template-rows: auto 1fr auto;
}

6. サイドバー

.parent {
    display: grid;
    grid-template-columns: minmax(150px, 25%) 1fr;
}

7. クレジット

1-Line Layouts