もうちょっと具体的に話をする

classに全部ぶち込むと、スペース区切りで複数の値を入れることになる。
data-*であればそんなことをしなくて単体の値を指定できる。
っていうことは、

let resetValue = {
　"data-color": "white",
　"data-size": "M",
}

みたいに初期値を書けるってことだよ
これがクラスだと

let resetValue = {
　"white": true,
　"black": false,
　"red": false,
　"blue": false,
　"m": true,
　"l": false,
　"s": false,
　"ll": false,
　// それ以外の知らない値はそのまま変更しない（消してはいけない）
}

としなければいけなくなるということ
そして、色やサイズのパターンが増えたらどうすんの？ということ

ま、無理やりやろうとするなら、classの値に特殊な名前つけルールを作って
そのルールを解釈して操作する関数を作るなんて "無駄なこと" をやればできるがねｗ
whiteとではなくcolor-whiteみたいにプリフィックス付けて全部列挙して color- だと・・・無駄だなｗ