AtomicDesignに挑戦した所感 ～クラスの命名規則のミス～

管理画面ベースのサイトを構築するにあたり、AtomicDesignを導入しデザイン・フロントトコーディングを進めている。
その中で出た疑問や、つまずきのメモになります。
————
変更時を一括で行う事を目的としたボタンの命名規則で失敗。

.c-btnをボタンの基本クラスとし、デザイン用に.c-btn–-◯◯ というクラスを別途使用することを決めた。
ボタンの色と形を洗い出していたため、ボタンの「色」や「角まる」などを要素をクラスとし用意したが、ボタンのデザインに変更があった際にクラスの振替の手戻りが起こった。

例）破線（c-btn–dot）からライン線（c-btn–line）に

　↓

グレー線になったことでcss記述だけでなく、クラス指定を変更する必要がでた。
——–
同様の工数がかからないように、「機能」を持つボタンは、機能をベースとした命名を行うことに統一した。

例）
Downloadボタン・・・.c-btn–download
前のページに戻る・・・.c-btn–return