Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
alyonafomenkova opened this issue Sep 6, 2020 · 7 comments

Comments

@alyonafomenkova
Copy link

alyonafomenkova commented Sep 6, 2020

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

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

.block {
  display: block;

  .description {
    font-size: 14px;

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

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

.checkbox__input:checked ~ .checkbox__label::before {   
  border-color: #3D4975;
}
@Znack
Copy link
Contributor

Znack commented Sep 9, 2020

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

@Fr0stmourne
Copy link

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

@alyonafomenkova
Copy link
Author

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

@Nelliza
Copy link
Member

Nelliza commented Sep 9, 2020

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

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

@alyonafomenkova
Copy link
Author

alyonafomenkova commented Sep 9, 2020

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

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

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

.block {
  display: block;

  &__description {
    font-size: 14px;

    &_color_red {
      color: red;
    }
  }
}

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

@Fr0stmourne
Copy link

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

@Znack
Copy link
Contributor

Znack commented Sep 9, 2020

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

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants