Discussion on: Buenas practicas en CSS

[JoelBonetR 🥇]

Varias cosas a comentar aquí sobre las que hay que tener cuidado.

Resetear estilos CSS -> browser defaults

no es bueno o malo per se, la persona que usa un navegador puede estar acostumbrado a ellos y frustrarse cuando estos son reseteados o overrideados, por ejemplo si al seleccionar un item aparece un outline dashed alrededor y tu lo quitas, el usuario puede tratar de seleccionar ese item durante un rato, frustrarse y abandonar (por poner un ejemplo).

---

Usar valores relativos

El uso de valores relativos como em (font-size element) o rem (root font-size element) en lugar de valores absolutos como px (píxeles) permite que los tamaños sean más flexibles en diferentes tamaños de pantalla.

mmmm si, pero más bién no. Me explico, setear tamaños con píxeles funcionara bien en cualquier dispositivo o pantalla por el simple hecho de que cada dispositivo gestiona sus ppp de forma relativa.
Setear font-size 16px dará como resultado un output visible practicamente identico tanto en un monitor 4K como en uno quad-HD, como en un Full-HD como en un smartphone o tablet. Esto es porque la densidad de píxeles es mucho mayor en el smartphone o tablet que en un monitor 4K, el propio dispositivo lo sabe y en vez de crear una imagen de fuente de 16px de forma estricta, pasa por una operación donde se calcula el tamaño visible en grupos de píxeles según la densidad.

Por otro lado, el usuario tiene el poder de modificar sus preferencias de accesibilidad (en android Accessibility -> Display size., en windows Display settings -> scale and layout, por ejemplo) para ver el contenido con algún multiplicador de tamaño que el usuario prefiera.

Con esto no digo que no se deba usar ems o rems, sino que hay que analizar y testear qué se quiere conseguir exactamente, sobre qué elemento se va aplicar este sizing (no es lo mismo una fuente que un div) y cual es el mejor modo de conseguirlo, también tenemos otras medidas relativas como vw, vh o % que, según el caso, pueden venir mejor. Si queremos que algo escale, usaremos, según el origen del escalado, rem si el origen es el root, em si el origen es el tamaño fuente relativo, vh si el origen es la altura del viewport, vw si el origen es el ancho del viewport, % si el origen es el tamaño relativo del elemento padre etc.

---

Shorthands

El ejemplo del post:

    margin-top: 8px;
    margin-right: 7px;
    margin-left: 5px;

y

 margin: 8px 7px 0 5px;

no son lo mismo. En el shorthand estás declarando expresamente un margin-bottom de 0 pixeles, mientras que en la implementación sin shorthand simplemente no lo declaras. Cuando hay que extender componentes es mucho mejor tener solo las propiedades necesarias declaradas en vez de hacer overrides, de otro modo se termina overrideando con selectores menos eficientes o con !important.

Utilizar shorthands es recomendado únicamente cuando están declaradas todas las propiedades que el shorthand maneja, de otro modo, es preferible utilizar las propiedades por separado para evitar dichos problemas.

---

Conocer el display inicial de los elementos

Muy de acuerdo, pero no solo el display, por ejemplo la etiqueta p tiene el siguiente default:

  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;

y más de una vez he visto implementaciones tipo:

span.text-block {
  margin: 1em 0;
  display: block;
}

y entonces muere un gatito y te quedas pensando por qué #@! el dev en cuestión no usó una p en vez de un span para eso xD

Por eso es preferible crear, como bien has dicho, la estructura HTML y meter los estilos que sean necesarios a posteriori, analizando los defaults de los elementos.

También se pueden consultar los defaults aquí.

[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;

[JoelBonetR 🥇]

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