Как глубоко вложить стили?

Question

Если у меня есть структура:

<div class="container">
  <div class="row">
    <div class="col-md-8 first">
       <h2>List</h2>
    </div>
    <div class="col-md-4 second">
       <h3>Examples</h3>
    </div>
  </div>
</div>

Я хотел бы добавить цвет фона к .row и цвет шрифта к h2, поэтому я должен сделать в SASS:

.container {
   .row {
       background-color: red;
       .first {
           h2 {
              color: green;
           }
       }
   }
}

или:

.container {
   .row {
       background-color: red;
   }
   h2 {
       color: green;
   }
}

?

Я не очень разбираюсь в CSS и SASS, но хотел бы сделать это правильно.

Answer 1

Идеального метода не существует.
Однако я бы предложил использовать вложенные правила только для следующих случаев:

• Модификаторы
• Состояния
• Родительские селекторы
• Медиа

---

1.Модификаторы

.btn {
  // some syle

  &--red {
    color: red;
  }
}

2.Штаты

.card {
  // some syle

  &:hover {
    border: solid 1px #222;
  }

  &.is-active {
    // some style
  }
}

3.Родительские селекторы

.primary-nav {
  // some syle

  .header & {
    height: 100%;
  }
}

4.Medias

.video-cover {
  // some syle

  @media screen and (max-width: 1024px) {
    display: none;
  }
}

Answer 2

В любом случае работает.Я бы порекомендовал первый способ, потому что, если у вас есть другой .container, который также содержит h2, а не тот, который вам нужен, он также будет нацелен на это.

ЕслиВы не слишком озабочены спецификой ... Я бы по-прежнему рекомендовал первый способ, просто потому, что легче понять, что к чему.Если вы захотите вернуться к нему позже, вам будет намного проще, если вы знаете, что все есть.

Может показаться, что печатать гораздо больше, но любой хороший редактор кода (Sublime Text, Atom, VS Code) должны иметь функции автозаполнения и другие подобные инструменты, чтобы упростить его.

Еще одна вещь, потому что вы новичок: StackOverflow на самом деле не место для того, чтобы задавать вопросы о правильном способе написания кода.Этот вопрос был бы лучше на Code Review .StackOverflow больше подходит для случаев, когда у вас есть проблемы с кодом, который работает неправильно.

Удачи!