CSS Shorthand vs. Longhand - Когда использовать который

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

В этом посте будут освещены как сокращенные обозначения CSS, так и сокращенные обозначения, и будет сделан вывод о том, какой из них лучше использовать для какой ситуации..

Что такое сокращенная собственность?

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

В принципе,

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

такой же как:

 ширина границы: 1px; стиль границы: твердый; цвет бордюра: синий;

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

Как это работает?

Как упоминалось ранее, мы записываем набор других значений свойств в сокращенной форме, порядок не имеет значения, если все значения свойств в сокращенной другого рода как в граница. Для свойств с похожие виды ценностей как маржа, порядок имеет значение. Если сомневаешься, помни по часовой стрелке!

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

 граница: 1px синяя; 

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

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

Теперь давайте отбросим 1px за ширина рамки и оставьте два других:

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

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

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

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

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

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

все имущество

Существует одно сокращенное свойство CSS, которое может установить значение для всех свойств CSS. CSS-значения унаследовать, начальная а также снята с охраны применимы ко всем свойствам, и, следовательно, это единственные значения, принятые все имущество.

 div all: initial

Это сделает ДИВ элемент ditch ВСЕ значения свойств CSS, которые он имел, и сброс значения по умолчанию в каждом из них.

⚠ Предупреждение

Давайте не будем злоупотреблять все имущество. Необходимость в этом может возникнуть только в очень редких случаях, когда мы не можем прикоснуться к какому-либо предыдущему коду CSS элемента, к которому мы хотим применить это свойство..

Замечания: Свойство CSS цвет принимает шестнадцатеричное значение с сокращенной записью, если два числа шестнадцатеричного значения в каждом цветовом канале совпадают. Например, фон: # 445599; такой же как фон: # 459;.

Что такое произвольное свойство?

индивидуальные свойства которые могут быть включены в сокращенное свойство, называются произвольными свойствами. Некоторые примеры: изображение на заднем плане, Левое поле, анимация, длительность, так далее.

Почему мы должны использовать это?

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

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

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

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

Итак, для приведенного выше примера два простых свойства, размер шрифта а также семейство шрифтов идеальны.

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

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

Заключение

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