Ordenar hojas de estilo CSS con linting

A menudo comenzamos nuestro CSS limpio, sencillo y con buenas intenciones, pero a medida que crecen y equipos que continúan desplegando nuestro código, por lo general las hojas de estilo que sufren.

Los desarrolladores desplazarse hasta la parte inferior de un archivo CSS, añadiendo en sus nuevos bits a medida que avanzan, con flagrante desprecio a la estructura o reglas que se han ido antes.

Pensé que era la única persona que estaba cansado de la vista de un relativamente simple página de destino con más de 3.000 líneas de código mal escrito, inconsistentes, a menudo dispersos con la espantosa !

Importante declaración. Sin embargo en las conferencias que he hablado con muchas personas con el mismo odio apasionado como yo, desde una pequeña empresa a gigantes de la tecnología.

Nuestras hojas de estilo están convirtiendo en monstruos que tenemos que dominar.

Daniel Eden habló recientemente en la conferencia dotCSS sobre los mismos problemas en Dropbox, y cómo su trabajo se centra ahora en la re-arquitectura de base de código CSS de la empresa.

Comience linting

Entonces, ¿cómo podemos resolver este problema? ¿Por dónde empezar siquiera? Una solución es la papelera de CSS y empezar de nuevo.

Oye, ¿por qué no hacer un rediseño completo del sitio web, mientras que estás ahí? Aunque esto parece ser un proyecto divertido, en realidad no se resuelve el problema.

Sólo barre bajo la alfombra por un año más, hasta que sucede lo mismo otra vez. Aquí es donde la formación de pelusa puede ser su trampolín para CSS mantenible.

Si usted no ha oído hablar de pelusa antes, es el análisis estático de código para avisarle de errores obvios en el código base.

Recibe su nombre de rodillos de la pelusa del mundo real, se extiende sobre la parte superior de su trabajo, recogiendo esas bolas antiestéticas de código.

linting no es un concepto nuevo – en particular, se utiliza en el sistema operativo Unix en 1979.

Recientemente hemos visto un fuerte impulso a la pelusa en nuestros proyectos de JavaScript, usando servicios como ESlint o JSHint. ¿Por qué no aplicar los mismos principios a nuestra CSS?

Primeros pasos

Linting el CSS no tiene por qué ser difícil. Si está trabajando en un proyecto pequeño, sencillo que es tan sencillo como copiar y pegar el código CSS en el manual página web CSSLint .

El lema de este sitio web le resumir su reacción a medida que analizar sintácticamente su primer archivo CSS: ‘lastimar sus sentimientos (y ayudarle a codificar mejor)’.

No se deje intimidar por los errores o advertencias le primer encuentro; la clave está en saber por qué su código está produciendo estos errores, por qué son importantes, y (por supuesto) cómo solucionarlos.

En el momento de escribir la última versión estable de Bootstrap (v3.3.6) producido tres errores y advertencias 247.

El siguiente paso es personalizar las reglas de pelusa.

CSSLint rompe todas sus reglas en seis secciones distintas: errores, compatibilidad, accesibilidad, facilidad de mantenimiento y la duplicación, el rendimiento y OOCSS. El reglamento de cada sección se pueden activar de forma individual o desactivar, dependiendo de su proyecto.

Por ejemplo, una de las reglas establece que no se debe utilizar en forma de caja de tamaño en el código, ya que no es soportado por Internet Explorer 7 y por debajo.

La mayoría de las empresas han abandonado el apoyo para este navegador (lo siento si la suya no tiene, le daré un abrazo si alguna vez reunirse), por lo tanto, no es necesaria esta regla.

Apagarlo y de repente las advertencias en Bootstrap van a bajar a 225. No está mal en absoluto.

Aquí tiene que ser estratégico; no se puede simplemente hacer toda su pelusa pase CSS desconectando reglas que dan errores o advertencias.

En su lugar debe peinar a través de la lista de reglas dadas por CSSLint y decidir qué quieres tirar errores, que desea como advertencias y que está dispuesto a dejar mentira.En Holiday Extras nos hicieron eso: el equipo de interfaz de usuario discute la importancia de cada una de las reglas eran y acordaron cuáles debemos cumplir.

