CSS設計とは

HTMLのクラス名の付け方と、CSSのコードの管理方法の考え方のこと。
構造化・命名規則などとも呼ばれたりする。
CSSのメンテナンス性や作業効率が向上する、
他のCSS編集者が理解しやすくなるといったメリットがある。

BEM

Block：枠組みとなる要素。
Element：Blockの中に存在する子要素。
Modifier：BlockやElementを修飾するもの。
これら3つを用いて命名する手法。

block__element--modifierのようにblockとelementはアンダースコア2つで区切り、elementとmodifierはハイフン2つで区切る。

FLOCSS

CSS設計指針。

Foundation：ベースを設定。
Layout：大枠のレイアウトに関する定義。
Component：再利用ができる最小限のパーツ。
Project：サイト固有のまとまりを定義してパターン化するパーツ。
Utility：ちょっとした調整のために使われる。

参考サイト

https://qiita.com/tera_shin/items/af90aeba49f93c76bd9e
https://haniwaman.com/flocss/#FLOCSS
https://ics.media/entry/15166/
https://qiita.com/sueshin/items/dcbaf3d8a0adb6b087db