Taquigrafía de CSS vs. Tacaño: cuándo usar qué

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

Esta publicación arrojará algo de luz sobre las notaciones de taquigrafía de CSS y las anotaciones a mano, al tiempo que concluye cuál es la mejor para cada situación .

¿Qué es la propiedad de taquigrafía?

La propiedad de taquigrafía es una propiedad que toma los valores para otros conjuntos de propiedades de CSS. Por ejemplo, podemos asignar un valor para border-width, border-style y border-color usando solo la propiedad border .

Básicamente,

 borde: 1px azul sólido; 

es lo mismo que:

 ancho del borde: 1px; border-style: sólido; color del borde: azul; 

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

¿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 el borde . Para propiedades con tipos similares de valores como margen, el orden sí importa . En caso de duda, ¡recuerda las agujas del reloj!

Ahora, ¿qué pasa si nos perdemos una propiedad o dos en la declaración? En el ejemplo anterior, digamos que ignoramos border-style .

 borde: 1px azul; 

Ya no podremos ver las fronteras, no porque la propiedad de taquigrafía no funcionó, sino porque el border-style que dejamos afuera obtuvo el valor predeterminado none . Así es como se obtuvo la propiedad taquigráfica.

 borde: 1px ninguno azul; 

Ahora vamos a soltar el 1px para border-width y mantener 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 la propiedad de border-width obtuvo el medium valor predeterminado.

 borde: azul medio sólido; 

Esto concluye para nosotros que cuando un valor de propiedad se omite en una declaración abreviada, esa propiedad toma su valor predeterminado (incluso si tiene que anular cualquier valor anterior asignado para el mismo).

Si hay border-width: 1px; para un elemento en algún lugar antes del border: solid blue; por lo mismo, el ancho del borde va a ser medium (el valor predeterminado), no 1px .

Otra cosa que vale la pena mencionar es que no podemos usar valores como inherit, initial o unset, que están disponibles para todas las propiedades de CSS, en notación abreviada. Si los usamos, el navegador no podrá saber exactamente qué propiedad se supone que representa ese valor en la abreviatura: se descartará toda la declaración .

all propiedad

Hay una propiedad abreviada de CSS que puede establecer el valor para todas las propiedades de CSS . Los valores inherit CSS, initial y unset son aplicables a todas las propiedades y, por lo tanto, estos son los únicos valores aceptados por la propiedad all .

 div {all: initial} 

Esto hará que el elemento div elimine TODOS los valores de propiedad de CSS que tenía, y restablecerá el valor predeterminado en cada uno de ellos.

⚠ Advertencia

No usemos mal la propiedad de all . La necesidad de hacerlo puede surgir solo en circunstancias muy excepcionales, cuando no podemos tocar ningún código CSS previo de un elemento al que deseamos aplicar esta propiedad.

Nota: El color propiedad CSS toma el valor hexadecimal con notación abreviada si los dos números de valor hexadecimal en cada canal de color son iguales. Por ejemplo, background: #445599; es lo mismo que background: #459; .

¿Qué es la propiedad a mano larga?

Las propiedades individuales que se pueden incluir en una propiedad abreviada se llaman propiedades de mano dura. Algunos ejemplos son; background-image, margin-left, animation-duration, etc.

¿Por qué deberíamos usarlo?

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

Tome la propiedad de taquigrafía de font por ejemplo. Vamos a usarlo en el elemento h4 (que tiene un estilo de navegador predeterminado font-weight:bold )

 fuente: 20px "courier new"; 

En el código de taquigrafía anterior, no hay ningún valor para la propiedad font-weight, por lo que font-weight:bold (estilo predeterminado del navegador) será anulado por el valor predeterminado font-weight:normal hace que el elemento h4 pierda su estilo negrita, que puede no haber sido intencionado.

Por lo tanto, para el ejemplo anterior, dos propiedades simples, font-size font-family son perfectas.

Además, usar la abreviatura para asignar solo uno o dos valores de propiedad no es muy útil . ¿Por qué darle al navegador un trabajo extra para interpretar cada propiedad (incluidas las que quedan) en forma abreviada, cuando solo se necesita una para trabajar?

Dejando a un lado la producción, durante la etapa de desarrollo, algunos desarrolladores (especialmente los principiantes) pueden encontrar que es mucho más fácil trabajar con la notación a mano larga que la taquigrafía para una mejor legibilidad y claridad .

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 la taquigrafía, pero al mismo tiempo, es mucho más lógico escribir margin:0; . El contexto en el que preferimos nuestras anotaciones CSS variará y todo lo que tenemos que hacer es descubrir qué notación funcionará mejor para nosotros y cuándo.

15 fragmentos útiles .htaccess para tu sitio de WordPress

Tener un archivo .htaccess bien configurado es crucial si desea aumentar la seguridad y reducir las vulnerabilidades en su sitio de WordPress. Por lo general, el objetivo principal de crear un archivo .htaccess personalizado es evitar que se piratee su sitio, pero también es una forma excelente de manejar los redireccionamientos y administrar las tareas relacionadas con el caché..

(Consejos de tecnología y diseño)

Facebook y su privacidad: por qué es importante

El conocimiento es poder. No hay mejor manera de ponerlo en esta era de información nuestra. En nuestro mundo altamente digitalizado, es fácil para cualquier persona reunir información acerca de usted si está utilizando algún tipo de tecnología. De hecho, cuanto más pongas la tecnología como parte de tu vida, más fácil será recabar información sobre ti.Contrariame

(Consejos de tecnología y diseño)