CSS Shorthand vs. Longhand - Cuándo usar cuál

Shorthand y Longhand: uno es conciso y el otro preciso. Uno surgió de la necesidad de la brevedad, mientras que el otro se mantiene firme para preservar la claridad. De cualquier manera, tienen sus propósitos, pros y contras, por así decirlo.

Este post mostrará algo de luz sobre las notaciones abreviadas de CSS y las notaciones a largo plazo, a la vez que concluye cuál es el mejor uso para cada situación..

¿Qué es la propiedad de taquigrafía??

Propiedad de taquigrafía es una propiedad que toma los valores de otros conjuntos de propiedades CSS. Por ejemplo, podemos asignar un valor para ancho del borde, estilo de borde y color del borde utilizando la frontera propiedad sola.

Básicamente,

 borde: 1px azul sólido; 

es lo mismo que:

 ancho del borde: 1px; estilo de borde: sólido; color del borde: azul;

Con esto, no tenemos que declarar valores de propiedad individuales por separado (lo que es redundante, consume tiempo y espacio). También restablece las propiedades excluidas en la declaración, algo que se puede aprovechar.

Como funciona?

Como se mencionó anteriormente, escribimos un conjunto de otros valores de propiedad en taquigrafía, el orden no importa si todos los valores de propiedad en la taquigrafía son de un tipo diferente como en frontera. Para propiedades con tipos similares de valores como margen, el orden sí importa. En caso de duda, recuerda en el sentido de las agujas del reloj.!

Ahora, ¿qué pasa si perdemos una propiedad o dos en la declaración? En el ejemplo anterior, digamos que ignoramos estilo de borde.

 borde: 1px azul; 

Ya no podremos ver las fronteras, no porque la propiedad de taquigrafía no funcionó, sino porque estilo de borde que dejamos fuera, obtuvimos el valor por defecto ninguna. Así es como esa propiedad de taquigrafía se prestó.

 borde: 1px ninguno azul; 

Ahora vamos a soltar el 1px para ancho del borde y mantén los otros dos:

 borde: azul sólido;

Podremos ver los bordes, solo que con un ancho más grueso y eso se debe a que ancho del borde la propiedad tiene el valor predeterminado medio.

 borde: azul medio sólido; 

Esto lo concluye para nosotros que cuando un valor de propiedad se deja fuera en una taquigrafía, esa propiedad adquiere su valor predeterminado (incluso si tiene que anular cualquier valor anterior asignado para el mismo).

Si hay ancho del borde: 1px; por un elemento en alguna parte antes borde: azul sólido; Por lo mismo, el ancho del borde va a ser medio (el valor por defecto), no 1px.

Otra cosa que vale la pena mencionar es que no podemos usar valores como heredar, inicial o desarmado, que están disponibles para todas las propiedades CSS, en notación abreviada. Si los usamos, el navegador no podrá saber exactamente qué propiedad se supone que representa ese valor en la taquigrafía. - Se dejará caer toda la declaración..

los todos propiedad

Hay una propiedad abreviada de CSS que puede establecer el valor para todas las propiedades CSS. Valores de todo el CSS heredar, inicial y desarmado son aplicables a todas las propiedades y, por lo tanto, estos son los únicos valores aceptados por el todos propiedad.

 div all: initial

Esto hará que el div Elimine todos los valores de propiedades de CSS que tenía y restablece el valor predeterminado en cada uno de ellos..

⚠ Advertencia

No abusemos del todos propiedad. La necesidad puede surgir solo en muy raras circunstancias, cuando no podemos tocar ningún código CSS anterior de un elemento al que deseamos aplicar esta propiedad..

Nota: Propiedad CSS color toma el valor hexadecimal con notación abreviada si los dos números de valor hexadecimal en cada canal de color son los mismos. Por ejemplo, fondo: # 445599; es igual que fondo: # 459;.

¿Qué es la propiedad a mano??

los propiedades individuales que se pueden incluir en una propiedad abreviada se denominan propiedades de mano larga. Algunos ejemplos son; imagen de fondo, margen izquierdo, duración de la animación, etc.

¿Por qué deberíamos usarlo??

A pesar de que las alternativas de taquigrafía son útiles, tienen una desventaja. ¿Recuerda que al principio vimos cómo la taquigrafía anula cualquier propiedad omitida con sus valores predeterminados? Esto puede ser un problema si no se desea reiniciar.

Tomar el fuente propiedad de taquigrafía por ejemplo. Vamos a usarlo en el h4 elemento (que tiene un estilo de navegador predeterminado peso de la fuente: negrita)

 fuente: 20px "courier new"; 

En el código abreviado anterior, no hay ningún valor para el peso de fuente propiedad, de ahí la peso de la fuente: negrita(estilo predeterminado del navegador) será reemplazado por el valor predeterminado peso de la fuente: normal causando el h4 Elemento para perder su estilo atrevido, que puede no haber sido pensado..

Entonces, para el ejemplo anterior, dos propiedades simples, tamaño de fuente y Familia tipográfica son perfectos.

Además, usando taquigrafía para Asignar solo uno o dos valores de propiedad no es muy útil. ¿Por qué dar al navegador un trabajo adicional para interpretar cada propiedad individual (incluidas las que no se incluyen) en la taquigrafía, cuando solo se necesita una para trabajar??

Dejando de lado la producción, durante la etapa de desarrollo, algunos desarrolladores (especialmente los principiantes) pueden encontrar el uso de la notación a mano alzada mucho más fácil de usar que la taquigrafía mejor legibilidad y claridad.

Conclusión

Hoy en día, con la posibilidad de codificación rápida (con la ayuda de herramientas como Emmet) y minificación, no se necesita una alta confiabilidad en taquigrafía, pero al mismo tiempo, es muy lógico escribir margen: 0;. El contexto en el que preferimos nuestras notaciones CSS variará. y todo lo que tenemos que hacer es averiguar qué notación funcionará mejor para nosotros y cuándo.