corredores de tareas

Si su proyecto utiliza un corredor tarea como MNP, trago o Grunt, entonces el proceso manual de formación de pelusas puede ser quitado con unos pocos comandos simples. Aquí vamos a utilizar para instalar NPM CSSLint a nivel mundial.

NPM instalar csslint -g

Esto instala el CSSLint CLI desde el repositorio de la NGP y le permite ejecutar las pelusas en la línea de comandos. Usted o su equipo ahora se puede comprobar el estado de su trabajo a medida que avanza, que es mucho mejor que ser alertado a todos los errores después de horas de tiempo de desarrollo.

Para ejecutar CSSLint en la línea de comandos:

csslint [opciones] [path-to-file]

Este informará de todos los errores y avisos de acuerdo a la configuración predeterminada. Sin embargo, puede personalizar las reglas por las que pasa en una lista separada por comas de opciones a la desfibradora.

--warnings = --errors = = --ignore

Por ejemplo, si desea cualquier uso de la ! Importante declaración para lanzar un error, podría escribir:

--errors csslint = importante [archivo de ruta-a-]

Esto es grande para la personalización, pero con más de 30 reglas para elegir su línea de comandos va a ser bastante agitado con bastante rapidez. Sin embargo, lo más probable es que va a estar utilizando las mismas reglas una y otra vez – aquí es donde podemos crear un archivo de configuración CSSLint.

config

Usted tendrá que crear un .csslintrc archivo en la raíz de su proyecto o donde quiera que vaya a ejecutar el comando de CSSLint. CSSLint siempre comprueba el directorio de trabajo actual para ver si hay una .csslintrc archivo presente, y utiliza estas reglas sobre la configuración predeterminada.

Argumentos de línea de comandos tienen prioridad sobre cualquier cosa que está en el archivo, por lo que si necesita ajustar algunas reglas para un proyecto específico, entonces yo sugeriría hacer que, en lugar de cambiar las reglas en su archivo de configuración. El archivo de configuración de pelusa que utilizamos en Holiday Extras se puede encontrar aquí .

herramientas de CI

Todas estas herramientas son muy útiles para resolver el problema de las hojas de estilo desordenado y facilidad de mantenimiento, pero todavía se pueden tropezar con cierta resistencia de algunos desarrolladores que se quejan de su código tomando más tiempo para implementar.

La gente no les gusta el cambio, y en este caso pueden conseguir alrededor de él, simplemente no se está ejecutando pelusa en sus archivos.

Si dispone de herramientas de integración continua como Travis o CircleCI (tanto libre si su proyecto es de código abierto) creados, se puede llegar a hacer el trabajo de campo.

Si alguien despliega CSS que no se deshilache, estas herramientas fallarán la acumulación y usted o su equipo de alertar al error.Nada debe ir a través de una solicitud de extracción sin obtener primero la gran luz verde de su herramienta de CI.

preprocesadores

Si utiliza un preprocesador como Sass, Menos o PostCSS, entonces, por supuesto, es una herramienta de pelusa hacia fuera allí para que usted utilice.

La mayoría se basan en CSSLint pero hay algunas excepciones con reglas diferentes. Antes de confiar en ellos en sus proyectos, es necesario asegurarse de que está utilizando ellas por las razones correctas.

Si se trata de la calidad del código que está después, y sus normas de pelusa se cae principalmente en la sección de mantenimiento y la duplicación, a continuación, el código de linting sin procesar es perfecto.

Si usted está buscando para asegurar el código que se sirve tiene un alto nivel de rendimiento, entonces sería más beneficioso para su pelusa CSS procesado, ya que eso es lo que el navegador se consume y donde el rendimiento es lo más importante.

Resumen

Este es sólo el comienzo de un largo camino para asegurar que su CSS mantenga bello. Siempre queremos estar orgullosos de nuestro trabajo, y nadie quiere volver a factor de código sólo porque se ha convertido en un lío monstruoso.

Usted puede entrar en conflicto con algunos desarrolladores lo largo del camino, pero es sorprendente la rapidez condiciones de linting a la gente a código para el mejor.

Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros