Ревью: стили карточки
Вопрос
Перед тобой код на ревью. Скажи вслух, что здесь не так - по убыванию важности.
Читай вслух, как на ревью: сначала что делает код, потом что сломано.
.card {
width: 300px;
height: 200px;
padding: 20px;
margin-left: -10px;
}
.card__title {
font-size: 18px;
white-space: nowrap;
overflow: hidden;
}
.card__actions {
position: absolute;
bottom: 10px;
right: 10px;
}
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
фиксированная высота обрежет контент при длинном тексте или крупном шрифте
нет min-height вместо height
отрицательный margin вместо нормальной раскладки у родителя
у обрезки заголовка нет text-overflow: ellipsis - текст обрывается без многоточия
absolute без position: relative у .card - позиционируется от чужого предка
фиксированные пиксели ломаются при увеличении системного шрифта
Что могут спросить следом
- Как сделать карточку с прижатыми к низу кнопками правильно?
- Чем box-sizing: border-box меняет картину?
Разбор
Фиксированная высота. height: 200px с padding в стандартной блочной модели даёт
240 пикселей и обрежет содержимое, как только текст станет длиннее или пользователь увеличит
системный шрифт. Нужен min-height, а для предсказуемости - box-sizing: border-box.
Отрицательный внешний отступ - почти всегда признак того, что раскладку чинят
не в том месте: выравнивание должно задаваться родителем через gap или сетку.
Обрезка без многоточия. white-space: nowrap + overflow: hidden без
text-overflow: ellipsis обрывает текст «на полубукве» - пользователь не понимает,
что он обрезан.
position: absolute без relative у карточки - самая коварная: элемент
спозиционируется относительно ближайшего позиционированного предка, то есть где угодно.
Работать будет ровно до тех пор, пока карточку не переставят.
Общее: жёсткие пиксели везде - при увеличении шрифта всё разъедется.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.