Ir al contenido

Mi método para ordenar el 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. Ahora mismo el método que uso es una combinación de los dos últimos y me está resultando bastante efectivo.

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.

El problema que tengo con este sistema es que me es complicado mentalmente separar ciertos valores, así que tengo excepciones, las que se refieren a posicionamiento o dimensiones de un elemento.

.box{
    background-color; #eee;
    margin: 50px auto;
    position: absolute;
    text-align: center;
    text-transform: uppercase;
    top: 10%; left: 10%;
    width: 100%; height: 50%; 
}

La segunda excepción que hago tiene que ver con algunas propiedades recientemente añadidas a Css, como son flexbox y css grid. En ambos casos aún me cuesta ver las propiedades separadas, con el agravante de que estas propiedades pueden tener continuidad en elmentos hijo. Así que he optado por agrupar estas propiedades con comentarios para reconocer fácilmente cuando se trata de un elemto padre y cuando se extiende al hijo saber de que padre depende, mejor un ejemplo.

.box{
    // Layout
    display: flex;
    align-items: center;
    justify-content: center;
}
.box__child{
    // Layout .box
    order: 2;
}

Daos cuenta que la primera propiedad despues del comentario es la que define el tipo de método para crear el layout que usaremos (flex o grid).

Scss

Otra "norma" que sigo es 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.