¿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? 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.

🧐¿Cuál es el orden?

Seguiré utilizando la guía de estilos del creador de Bootstrap: Mark Otto ya que me parece una de las maneras mas optimas de ordenar las propiedades. Cabe mencionar que existe otra guía de estilo como la de WordPress donde se ordena de una manera diferente.
Hay que agrupar las propiedades 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: block;
  float: right;
  width: 100px;
  height: 100px;

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

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

  /* Misc */
  opacity: 1;
}

Para ver una lista completa de propiedades y su orden puedes ir a Bootstrap property order for Stylelint.

⚠️ Cabe resaltar que no hay un estándar 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.

🔗Extensión para vscode

Es difícil aprender de memoria el orden de las propiedades o estar ordenando uno por uno, por fortuna existe una extensión para vscode que permite configurar tu propio orden, esta extensión se llama PostCSS Sorting. Existen también otras formas de configurar este orden, creando tus propios archivos de configuración sin la necesidad de usar una extensión.

👫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

Josh W. Comeau

@joshwcomeau

🌠 One of the most common questions I get around CSS is how to order declarations.

I prefer to group declarations by cluster, sorted by their impact on layout. Properties like `position` or `display` should be near the top. Typographical and cosmetic styles near the bottom.

14:15 PM - 10 Jun 2021

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

Chris Coyier

@chriscoyier

Into alphabetically sorted CSS? In a little discussion in the @ShopTalkShow Discord, @davatron5000 showed me it's built right into @code.

CMD+SHIFT+P > "Sort Lines Ascending"

15:27 PM - 12 Jan 2022