DEV Community

Discussion on: Buenas practicas en CSS

Collapse
 
marskdev profile image
Marcial Ambriz

Increíble feedback, has compartido datos interesantes que no he tomado en cuenta.

En el ejemplo del shorthand de margin tienes razón, dar por hecho un valor sin tomarlo en cuenta puede traer problemas después.

Utilizar shorthands es recomendado únicamente cuando están declaradas todas las propiedades que el shorthand maneja

Aunque esto es cierto, algunos shorthands permiten omitir valores como en el ejemplo de font. En el ejemplo tendríamos que agregar line-height y font-variant pero no son necesarios.

Incluso podríamos indicar solo el tamaño y el tipo de fuente y sería suficiente.

font: 18px Arial, sans-serif;
Enter fullscreen mode Exit fullscreen mode
Collapse
 
joelbonetr profile image
JoelBonetR 🥇 • Edited

Que permita omitir valores en la declaración no significa que no haga nada con ellos.

Según la especificación del lenguaje CSS; Si no se especifica un valor, se le asignará su valor inicial. Suena a algo anecdótico, pero significa que se sobreescribirán los valores previamente definidos. Por lo tanto el código:

background-color: red;
background: url(images/bg.gif) no-repeat top right;

no pondrá el color de fondo en rojo sino al valor por defecto de background-color, que es transparent, puesto que la segunda regla tiene precedencia.

Solo los valores de las propiedades individuales pueden heredar. Dado que los valores omitidos son reemplazados por su valor inicial, es imposible permitir la herencia de propiedades individuales omitiéndolas. La palabra clave inherit puede ser aplicada a una propiedad, pero solo como un todo, no como una palabra clave para un valor u otro.

Puedes aprender más sobre ello en developer.mozilla.org/en-US/docs/W...

Un saludo