fullstack-development / front-end-best-practices

Set of best practices that you can use as checklist for your project.
328 stars 79 forks source link

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

Open alyonafomenkova opened 4 years ago

alyonafomenkova commented 4 years ago

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

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

.block {
  display: block;

  .description {
    font-size: 14px;

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

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

.checkbox__input:checked ~ .checkbox__label::before {   
  border-color: #3D4975;
}
Znack commented 4 years ago

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

Fr0stmourne commented 4 years ago

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

alyonafomenkova commented 4 years ago

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

Nelliza commented 4 years ago

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

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

alyonafomenkova commented 4 years ago

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

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

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

.block {
  display: block;

  &__description {
    font-size: 14px;

    &_color_red {
      color: red;
    }
  }
}

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

Fr0stmourne commented 4 years ago

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

Znack commented 4 years ago

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

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

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