Как правильно вкладывать классы или же в каких случаях?

Question

[Максим Иванов]

Использую sass(scss) и понятно, что я же не буду вкладывать классы так как в примере...

Пример кода

Обычно если я и вкладываю, то как в этом примере...

'Этот пример'

И тут у меня три вопроса:
1) А правильно ли я делаю, как во втором примере?
2) Когда вообще нужно вкладывать классы, при каких обстоятельствах что ли?
3) Есть ли смысл вообще использовать Пре, если в вёрстке я не использую бэм и тому подобное?

Comments

[Steppp]

Я делаю как в первом примере, но есть касяк, что
элементы нельзя друг друга вкладывать - Ниже код по бэм!

<div class="block">
  <div class="block-info">
    <ul class="block-list">
      <li class="block-item item">
        <a href="#" class="item-link">1</a>
      </li>
    </ul>
  </div>
</div>

.block {
  &-info {}
  &-list { }
  &-item {}
}

.item {
  &-link {}
}

И ты новичек в верстке))) Используй как тебе удобнее) Как в верху или как в низу!

[Сергей delphinpro]

Правильно — это когда код читать удобно.

.block {
  // 100500 строк кода
  &-item {
    // 100500 строк кода
    &-link {} // блин, а что это такое? надо листнуть вверх, потом вернуться...
  }
}

Когда речь идет о БЭМ и правильном разделении кода (один класс — один файл), то мы в любом месте понимаем что за элемент у нас перед глазами.
А здесь хз. Да и в целом многоуровневый код — плохо.
Вот так еще более или менее норм.

.block {
  &-info {}
  &-list {}
  &-item {}
  &-item-link {}
}

Ну а по большому счету — дело вкуса.

[Максим Иванов]

Steppp, не особо и новичёк, руки не доходили до Пре

[Steppp]

Максим Иванов, когда начнешь сайты по 10-50 страниц верстать, поймешь как лучше как нужнее) Как выше написал Сергей delphinpro, 1 фаил 1 блок) Вот так весь сайт в 1 css файле помещается)

[Максим Иванов]

Steppp, ну с большими сайтами это да...
я максимум 7 страниц, в одном css файле

[Sagrana]

Steppp, по БЭМу можно элементы друг в друга вкладывать. Вот код с ru.bem.info

<ul class="nav">
    <li class="nav__item">
        <a class="nav__link"></a>
    </li>
</ul>

[Steppp]

Sagrana, Вообще я о css говорил. И в том же сообщении пример кода!
Вот код с ru.bem.info

Answer 1

[oneManDev]

Логично что вы состояния и псевдоелементы пишете к конкретному селектору. По той же логике дочерние селекторы тоже б стоило записать в .block. Но это уже дело ваше. И вложивать больше трёх уровнев не стоит.

Comments

[Максим Иванов]

Я так понимаю, что это канает только тогда, когда не используешь методологии?