• コンポーネントがきれいに分けられない場合、UI設計が間違っていることが多い
• topdownで作ると分離し辛いコンポーネントになるのではないか
  • bottomupで作れば良くも悪くも分離されてできそう
  • topdownだとスコープが共通なのを良いことに変数などをばらまいてしまう
• リセットCSSを必ず適用する
• Block(コンポーネント)はどこに配置しても影響を与えないよう設計する
  • 幅と高さを持たせない
  • 外側に余白を持たせない
  • 要素タグに影響されない
• 外側の余白(margin)を定義するのはElementだけ
  • Blockの外側に余白を作りたい場合は、Block1を囲むBlock2をつくる
  • Block1はBlock2のElementを定義し、そのElementにmarginをつける
• marginは上と左に統一する
  • marginの相殺の管理が大変なので
• CSSはクラスにのみ記述する
  • HTMLエレメントに指定すると打ち消しのためのスタイルを書くことになる
    • 肥大化につながる
• CSSプロパティはアルファベット順で記述する
• インラインスタイルは使用しない
  • 汎用クラスは(できるだけ)フレームワークのクラスのみ
  • 自作汎用クラスはインラインスタイルと変わらない
• Blockは必ずしも使いまわせる必要はない
  • Blockにはコンポーネント目的とレイアウト目的がある
  • 最小単位から2つ目くらいまでは使い回せるが、それ以上のBlockはレイアウト目的になってしまう
• 詳細度の計算が必要のない作りにする
  • idにスタイルを当てない
    • idは詳細度の計算を複雑にする
  • BEMや浅いネストを遵守していれば、詳細度を気にする場面は訪れない
    • 詳細度の計算が必要になったときは、コードがメンテしづらくなっているということ
• 最小Block(コンポーネント)→大きめのBlock→レイアウトBlockの順番で作成する
  • 必要な機能を作り、それを覆う機能を作り、、、、、ページが作成される

タグ

• コンポーネント
• 設計