- URL: いまさら聞けない CSS の「Shorthand」と「Longhand」って何が違うの？
- 著者: saku (@sakupi01)
- 公開日: 2026-07-28
いつ読むか？
backgroundやborderなどのショートハンドとロングハンドのどちらで書くか迷ったとき- 既存コンポーネントのスタイルを一部だけ調整したいのに、意図せず他の見た目まで変わってしまったとき
- ショートハンドの後に書いたロングハンドが効かない / 効きすぎる理由を知りたいとき
- CSS の書き方を lint ルールで機械的に統一しようとしているとき
読書メモ
選択基準はデザインの意図。関連プロパティをまとめて初期化する「完全に上書きするデザイン」ならショートハンド、既存を維持して「一部だけ変更するデザイン」ならロングハンド。
- ショートハンドには初期値がなく、必ずロングハンドに展開される。明示しなかったサブプロパティは初期化される (
borderを書くとborder-imageは必ずリセット) - 展開はカスケードより前に起こる。だから後続の指定との前後関係が直感とずれる
inheritや!importantは展開先の全ロングハンドに伝播する
lint の静的ルールでは判断しきれない領域。