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.

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

Alfabético, pero no.

EL sitema se basa principalmente en colocar las propiedades de manera alfabética.

.box{
    background-color: #eee;
    margin: 50px 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.

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

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