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

    Salazar_Nexus
    @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();
    }

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

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    как правильно присвоить доп класс, чтобы это работало

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

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


    Однако, такой подход подойдёт для статических сайтов, но не подойдёт для сайтов, у которых контент может меняться через систему управления контентом - CMS.
    В таком случае, ссылка на изображение должна устанавливаться не в стилях напрямую, а где-то в HTML. Как правило - inline стилях.
    То есть:
    <div class="block-name" style="background-image: url('...')" >...</div>
    .

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