front-end-best-practices icon indicating copy to clipboard operation
front-end-best-practices copied to clipboard

Ввести ограничение на вложенность селекторов.

Open alyonafomenkova opened this issue 5 years ago • 7 comments

Я читала, что хорошей практикой считается вложенность селекторов не больше двух уровней, т.к. большая вложенность усложняет читабельность и поддержку кода.

Неправильно. Вложенность больше двух уровней

.block {
  display: block;

  .description {
    font-size: 14px;

    .title {
      font-size: 16px;
    }
  }
}

Правильно. Псевдоэлменты, псевдоселекторы, родственные и соседние селекторы не влияют на вложенность.

.checkbox__input:checked ~ .checkbox__label::before {   
  border-color: #3D4975;
}

alyonafomenkova avatar Sep 06 '20 09:09 alyonafomenkova

А у нас же требование по БЭМу именовать, там в целом вложенность и получается максимум двух уровней, так как есть блок и есть элемент. Правда, у нас это явно нигде не описано, если я правильно помню

Znack avatar Sep 09 '20 03:09 Znack

Это ограничение уже заложено в принципы БЭМ, поэтому мне кажется, что отдельно его добавлять нет смысла

Fr0stmourne avatar Sep 09 '20 06:09 Fr0stmourne

В стандартах же не просто сказано следовать БЭМ, но и подробно описаны принципы, правила именования и т.д. Я считаю, что и про вложенность упомянуть не будет лишним.

alyonafomenkova avatar Sep 09 '20 06:09 alyonafomenkova

В стандартах же не просто сказано следовать БЭМ, но и подробно описаны принципы, правила именования и т.д. Я считаю, что и про вложенность упомянуть не будет лишним.

А вот тут ведь косвенно об этом идет речь: Не должно быть стилей, которые бы влияли на другие блоки любым способом;

Nelliza avatar Sep 09 '20 07:09 Nelliza

В стандартах же не просто сказано следовать БЭМ, но и подробно описаны принципы, правила именования и т.д. Я считаю, что и про вложенность упомянуть не будет лишним.

А вот тут ведь косвенно об этом идет речь: Не должно быть стилей, которые бы влияли на другие блоки любым способом;

Я привела плохой пример к issue и возможно, увела мысль в другую сторону. Лучше такой пример:

.block {
  display: block;

  &__description {
    font-size: 14px;

    &_color_red {
      color: red;
    }
  }
}

Т.е. я имела ввиду ограничение на вложенность внутри одного компонента. В данной случае финальная вложенность будет такой: .block .block__description .block__description_color_red

alyonafomenkova avatar Sep 09 '20 07:09 alyonafomenkova

Если речь про итоговый скомпилированный селектор, то там не будет вложенности image

Fr0stmourne avatar Sep 09 '20 08:09 Fr0stmourne

Если речь про итоговый скомпилированный селектор, то там не будет вложенности

На самом деле там уже неактуально. Тут правило именно про читаемость и поддерживаемость, так что там именно про исходный код :)

.block .block__description .block__description_color_red — а тут я ксттаи не запрещал бы третий уровень, потому что модификаторы по сути почти те же псевдоклассы, просто состояние того же элемента показывают

Znack avatar Sep 09 '20 09:09 Znack