Как лучше писать стили в scss?

Question

[Артём]

Если у меня есть такой html

<div class="result-container">
  <img src="/src/views/AppVIew/images/SM_Icon_Youtube.png" alt="" class="result-container-image">
  <a href="https://www.youtube.com/watch?v=wiTujJZ4G0k" class="result-container-link"></a>
  <p class="result-container-author">test user</p>
  <p class="result-container-date">test date</p>
  <p class="result-container-viewCount"> test view count</p>
</div>

То как лучше писать к нему SCSS? Стоит ли вообще каждому вложенному в result-container элементу задавать свой класс, или можно просто через вложение задавать стили, как я сделал ниже?

.result-container {
  max-width: 200px;
  img {
    max-width: 100%;
  }
  p {
    color:red;
  }
}

Comments

[WapSter]

Лучше использовать методологию.

[nuffyweb]

Стоит. Используя классы, а ещё лучше методологию, код легче поддерживать.
То что написано у вас при компиляции в css преобразуется в:

.result-container {
  max-width: 200px;
}
.result-container img {
  max-width: 100%;
}
.result-container p {
  color: red;
}

И в какой то момент легко можно запутаться в специфичности компонуемых тегов, классов и селекторов. Перестать понимать какое из нагромождение классов и тегов отвечает за конкретное свойство.
А если необходимо будет на другой странице этот же блок немного изменить, можно дойти до:

#result .result-block .result-container p a {
  color: red;
}

Если задавать классы, то получится что то такое:

.result-container {
  max-width: 200px;
  &__img {
    max-width: 100%;
  }
  &__p {
    color:red;
  }
}

компилируется в: (четко и понятно)

.result-container {
  max-width: 200px;
}
.result-container__img {
  max-width: 100%;
}
.result-container__p {
  color: red;
}

Answer 1

[Даниил Попов]

Посмотрите в сторону БЭМ
https://ru.bem.info/
в частности
https://ru.bem.info/methodology/naming-convention/

Answer 2

[Сергей Куплетский]

Зависит от методологии, которой вы хотите придерживаться.

Помимо упомянутого Даниил Попов БЭМ, так же можно обратить внимание на:
- Atomic CSS
- MCSS
- SMACSS

Можете для начала почитать обзор этих методологий на Хабре:
https://habr.com/ru/post/256109/
И выбрать то, что вам нравится и больше подходит.