Здравствуйте.
Не нашёл ответа на форуме на свой вопрос, поэтому решил создать тему.
Интересует такой вопрос.
В 11 курсе Кекса про спрайты есть класс с псевдоэлементом .feature-item::before.
В этом классе есть такие свойства:
background-image: url("img/sprite.png");
background-repeat: no-repeat;
Почему здесь 2 строчки, ведь если мне не изменяет память, лучше же сократить код и написать всё это в одну строчку или я что-то не пониманию? Объясните, пожалуйста…
Весь класс целиком:
.feature-item::before {
content: "";
position: absolute;
top: 0;
left: 137px;
width: 65px;
height: 65px;
background-color: red;
background-image: url("img/sprite.png");
background-repeat: no-repeat;
opacity: 0.5;
}
Это спорный вопрос. Безусловно, можно прописать в одну строку, но! Это свойство, background, составное, оно включает: background-color, background-image, background-repeat, background-position, background-attachment. И если Вы впишите просто background: url("…") no-repeat; это не значит, что кроме этих 2 свойств Ваша строка background больше ничего не содержит! В ней невидимы остальные 3 свойства, причём значения проставляться будут по умолчанию!
1 лайк
Приведу пример, как это может мешать. Когда я верстал свой первый простой лендинг, в нём были 3 блока: у них были абсолютно одинаковые параметры, только отличались изображения. И вот каждому из них я писал: background: url("…") no-repeat; background-position: …; background-size: cover; Потом я решил добавить каждому блоку ещё и общий класс, куда перенести одинаковые для всех трёх блоков background-position и background-size. И вот тут начались фокусы: картинки наглым образом меняли position. Полгода (!) я не мог понять, что происходит. И только недавно до меня дошло: ведь этот общий класс был над классами каждого из блоков. И в блоке ведь было указано именно свойство background: url("…") no-repeat; Согласно каскадированию, эти остальные свойства по умолчанию переопределяли вынесенные вверх общие свойства! И получалась чехарда с картинками.
Также порой бывает, что компоненты этого сводного свойства слишком громоздки: фоновый цвет может быть задан в формате rgba, может быть огромная ссылка на картинку, в результате чего затрудняется восприятие, анализ и коррекция параметров. Поэтому многие предпочитают прописывать конкретные его компоненты. Да, возможно, это раздувает правило в стилях, но делает код более читабельным.