¿Cómo ordenar las propiedades en CSS?🤔
Tags: css, spanish, latam
Published: 2021-05-04 18:55:55

¡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](https://dev.to/lupitacode/como-ordenar-los-atributos-de-los-elementos-html-3cb0) 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

- [Code Guide de Mark Otto](https://codeguide.co/)
- [idiomatic CSS](https://github.com/necolas/idiomatic-css#declaration-order)
- [Sass Guidelines](https://sass-guidelin.es/#declaration-sorting)
- [WordPress Coding Standards](https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/#property-ordering)

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: 

1. Posicionamiento
2. Modelo de caja
3. Tipografía y texto
4. Visual
5. 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:

```css
.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.](https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-postcss-sorting) es una extensión para vscode que permite configurar tu propio orden

## 🤵 Stylelint

Si trabajas en equipo te recomiendo [StyleLint] (https://stylelint.io/) 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](https://github.com/necolas/idiomatic-css)

{% twitter 1402992774920560647 %}

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

{% twitter 1481286845820461056 %}

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

##🔎Recursos:
* [Poll Results: How do you order your CSS properties?](https://css-tricks.com/poll-results-how-do-you-order-your-css-properties/)
* [Alphabetize your CSS properties, for crying out loud](https://jerrylowm.medium.com/alphabetize-your-css-properties-for-crying-out-loud-780eb1852153)
* [On Declaration Sorting in CSS](https://meiert.com/en/blog/on-declaration-sorting/)
* [“Outside In” — Ordering CSS Properties by Importance](https://webdesign.tutsplus.com/outside-in-ordering-css-properties-by-importance--cms-21685a)
* [Harry Potter and the Order of CSS](https://dev.to/thekashey/happy-potter-and-the-order-of-css-5ec)
* [stylelint-config-recess-order](https://github.com/stormwarning/stylelint-config-recess-order)
* [Ordering CSS properties](https://www.matuzo.at/blog/ordering-css-properties/)


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

[▶️Youtube](https://www.youtube.com/lupitacode)
[📷Instagram](https://instagram.com/lupitacode)
[𝕏Twitter](https://twitter.com/lupitacode)
[🎵Tik Tok](https://www.tiktok.com/@lupitacode)
[🔵Facebook](https://facebook.com/lupitacode)
[🐙GitHub](https://github.com/lupitacode)
[🔲Codepen](https://codepen.io/lupitacode/)
[✍️Medium](https://lupitacode.medium.com/)