DÍA 2 / 2016

Esparta utilizaría Stylelint

Esparta se diferencio del resto de ciudades estado griegas gracias a su particular visión de la educación que impartía a sus jóvenes. Así que ha llegado la hora de aplicar un poco de dureza y rectitud espartana a nuestra manera de escribir CSS.


Esparta utilizaría Stylelint

Esparta se diferencio del resto de ciudades estado griegas gracias a su particular visión de la educación que impartía a sus jóvenes. Así que ha llegado la hora de aplicar un poco de dureza y rectitud espartana a nuestra manera de escribir CSS.

Escribir CSS es duro, repetitivo y a veces frustrante. Escribir en la soledad puede hacernos creer que siempre vamos a hacerlo con el mismo modus operandi, craso error por muy metódicos que seamos somos humanos y al final siempre vamos a cometer algún error. Escribir CSS en equipo puede ser todavía más frustrante ya que con el tiempo cada uno de nosotros ha ido adquiriendo una serie de hábitos y vicios. Esta serie de hábitos y vicios se ha ido multiplicando con la aparición de los preprocesadores. Vaya por delante que no es culpa de ellos, la culpa es de aquellos que lo usan. Un ejemplo muy común y que se ve con mucha frecuencia es la indentación en modo Julio Verne, es aquella que a base de anidar clases puede llegar hasta el centro de la tierra creando selectores con una herencia más potente que la Borbónica. Sobreescribir esos selectores en los distintos media-queries solo hara que nuestro CSS crezca y crezca sin control alguno.

Orden y control

Vamos a subsanar los errores que inconscientemente cometemos a la hora de escribir CSS a través de un linter, un linter básicamente es una herramienta que revisa nuestro código en busca de errores. Y tenemos a nuestra disposición un linter impresionante llamado Stylelint.

Lo que me gusta de Stylelint es que es muy configurable y esta muy bien documentado, leerse toda la documentación es una tarea casi titánica.

Instalando Stylelint

Para utilizar Stylelint vamos a usar el terminal, aquellos reacios a usarlo es hora de que vayáis deponiendo vuestra armas, el terminal fue el pasado, es el presente y seguirá siendo el futuro. Disfrutadlo, amadlo y odiadlo todo lo que podáis pero al final vuestra vida sera más fácil y rápida.

Lo primero que vamos a hacer es instalar Stylelint a través de NPM y de manera global. Lo vamos a instalar de manera global para poder utilizarlo sin necesidad de Gulp, también porque si usáis Sublime Text o Atom es necesario para que funcionen los plugins de estos editores de código. Vamos a ello.

npm i stylelint -g

Ahora id a través del terminal a un proyecto, y simplemente escribid:

styles.css stylelint

Y el terminal pintara los errores basandose en la configuración por defecto. Podéis lintear un archivo CSS, SASS, LESS o cualquier otra sintaxis que pueda parsear postCSS. Y es que Stylelint esta creado con postCSS.

Esto es un poco farragoso de hacer, así que vamos a servirnos de Gulp para hacer correr Stylelint y así vamos a hacer que este linteando constantemente nuestro código.

Instalando Stylelint con Gulp

Lo primero para aquellos que todavía no han oído hablar sobre Gulp les recomiendo este gran artículo como punto de inicio.

Lo primero es un npm init para generar el package.json, esto lo hacemos desde el terminal.

Ahora vamos a instalar gulp y gulp-stylelint, vamos al terminal y escribimos lo siguiente:

npm i gulp gulp-stylelint --save-dev

Ahora vamos a nuestro Gulpfile.js y vamos a crear la tarea para lintear.

gulp.task('lint-css', function() {
  return gulp
    .src('src/css/*.css')
    .pipe(stylelint({
      reporters: [
        {formatter: 'string', console: true}
      ]
    }));
});

Y ahora creamos la tarea default (o el nombre que más nos guste) con un watch que este constantemente vigilando los cambios en nuestro directorio de CSS.

gulp.task('default', function() {
  gulp.watch('./src/css/*.css', ['lint-css']);
});

Si lanzamos Gulp la terminal nos indicará que nos falta lo más importante, el archivo de configuración.

Configuración

El archivo de configuración es donde establecemos todas las reglas que queremos que Stylelint aplique a nuestro CSS. El método más cómodo para pasarle las reglas es a través de un archivo que se tiene que llamar .stylelintrc y dentro de este archivo le pasamos las reglas como un objeto JSON.

Mi experiencia y también la de los propios desarroladores de Stylelint es empezar con todas las reglas. Y conforme vamos utilizándolo ir descartando las reglas que veamos que no nos sirven.

Otro camino es instalar una configuración estándar, la podemos instalar a través de NPM, vamos al terminal y escribimos los siguiente:

npm install stylelint-config-standard --save-dev

También podéis ir al archivo index.js en el repositorio de GitHub y copiar y pegar en vuestro .stylelintrc. Hay que eliminar la parte de module.exports =.

Cada regla es muy configurable. Dependiendo del contexto se le pasa una serie de valores. También podemos añadir que la regla ignore ciertas situaciones especificas a través de ignore: y también podemos añadir una excepción a través de except:.

Vamos a ver un ejemplo:

"rule-nested-empty-line-before": [ "always-multi-line", {
      except: ["first-nested"],
      ignore: ["after-comment"],
    } ],

Con esta regla controlamos si queremos dejar una línea vacía cuando estemos anidando selectores. Tiene la excepción para cuando sea el primer selector anidado, y también lo podemos ignorar añadiendo un comentario al principio del selector. En la documentación vais a encontrar todas las opciones que tiene disponible cada regla y cada una de ellas con diferentes casos de uso donde se ve que pasará y que no pasara según la opción seleccionada. Imperdible.

También tenemos la posibilidad de desactivar stylelint directamente en nuestro archivo CSS, lo podemos hacer de la siguiente manera:

/* stylelint-disable */
.error {
    font-size: 16px;
    font-weight: bold;
    color: red !important;
}
/* stylelint-enable */

También podemos ignorar archivos específicos a través de .stylelintignore.

Una cosa que me encanta es la posibilidad de añadir mensajes customizados a cada una de las reglas. Para añadir mensajes vamos a nuestro archivo de configuración y al final de la regla y a través de message incluimos el mensaje que queremos que salga por el terminal. Un ejemplo:

"block-no-empty": [true, {
            message: ["Propiedad vacía, golpe de remo por gañan."]
        }],

A continuación todos los mensajes que he ido añadiendo a mi configuración.

Podemos extender las capacidades de Stylelint a través de plugins que ha ido creando la gente o de los que creemos nosotros. Los plugins los añadiremos en .stylelintrc de la siguiente manera:

"plugins": [
    "../tu-plugin.js"
  ],

Aquí tenéis una lista de plugins que están disponibles en la web de Stylelint.

Tambien os dejo un plugin para usar Stylelint con Sublime Text y otro para usarlo con Atom.

Ya por último el repositorio con todos los ejemplos utilizados en este artículo.