DEV Community 👩‍💻👨‍💻

Lupita Code 🌄
Lupita Code 🌄

Posted on • Updated on

¿Cómo ordenar las propiedades en CSS?🤔

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

  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:

.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;
}
Enter fullscreen mode Exit fullscreen mode

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

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

🔎Recursos:

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

🐦Twitter
▶️Youtube

Top comments (1)

Collapse
 
jeancarlosr17 profile image
Jean carlos recio

Este tipo de reglas es como linter o se podrian agregar a uno?

👋 New to DEV?

Head over to our Welcome Thread and tell us a bit about yourself!