Зачем задавать картинку через background-image, если можно просто написать background?
CSS-свойство background — это сокращение целой группы свойств: background-color, image, attachment, position и других. Вместо того чтобы писать целую батарею свойств, иногда бывает удобно просто задать background и описать всё в нём.
background-color
background-image
background-position
background-size
background-repeat
А ещё background просто короче: как вам при наборе, так и пользователю при загрузке ваших стилей с остальным сайтом. Ну, сплошные плюсы, давайте писать только сокращённые свойства! Шах и мат.
В целом: если вы пишете одну простую штучку, которой один раз задаёте фон, то проблем никаких. Но если вы уже начали мыслить модульно, комбинируете несколько классов на одном элементе или знаете что такое модификаторы для блоков — проблема есть.
Например, вы описали в классе .first свойства фона в background, но специально не указали картинку. А потом классом .second добавляете элементу картинку свойством background-image. И всё хорошо, картинка просто добавляется: .first, .second.
.first {
background: red no-repeat;
}
.second {
background-image: url(pic.png);
}
Но если наоборот: сначала background-image, а потом остальное в сокращённом свойстве background, то картинки уже не будет — она затрётся. Эх, каскад, беспощадная ты сволочь.
.second {
background-image: url(pic.png);
}
.first {
background: red no-repeat;
}
Подумаешь! — скажете вы, — я просто буду внимательнее и не допущу такого. Я в вас верю и наверняка всё будет хорошо. Но лучше сразу применять подходы, которые не допускают даже случайных ошибок, правильно? Все мы люди.
Если мы опишем свойства фона в обоих классах полными свойствами вместо сокращённых, то, как ни крути, классы — всё будет в порядке, они друг друга дополнят. А ещё это позволяет удобнее читать стили: порядок свойств в сокращённом свойстве background произвольный и все пишут как им нравится.
.first {
background-color: red;
background-repeat: no-repeat;
}
.second {
background-image: url(pic.png);
}
О похожем писал звезда фронтенда Гарри Робертс и прямо называл сокращённые свойства антипаттерном. Обязательно почитайте, все ссылки будут в описании к видео.
Есть много простых сокращённых свойств: font, list-style, border, padding, margin и другие. Но есть сложные или просто пока новые для вас — их проще понимать в отдельной записи.
Одно из самых моих любимых — свойство animation. Я долго не мог запомнить его синтаксис, пока однажды не решил записывать его всегда по частям: animation-name, duration, timing-function и так далее. И всё встало на свои места.
.wat {
animation:
3s ease-in
1s 2 reverse both
paused slidein;
}
Та же история с сокращённым свойством flex: оно объединяет flex-grow, shrink и basis. И если вы иногда долго смотрите на какой-нибудь flex: 0 0 1 или силитесь понять эту магию, то просто запишите их отдельно и всё станет понятнее.
Запомните: сокращённые свойства удобно писать, но сложно комбинировать и понимать, поэтому пишите модульные стили или новые для вас свойства развёрнуто.