CSS設計の教科書にインタラクティブな部分と見た目のＣＳＳは分離すべきという記載があったと思いますが、下記のようなことでしょうか？

.drawermenu-wrap {
z-index: 300;
width: 100%;
height: 100%;
position: fixed;
top: 0;
overflow-y: hidden;/* height: 101%;margin-right: -0.1rem;ではみ出させたスクロールバーを隠すため /
padding-top: 0rem;
text-align: center;
cursor: pointer;
margin-left: -100%;
color: red!important;
transition-property: all;
transition-duration: 1s;
}
↓
.drawermenu-wrap {
z-index: 300;
width: 100%;
height: 100%;
position: fixed;
top: 0;
overflow-y: hidden;/ height: 101%;margin-right: -0.1rem;ではみ出させたスクロールバーを隠すため */
padding-top: 0rem;
text-align: center;
cursor: pointer;
margin-left: -100%;
color: red!important;
}

.u-transition-all-1s {
transition-property: all;
transition-duration: 1s;
}

またコンポーネントの共通部分と見た目が同じ別要素があったとしても、その共通部分は
同じコンポーネントにしか使ってはいけないと記載があったのですが、
アニメーションに関してはどうなのでしょうか？
別コンポーネントに同じ動きがあった場合は下記のようにして使ってもよいと思いますか？

.u-transition-all-1s {
transition-property: all;
transition-duration: 1s;
}

それともutilityにすれば問題ないのでしょうか？

おそらくダメな理由はグロースハックなどで色などを変えようと思ったときに、
一緒に関係ない要素まで変わったしまうので、別にすべきということですよね。

つまり、仮に変更があってもそれらの要素が必ず同じ変化をすると言い切れるときのみ共通にして、
そうでない場合は別にしておくのが無難ということでしょうか？

・下記のドロワーメニューを隠しておくmargin-left: -100%;なども分離したほうがいいのでしょうか？
.drawermenu-wrap {
z-index: 300;
width: 100%;
height: 100%;
position: fixed;
top: 0;
overflow-y: hidden;/* height: 101%;margin-right: -0.1rem;ではみ出させたスクロールバーを隠すため */
padding-top: 0rem;
text-align: center;
cursor: pointer;
margin-left: -100%;
color: red!important;
transition-property: all;
transition-duration: 1s;
}