フロントエンドエンジニアがUI開発するときの頭の中

私が何を考えながらUI開発をしているか、言語化してみる。

全体を眺めてDOM構造をイメージする
- スタイルは一旦考えない
- ぼんやりボックスが見えてくる
ざっくりHTMLを書く
- なるべく少ない要素になるように考える（装飾のための要素を極力減らす）
- セマンティックを心がける
ざっくりCSSを書く
- UI自体のスタイルとレイアウトのスタイルを分けて考える
- どうしてもCSSだけでは対応できない場合、2. に戻り HTML を修正する
2と3を繰り返し調整する
不要なCSSプロパティを掃除する
- たとえば、flexbox 使っているのに子要素にある margin
- たとえば、marginが相殺されるのにtop/bottom、left/right をそれぞれ指定している部分
- たとえば、親のcolor（継承プロパティ）だけでいいのに、子要素でcolor、border-colorなどを個別で指定している部分
- たとえば、block要素に対するwidth: 100%
完成