CSS速记与速记–使用哪个

速记和速记–一种简洁，另一种精确。一种是出于简洁的目的而存在，而另一种则坚定地保持清晰。无论哪种方式，它们都有其目的和利弊，可以这么说。

这篇文章将为CSS速记符号和速记符号提供一些启发，同时总结哪种情况最适合用于哪种情况。

速记属性是一个属性，它接受其他CSS属性集的值。例如，我们可以单独使用border属性为border-width ， border-style和border-color分配一个值。

基本上，

border: 1px solid blue;

是相同的：

border-width: 1px;
border-style: solid;
border-color: blue;

这样，我们不必分别声明各个属性值（这是多余的，既费时又费空间的）。它还会重置声明中的遗漏属性，这可以被利用。

如前所述，我们以速记形式编写了一组其他属性值，如果速记中的所有属性值都是不同的类型（如border） ，则顺序无关紧要。对于具有类似边距之类的值的属性， 顺序确实很重要 。如有疑问，请记住顺时针！

现在，如果我们错过声明中的一两个属性怎么办？在上面的示例中，假设我们忽略了border-style 。

border: 1px blue;

我们将不再能够看到边框，这不是因为shorthand属性不起作用，而是因为我们遗漏的border-style获得了默认值none 。这就是该速记属性的呈现方式。

border: 1px none blue;

现在，让我们删除border-width的1px并保留其他两个1px ：

border: solid blue;

我们将只能看到较宽的边框，这是因为border-width属性具有默认值medium 。

border: medium solid blue;

这为我们得出结论，当在简写声明中忽略某个属性值时 ， 该属性将采用其默认值 （即使必须覆盖为其分配的任何先前值）。

如果有border-width: 1px; border: solid blue;前某处的元素border: solid blue; 同样，边框宽度将是medium （默认值），而不是1px 。

值得一提的另一件事是， 我们不能使用以简写形式表示的所有CSS属性都可以使用的值，例如inherit ， initial或unset 。如果使用这些属性，浏览器将无法确切知道该值应以简写形式表示的属性- 整个声明将被删除 。

有一个CSS速记属性，可以为所有CSS属性设置值 。 CSS范围内的值inherit ， initial和未unset适用于所有属性，因此，这是all属性唯一接受的值。

div {
  all: initial
}

这将使div元素放弃其拥有的所有CSS属性值，并重置每个属性值的默认值。

我们不要滥用all属性。仅在非常罕见的情况下（当我们无法触摸我们希望将此属性应用于的元素的任何先前CSS代码时），才可能需要它。

注意：如果每个颜色通道中的十六进制值的两个数字相同，则CSS属性color采用十六进制值并以简写形式表示。例如， background: #445599; 与background: #459;相同background: #459; 。

可包含在速记属性中的各个属性称为速记属性。一些例子是; background-image ， margin-left ， animation-duration等。

尽管速记方法很方便，但它们确实有一个缺点。还记得一开始我们看到速记如何用默认值覆盖任何遗漏的属性吗？如果不需要重置，这可能是个问题。

以font shorthand属性为例。让我们在h4元素（具有默认浏览器样式font-weight:bold ）中使用它。

font: 20px "courier new";

在上面的简写代码中， font-weight属性没有值，因此font-weight:bold （浏览器默认样式）将被默认值font-weight:normal覆盖，从而导致h4元素失去其粗体样式，这可能不是故意的。

因此，对于上面的示例，简单的两个longhand属性（ font-size和font-family是完美的。

同样，使用简写仅分配一个或两个属性值不是很有用 。当只需要一个属性就可以工作时，为什么还要给浏览器额外的工作来解释每个属性（包括遗漏的属性）呢？

除了生产，在开发阶段，一些开发人员（尤其是初学者）可能会发现，使用速记符号比速记符号更容易使用，以提高可读性和清晰度 。

如今，有了快速编码（借助Emmet等工具）和最小化的可能性，就不需要速记的高可靠性，但是同时输入margin:0;是很合乎逻辑的margin:0; 。

我们更喜欢CSS表示法的上下文会有所不同 ，我们要做的就是弄清楚哪种表示法最适合我们以及何时使用。

翻译自: https://www.hongkiat.com/blog/css-shorthand-longhand-notations/