CSS Shorthand vs. Longhand – Что использовать

Сокращения и Longhand – один краткий, а другой точный. Один появился из-за стремления к краткости, а другой твердо стоит на страже ясности. В любом случае, у них есть свои цели, плюсы и минусы, так сказать.

В этом посте будут освещены как сокращенные обозначения CSS, так и сокращенные обозначения, а также будет сделан вывод о том, какой вариант лучше использовать для какой ситуации.
Что такое сокращенная собственность?
Сокращенное свойство – это свойство, которое принимает значения для других наборов свойств CSS. Например, мы можем присвоить значение для border-width, border-style и border-color, используя только свойство border.

В принципе,

граница: 1px сплошной синий;

такой же как:

ширина границы: 1px;
стиль границы: твердый;
цвет бордюра: синий;
Увидеть перо zGNKex Прети (@rpsthecoder) на CodePen,

При этом нам не нужно объявлять отдельные значения свойств отдельно (что является избыточным, требует много времени и пространства). Он также сбрасывает пропущенные свойства в объявлении, что может быть использовано в качестве преимущества.
Как это работает?
Как уже упоминалось ранее, мы записываем набор других значений свойств в сокращенной форме, порядок не имеет значения, если все значения свойств в сокращенной записи имеют другой вид, как в border. Для свойств с аналогичными значениями, такими как margin, порядок имеет значение. Если сомневаешься, помни по часовой стрелке!

Теперь, что если мы пропустим свойство или два в объявлении? В приведенном выше примере, скажем, мы игнорировали стиль границы.

рамка: 1px синяя;

Увидеть перо OVWRdv Прети (@rpsthecoder) на CodePen,

Мы больше не сможем видеть границы, не потому, что свойство стенографии не работает, а потому что стиль границы, который мы пропустили, получил значение по умолчанию none. Вот как это сокращенное свойство получено.

граница: 1px нет синего цвета;

Теперь давайте отбросим 1px для border-width и оставим остальные два:

граница: сплошная синяя;
Увидеть перо YXNGBV Прети (@rpsthecoder) на CodePen,

Мы сможем видеть границы, только с более широкой шириной, и это потому, что свойство border-width получило значение по умолчанию medium.

рамка: средняя сплошная синяя;

Для нас это делает вывод, что когда значение свойства не указывается в кратком объявлении, это свойство принимает значение по умолчанию (даже если оно должно переопределить любое предыдущее значение, назначенное для того же самого).

Если есть border-width: 1px; для элемента где-то перед границей: сплошной синий; для этой же ширины границы будет средняя (значение по умолчанию), а не 1px.

Еще одна вещь, о которой стоит упомянуть, это то, что мы не можем использовать значения, такие как наследовать, начальные или неустановленные, которые доступны для всех свойств CSS, в сокращенной записи. Если мы используем их, браузер не сможет точно знать, какое свойство это значение должно представлять в стенографии – вся декларация будет удалена.
Вся собственность
Существует одно сокращенное свойство CSS, которое может устанавливать значение для всех свойств CSS. Значения в масштабах CSS, наследующие, начальные и неустановленные, применимы ко всем свойствам, и, следовательно, это единственные значения, принимаемые всем свойством.

div {
  все: начальный
}
Это заставит элемент div отказаться от ВСЕХ значений свойств CSS, которые у него были, и сбросит значение по умолчанию в каждом из них.
⚠ Предупреждение
Давайте не будем злоупотреблять всем имуществом. Необходимость в этом может возникнуть только в очень редких случаях, когда мы не можем прикоснуться к какому-либо предыдущему коду CSS элемента, к которому мы хотим применить это свойство.

Примечание. Цвет свойства CSS принимает шестнадцатеричное значение с сокращенной записью, если два числа шестнадцатеричного значения в каждом цветовом канале совпадают. Например, фон: # 445599; такой же, как фон: # 459 ;.
Что такое произвольное свойство?
Отдельные свойства, которые могут быть включены в сокращенное свойство, называются произвольными свойствами. Некоторые примеры: background-image, margin-left, анимация-длительность и т. д.
Почему мы должны использовать это?
Хотя краткие альтернативы удобны, у них есть недостаток. Помните, в начале мы видели, как стенография переопределяет любые пропущенные свойства с их значениями по умолчанию? Это может быть проблемой, если сброс не требуется.

Возьмем, к примеру, свойство сокращенного шрифта. Давайте использовать его в элементе h4 (который имеет стиль шрифта браузера по умолчанию font-weight: полужирный)

шрифт: 20px “новый курьер”;

В приведенном выше сокращенном коде значение свойства font-weight отсутствует, поэтому значение font-weight: bold (стиль браузера по умолчанию) будет переопределено значением по умолчанию font-weight: normal, в результате чего элемент h4 потеряет свой полужирный стиль. , который, возможно, не был предназначен.

Увидеть перо BNpLvx Прети (@rpsthecoder) на CodePen,

Таким образом, для приведенного выше примера идеально подходят два простых свойства: font-size и font-family.

Кроме того, использование сокращения для назначения только одного или двух значений свойств не очень полезно. Зачем давать браузеру дополнительную работу, чтобы интерпретировать каждое свойство (включая пропущенные) в стенографии, когда для работы требуется только одно?

Помимо разработки, на этапе разработки некоторые разработчики (особенно начинающие) могут найти использование рукописных обозначений намного проще для работы, чем сокращение для лучшей читаемости и ясности.
Вывод
В настоящее время с возможностью быстрого кодирования (с помощью таких инструментов, как Emmet) и минимизации высокая надежность для сокращения не требуется, но в то же время очень логично набирать margin: 0 ;.

Контекст, в котором мы предпочитаем наши нотации CSS, будет меняться, и все, что нам нужно сделать, – это выяснить, какая нотация будет работать лучше для нас и когда.