¿Cómo nos preocupamos por la calidad del código CSS?

Podemos encontrar muchas publicaciones sobre la calidad de un código escritos en lenguajes de programación como JavaScript, JavaRuby y otros. Ya se ha hablado bastante de patrones de diseño, pruebas automatizadas y arquitectura de software. En todas estas publicaciones, CSS parece tratarse como un medio auxiliar y, sin embargo, constituye una parte importante de todas las aplicaciones de Internet.

En este artículo describiremos qué herramientas y buenas prácticas utilizamos en Codest, para que los proyectos que proporcionamos a nuestros clientes sean siempre de la máxima calidad.

PREPROCESADOR SCSS

Escribir código CSS es suficiente para aplicaciones pequeñas. Cuando se trata de proyectoEn SCSS, es importante que el código para objetos HTML similares no tenga que repetirse muchas veces en distintos lugares. El preprocesador SCSS nos ayuda a utilizar las variables, funciones y los llamados mixins, que hacen que nuestro código sea más estructurado y limpio.

El siguiente listado contiene un ejemplo de mixin que permite cumplir el principio de "no repetirse":

@mixin flex-center {
  mostrar: flex;
  align-items: center;
  justify-content: center;
}

Usando este mixin podemos escribir código:

.item-a {
  mostrar: flex;
  align-items: center;
  justify-content: center;
  ...
}

.item-b {
  mostrar: flex;
  align-items: center;
  justify-content: center;
  ...
}

De forma más concisa y limpia:

.item-a {
  @include flex-center;
}

.item-b {
  @include flex-center;
}

BEM METODOLOGÍA

La metodología BEM es una sencilla convención de nomenclatura que permite crear un código CSS modular, reutilizable y escalable. Como parte de Codest, la utilizamos para estilizar los componentes VueJS. Intentamos organizar nuestro código de forma que un único archivo .scss, que contiene un bloque, se asigne a un único componente .vue. Podemos poner como ejemplo el estilizado del componente v-page-header.vue.

.page-header {
  &__title {
    font-size: 2.0rem;
    color: $color-negro;
    fondo: $color-blanco;
  }

  &__logo {
    background: url('/images/background.png') no-repeat 0 0;

    &--vertical {
      background: url('/images/background-2.png') no-repeat 0 0;
    }
  }
}

CLASES DE UTILIDAD

Mientras trabajábamos con la metodología BEM, nos dimos cuenta de que para realizar una operación muy sencilla -por ejemplo, poner en negrita una parte del texto- teníamos que inventar nombres de clase CSS artificiales:

.page-header {
  &__bolder-item {
    font-weight: bold;
  }
}

Para eliminar este problema, nos hemos inspirado en las clases "utilities" utilizadas en el código fuente del framework Bootstrap. Gracias a ello, en el código de las plantillas Vue/HTML podemos utilizar la siguiente clase:

<div>
  <span class="text-bold">Contenido</span>
</div>

ANÁLISIS ESTÁTICO DEL CÓDIGO

No hace falta convencer a nadie de que trabajar con un código transparente y que además contenga estructuras coherentes permite modificar y añadir nuevas funcionalidades con facilidad. Es importante que cualquiera que empiece a trabajar con un fragmento de código existente pueda encontrarlo rápidamente. Sin embargo, muy a menudo los programadores tienen sus propios hábitos que pueden no ser comprendidos por otros equipo miembros. Por eso es tan importante utilizar herramientas que permitan automatizar la comprobación del código. Como parte de Codest, utilizamos la herramienta SCSS-LINT para analizar automáticamente un código SCSS, que contiene un conjunto de reglas predefinidas. Una de las reglas más interesantes y restrictivas que utilizamos en nuestros proyectos puede ser la regla PropertySortOrder, que garantiza el orden adecuado de los atributos dentro de una misma clase SCSS.

Imagine las dos partes siguientes del código SCSS:

.item-a {
    font-size: 14px;
    color: #FF00FF;
    margin-top: 10px;
    font-weight: bold;
    color de fondo: #00FFFF;
    relleno: 5px;
    margin-bottom: 10px;
}

.item-b {
    font-size: 18px;
    padding: 3px
    color de fondo: #00FFFF;
    margin-bottom: 4px;
}

y:

.item-a {
  margin: 10px 0;
  relleno: 5px
  color de fondo: #00FFFF;
  color: #FF00FF;
    font-size: 14px;
    font-weight: bold;
}

.item-b {
  margin-bottom: 4px
  padding: 3px;
  color de fondo: #00FFFF;
    font-size: 18px;
}

Ambos pasajes son correctos, pero el segundo es más legible. Los atributos relacionados, como los márgenes y los rellenos, están agrupados.

Resumen

Es difícil en unas pocas frases dar toda la información sobre la organización del código CSS en las extensas aplicaciones web que creamos con el framework Codest. Animamos a todos nuestros lectores a dejar comentarios sobre qué herramientas y buenas prácticas utilizáis en vuestros propios proyectos.