Есть несколько визуально одинаковых блоков. Как сделать, чтобы у них все параметры в сss были одни, а фоновые изображения разные?

Question

[AnnaTopTop]

Есть несколько блоков как на скрине. Визуально они одинаковые, отличаются только текстом.
Но каждому надо сделать отдельное фоновое изображение.

Сделала основной класс, там прописала все параметры, и дополнительные на каждое изображение.

Если в основной класс внести background-image все работает, но мне так не подойдет, так как блоков несколько, а картинки разные.

Думаю, что то намудрила с классами...

Подскажите, пожалуйста, как правильно присвоить доп класс, чтобы это работало?


Скриншот фрагмента кода удалён модератором.

Comments

[Модератор]

Нарушение п.3.8 Регламента. Скриншоты фрагментов кода запрещены.

Answer 1

[Вадим]

как правильно присвоить доп класс, чтобы это работало

Во-первых, не существует "правильно". Если работает и никого это не смущает - значит решение приемлемое.
Во-вторых, зависит от того, придерживаетесь ли Вы какой-то методологии или нет. Поэтому ответ будет в наиболее распространённом варианте - будто бы придерживаетесь БЭМ.

.block-name { // название класса блока - block-name
  // основные стили
}

.block_type_codestyle{ // добавляем модификатор type со значением codestyle (потому что блок про кодстайл, хотя это не лучший подход для выбора названия класса, но для примера пойдёт)
  // стили, специфичные для этого блока. Например, конкретное фоновое изображение.
}

Однако, такой подход подойдёт для статических сайтов, но не подойдёт для сайтов, у которых контент может меняться через систему управления контентом - CMS.
В таком случае, ссылка на изображение должна устанавливаться не в стилях напрямую, а где-то в HTML. Как правило - inline стилях.
То есть:

<div class="block-name" style="background-image: url('...')" >...</div>

.

Однако, так же стоит учесть нюанс, что изображение могут быть контентно значимыми (но вроде бы не Ваш случай). То есть изображение, которое насёт полезную нагрузку для информирования пользователя.
В таком случае, это должны быть не фоновые картинки, а img.

Comments

[Ankhena]

Я бы последнее заменила на кастомное свойство css.
Это позволит не меняя html, потом использовать это изображение в css как угодно, а не только как фон конкретного элемента. Как фон, как маску, как фон псевдоэлемента или передать в дочерний.

[Вадим]

Ankhena, да, всё так.
Решил не перегружать ответ. Итак многовато вышло, а автор явно начинающий.

[AnnaTopTop]

Спасибо ребят, разобралась. А главное работает)
Я классы отредактировала, ошибки еще нашла, у меня еще путаница с иерархией была.
Да, недавно началась учиться.

Answer 2

[Salazar_Nexus]

Есть два способа.
(Лично мне импонирует второй)
1. Дать блокам два класса. Одному классу дать параметры, которые будут идентичны у всех, второму - персональные.
Например:
#html
div class="block personal1">
div class="block personal2">
div class="block personal3">
#style
.block{
color: red;
width: 210px;
height: 60px;
}
.personal1{
background-image: url();
}
.personal2{
background-image: url();
}
.personal3{
background-image: url();
}
2. Второй способ подразумевает использование шаблона.
Создаешь шаблон, прописываешь параметры, и присваиваешь его блокам.
Например:
#html
div class="block1">
div class="block2">
div class="block3">
#style
%example{
color: red;
width: 210px;
height: 60px;
}
.block1{
@extend %example;
background-image: url();
}
.block2{
@extend %example;
background-image: url();
}
.block3{
@extend %example;
background-image: url();
}

Итог: В первом варианте ты создаешь два класса, один класс наследуют все три блока, остальные три разных класса каждый индивидуально. Во втором варианте ты создаешь шаблон один раз, и используешь его для всех блоков, а отличающийся параметр пишешь отдельно.
Второй вариант экономит и сужает текст кода (при написании больших кодов), а также удобен в использовании повторяющихся значений, и в отличии от первого варианта не нуждается в "размножении классов". Какой удобен будет тебе - решай сам.

Comments

[AnnaTopTop]

Спасибо большое за подробное разъяснение) все понятно.