¿Cómo ordenar las propiedades en CSS?🤔

¡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.

🔗Extensión para vscode

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

🤵 Stylelint

Si trabajas en equipo te recomiendo StyleLint que es un linter para CSS (así como ESLint lo es para JavaScript), el cuál se encarga de identificar errores en tus hojas de estilo e indicar donde hay problema.

👫Aportaciones de la comunidad

@joshwcomeau uno de mis referentes en CSS publicó un thread en Twitter sobre el orden que el utiliza para ordenar las propiedades, y es el mismo orden que he publicado en este articulo, cabe mencionar que el utiliza como referencia una guía de estilo diferente llamada: Idiomatic-CSS

@chriscoyier publicó en Twitter 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.

🔎Recursos:

Gracias por leer🦸🏻‍♀️
Mis redes sociales donde comparto notas de código:

▶️Youtube
📷Instagram
𝕏Twitter
🎵Tik Tok
🔵Facebook
🐙GitHub
🔲Codepen
✍️Medium

Blog