Ordenando código Css

Desde mi punto de vista tener el código Css ordenado debe solucionar dos problemas:

• Ser lo suficientemente intuitivo para que, al escribir código, no haya que pensar demasiado.
• Al editar código hay que ver a simple vista como funciona y evitar repetir propiedades.

Ordenar selectores

Los selectores deben seguir el mismo orden que la estructura Html.

<div class="card">
    <p class="card__title"> ... </p>
    <div class="card__text"> ... </div>
    <button class="card__button"> ... </button>
</div>

.card { ... }
.card__title { ... }
.card__text { ... }
.card__button { ... }

Ordenar las propiedades alfabéticamente.

Desde que empecé a escribir Css he seguido tres métodos para ordenar las propiedades. Aleatorio (así como te viene a la cabeza), agrupando por tipo (posicionamiento, “model box” …) o alfabéticamente.

Primero delcararmos las variables y las propiedades las ordenamos alfabéticamente.

.box {
    --background-color: lightgrey;

    background-color: var(--background-color);
    margin-block: 3.125rem;
    margin-inline: auto;
    text-align: center;
    text-transform: uppercase;
}

La principal ventaja es que no hay que pensar demmasiado al escribir el código, no hay que ir agrupando mentalmente las propiedades, ni es necesario añadir comentarios para definir cada grupo.

Scss

Suelo anteponer siempre @mixins y @extend, por si hay que sobreescribir algún valor, seguido de las variables, un espacio y las propiedades.

.box {
    @include box-appearance;
    @extend .text-content;
    $background-color: tomato;
    
    border-color: $background-color;
}

Todo esto no es definitivo, simplemente se trata de crear algunas pautas para mantener una cierta coherencia en el código entre proyectos.

Sublime Text

Si empléas sublime Text, puedes ordenar el código seleccionado alfabéticamente simplemente apretando F5