Size: a a a

HTML/CSS — русскоговорящее сообщество

2020 October 21

ВГ

Владислав Григоржевс... in HTML/CSS — русскоговорящее сообщество
Это хорошо, но для обычного html. Это как вариант, конечно. Но к примеру если использовать бэм или же использовать Styled-components по их архектиктуре каскад с классами не лучшее решение. Мне интересно больше чем плоха, хороша практика такого написания и будет ли чрезмерная нагрузка на браузер, что стоит отказаться от подхода и писать через обёртки или сделать самое плохое, через классы :) и каскад
источник

Alibek Кulseitov in HTML/CSS — русскоговорящее сообщество
Владислав Григоржевский
Поделитесь пожалуйста знаниями или статьями. Чем плоха такая практика
div {
& > * {
  margin-bottom: 5px
}
}

Аргументы "за" в том, что даёт отступы без необходимости писать обёртки каждому блоку.
Минус в том, что трудоёмкая работа для браузера с таким css, он справа налево проходит по всем элементам и потом на основе этого уже применяет стили.

Благодарю
* вообще не используй
источник

Alibek Кulseitov in HTML/CSS — русскоговорящее сообщество
только для одного глобального сбрасывания можно
источник

ВГ

Владислав Григоржевс... in HTML/CSS — русскоговорящее сообщество
Nanto Work
скорее всего вы почти сразу столкнётесь с задачей как отменить эти глобальные отступы у каких-то конкретных элементов
я имел ввиду не глобальные отступы. А к примеру

.parent-name {
 & > * {
 some
}
}
Веротяно не так был понят
источник

Alibek Кulseitov in HTML/CSS — русскоговорящее сообщество
Владислав Григоржевский
я имел ввиду не глобальные отступы. А к примеру

.parent-name {
 & > * {
 some
}
}
Веротяно не так был понят
а почему .some { margin-bottom: 20px } ?
источник

Alibek Кulseitov in HTML/CSS — русскоговорящее сообщество
так нельзя?
источник

NW

Nanto Work in HTML/CSS — русскоговорящее сообщество
Владислав Григоржевский
я имел ввиду не глобальные отступы. А к примеру

.parent-name {
 & > * {
 some
}
}
Веротяно не так был понят
не суть, имеется в виду глобальный селектор
источник

NW

Nanto Work in HTML/CSS — русскоговорящее сообщество
ему надо в каком-то блоке всем отступы прописать
источник

NW

Nanto Work in HTML/CSS — русскоговорящее сообщество
но у того же датапикера, скорее всего слетит разметка
источник

ВГ

Владислав Григоржевс... in HTML/CSS — русскоговорящее сообщество
Nanto Work
ему надо в каком-то блоке всем отступы прописать
верно, в котором 100500 блоков, но нужны отступы всем детям этого парента)
источник

AP

Anton Permyakov in HTML/CSS — русскоговорящее сообщество
Владислав Григоржевский
Это хорошо, но для обычного html. Это как вариант, конечно. Но к примеру если использовать бэм или же использовать Styled-components по их архектиктуре каскад с классами не лучшее решение. Мне интересно больше чем плоха, хороша практика такого написания и будет ли чрезмерная нагрузка на браузер, что стоит отказаться от подхода и писать через обёртки или сделать самое плохое, через классы :) и каскад
нагрузка будет больше, чем от точечных классов, но это все равно незначительно
если только не вообще везде это использовать
источник

Alibek Кulseitov in HTML/CSS — русскоговорящее сообщество
Владислав Григоржевский
верно, в котором 100500 блоков, но нужны отступы всем детям этого парента)
для этого создается один блок .card или .item
источник

Alibek Кulseitov in HTML/CSS — русскоговорящее сообщество
либо атомарный класс mb-3
источник

AP

Anton Permyakov in HTML/CSS — русскоговорящее сообщество
но я тоже против звездочки, контролировать такое не очень удобно
источник

ВГ

Владислав Григоржевс... in HTML/CSS — русскоговорящее сообщество
Alibek Кulseitov
для этого создается один блок .card или .item
один класс имеется ввиду? Или всё таки обёртки, в которые засунуты будут разные элементы?
источник

NW

Nanto Work in HTML/CSS — русскоговорящее сообщество
да там даже служебные тэги отступы получат, типа того же <script>
источник

AP

Anton Permyakov in HTML/CSS — русскоговорящее сообщество
Владислав Григоржевский
один класс имеется ввиду? Или всё таки обёртки, в которые засунуты будут разные элементы?
зачем обертки, можно на сами элементы повесить классы
источник

ВГ

Владислав Григоржевс... in HTML/CSS — русскоговорящее сообщество
Nanto Work
да там даже служебные тэги отступы получат, типа того же <script>
не представляю, как в разметке модалки могут оказаться служебные теги:), к примеру
источник

Alibek Кulseitov in HTML/CSS — русскоговорящее сообщество
Владислав Григоржевский
один класс имеется ввиду? Или всё таки обёртки, в которые засунуты будут разные элементы?
обертка не причем на сам класс
источник

NW

Nanto Work in HTML/CSS — русскоговорящее сообщество
вот в модалке как раз вообще легко
источник