Безопасный CSS, или как писать универсальные стили

Важно, чтобы элементы выглядели однотипно. Для этого мы должны запретить перенос слов, и обрезать часть слов, если они выходят за ширину элемента.

Кому важно? Пользователю важно, чтобы он мог прочитать текст полностью, а не два с половиной слова.

Чтобы изображение не искажалось. мы используем object-fit: cover

В результате, загружает пользователь вертикальное фото, а у сверху треть обрезана и снизу треть. А через замочную скважину не разобрать что же изображено на картинке. Зато дизайнер счастлив.

Мы можем заранее избежать этого добавив резервное значение в конструкцию var()

Потом это резервное значение разъедется с актуальным дизайном и разработчик будет счастлив прошерстить все стили в проекте, чтобы поменять резервные значения. Просто пропишите эти значения для :root и всё.

При overflow-y: auto полоса прокрутки будет видна только в том случае, если содержимое длинное. Иначе её там не будет

А при динамическом изменениии высоты контента или контейнера будет прыгать туда-сюда и ширина контента. Лучше тогда уж overflow: overlay.

Полезно. Очень часто замечаю, что разработчики даже не задумываются над тем, что будет, если просто поменять количество текста в блоке.

"img { object-fit: cover; } "

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

"Не забудьте установить max-width: 100%для всех изображений,  "

а по умолчанию как это работает ?

Спасибо вам большое, очень помогло.

Красиво конечно, когда изображение с помощью object-fit: cover вписывается в определённую область. Но в статье столько сказано про универсальность решений, а тут провал. Дело в том, что всегда будут картинки разной ориентации. И в одном случае изображения будут обрезаться по бокам, а в другом сверху и снизу. В первую очередь нужно исходить от того, какой контент предполагается в данном месте. Например, если это карточки с фотографиями людей, то можно попробовать object-position: top (или процентное значение), чтобы головы не обрезались на вертикальных фотках. Если же на сайте предполагается, что будут и вертикальные и горизонтальные картинки, тогда лучше придумать решение с object-fit: contain и каким-либо фоном карточки.

Спасибо, когда заходил по ссылке думал что будет очередная статья о выравнивании дива по вертикали, но меня очень порадовали свойства overscroll-behavior и scrollbar-gutter, единственное замечание - я бы добавил в статью ссылки на поддержку этих свойств( к сожалению пока не везде это работает хорошо). Верстаю давно и ранее такие моменты обходил с помощью хаков, теперь будет для нормальных браузеров стандартные решения.