Как мне правильно подать s css папки?

Question

Я работаю с одним проектом и пытаюсь сделать его отзывчивым. Мой вопрос: когда я помещаю компоненты в приложение. js если есть класс с одинаковым именем, они переопределяют друг друга таким образом

--ExampleComponent1.js
--ExampleComponent1.scss

.custom-container {
  width: 50%
}

--ExampleComponent2.js
--ExampleComponent2.scss

.custom-container {
  width: 70%
}

const App = () => {
return(
<ExampleComponent1 />
<ExampleComponent2 />
)
}

Это приводит к тому, что класс настраиваемого контейнера переопределяется на examplecomponent2, поскольку у них обоих одинаковое имя класса. Поэтому мой вопрос в том, что я знаю, что могу использовать s css .module, но должен ли я использовать медиазапросы в каждой отдельной папке s css, как это? Это хорошо для использования? Потому что я пишу в каждую папку s css медиа запросы 3 раза (для мобильных устройств - для планшетов - для настольных компьютеров). Это показалось мне неправильным. Что мне делать ? Надеюсь, я достаточно ясно.

  @media (min-width: 768px) and (max-width: 1279px) {
   .custom-container {
    width: 70%;
  }

  @media (max-width: 767px) {
     .custom-container {
      width: 100%;
  }

Answer 1

Вы можете использовать BEM (block__element - модификатор, например, login__form - select), соглашения об именах или по расписанию CSS.