Приведи пример

Я скажу что ты не так юзаешь

Писать например html конструкции и придумывать классы

Так ты в стайледах так же придумываешь переменные

И везде при том скачет написание с нижнего регистра а перемешку с верхним регистром компонентов

Ничего не поменялось

Не совсем. Они же вроде локальные

Или я чего то не понимаю

Смотря как писать. Я не держу стили в 1 файле с html, но опять таки

И там и там можно этого добиться

UI
   atoms
         button
              button.module.scss
              index.tsx


button.module.scss

.button {
   btn styles (default)
}

.button[data-size="small"] {
    small btn modifications
}

.button[data-size="big"] {
    small btn modifications
}


// index.tsx
import styles from "./button.module.scss";

Тут типы на кнопку (пропсы);

const Button = ({size}) => (
   <button className={styles.button} data-size={size}/>
)

Это да

Вот, глянь

Кнопка которая имеет разные размеры

Можно так же с типами и тп

А годно

Есть такая тема что нужно отделить логику от стилей

Просто со стайлед я только пишу пропсы и ничего лишнего за это я его полюбил

С стайледами тоже можно

button
  index.tsx
  styled.tsx

Я так обычно дела

Да