Сокращённые свойства


    Зачем задавать картинку через 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 или силитесь понять эту магию, то просто запишите их отдельно и всё станет понятнее.


    Запомните: сокращённые свойства удобно писать, но сложно комбинировать и понимать, поэтому пишите модульные стили или новые для вас свойства развёрнуто.


    Видеоверсия



    Вопросы можно задавать здесь.

    • +17
    • 8,4k
    • 5
    HTML Academy 171,21
    Интерактивные онлайн-курсы
    Поделиться публикацией

    Вакансии компании HTML Academy

    • Front-end developer
      от 60 000 до 100 000 руб.
      Санкт-Петербург Полный рабочий день
    Комментарии 5
    • +5
      На картинке pepelsbey смотрит на тебя как на ученика Академии.
      • 0
        Но ведь… файлы со стилями станут больше.
        Как вариант сделать парсер/антипарсер (или как там его назвать). Релизить сжатые css, а разработку вести в нормальном редакторе с расширенным просмотром свойств.

        PS: наверняка такое уже есть, может подскажете что-то подобное на Linux?
        • 0
          Обычно на это отвечают: «gzip всё сожмёт». CSSO кажется должен уметь такие оптимизации. А вообще это совет новичкам, у опытных верстальщиков таких проблем нет.
          • 0

            gulp + cssnano

          • Отлично, как всегда!

            Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

            Самое читаемое