¿Cómo ordenar las propiedades en CSS?🤔

#css #spanish #latam

¡Hola gente bonita!👋

¿Alguna vez te has preguntado en que orden deben ir las propiedades de CSS?, ¿cómo sabes dónde añadir esa propiedad CSS? Tal vez las colocas al azar, o quizás las ordenas alfabéticamente.

En el articulo anterior explique el orden de los atributos en HTML, ahora voy a explicar el orden de las propiedades en CSS.

El objetivo de ordenar las propiedades es mantener un código claro o comprensible y evitar perder tiempo en pensar donde colocar una nueva propiedad.

Un orden adecuado permite "escanear" rápidamente el bloque de declaraciones en busca de propiedades.

🧐¿Cuál es el orden?

No hay un estándar o regla para ordenar las propiedades, usted puede colocarlas en el orden que desee, pero mi recomendación es que trate de seguir el mismo patrón y evitar un caos en tu código.

Existen diferentes guías de estilo donde se mencionan diferentes maneras de ordenar las propiedades, por ejemplo:

Vamos a echar un vistazo a la guía de estilos del creador de Bootstrap: Mark Otto. Según esta guía las propiedades se agrupan en diferentes categorías, las cuales son las siguientes:

Posicionamiento
Modelo de caja
Tipografía y texto
Visual
Miscelánea

El posicionamiento es lo primero porque puede sacar un elemento del flujo normal del documento y anular los estilos relacionados con el modelo de caja. Las propiedades que tienen que ver con animaciones y transiciones se colocan en la parte final.

Ejemplo

Siguiendo la guía de estilos:

.declaration-order {
  // Positioning
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  // Box model
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;

  // Typography
  font: normal 14px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;
  text-decoration: underline;

  // Visual
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;

  // Misc
  opacity: 1;
}

Es complicado aprender de memoria el orden de las propiedades o estar ordenándolas una por una, pero afortunadamente existen diferentes formas de configurar este orden.

🤵 Stylelint

Si trabajas en equipo te recomiendo StyleLint que es un linter para CSS (así como ESLint lo es para JavaScript). Existen diversos plugins de Stylelint que puedes instalar en tu proyecto y automaticamente ordena las propiedades en tus archivos CSS.

Primero ejecuta el siguiente comando en tu terminal para instalar stylelint:

npm install --save-dev stylelint
npx stylelint --version

Despues puedes instalar el plugin que desees, en este caso yo voy a instalar el plugin recess order config, que se encarga de ordenar las propiedades según la guía de Bootstrap:

npm install --save-dev stylelint-config-recess-order

Crea un archivo llamado .stylelintrc.json en la raíz de tu proyecto. Este archivo contendrá la configuración para stylelint.


{
    "extends": [
        "stylelint-config-recess-order"
    ]
}

Una vez configurado, si deseas que stylelint ordene las propiedades de tu archivo css automáticamente, usa la opción --fix.

También puede utilizar el plugin alphabetical order config para ordenar las propiedades alfabeticamente.

Igual puede utilizar directamente el plugin stylelint-order si, por ejemplo, desea especificar su propio orden.

🔗Extensión para vscode

PostCSS Sorting. es una extensión para vscode que permite configurar tu propio orden.

👫Aportaciones de la comunidad

@joshwcomeau uno de mis referentes en CSS publicó un thread en 𝕏 sobre el orden que el utiliza para ordenar las propiedades. Usa como referencia una guía de estilo diferente llamada: Idiomatic-CSS

@chriscoyier publicó en 𝕏 una manera de ordenar alfabéticamente las propiedades de CSS usando vscode, puedes ver la discusión aquí:

Si utilizas un método diferente para organizar tus propiedades CSS. Deja un comentario para continuar el debate.