Cuando escribe mucho código CSS, puede experimentar más de un error. Es posible que se necesite alguna herramienta para evitar que sus errores de escritura CSS.
Tal vez, a veces tu error es realmente un error. También es posible que las inconsistencias o los estilos de código poco claro sean simplemente apresurados. Tal vez muchos de ellos parecen triviales (dependiendo de su personalidad), pero a medida que la base del código crece y el tiempo se acumula, muchas personas harán cosas feas al usarlas. Las consecuencias de las cosas no son algo que puedas imaginar.
Intentas controlarte a ti mismo. Sus colegas también lo ayudan cuando es libre de corregir sus errores de manera oportuna. Sin embargo, usted y sus colegas son el fabricante de errores, por lo que al final, inevitablemente son fallas al menos en cierta medida. Más tarde, usted u otros resolverán el problema causado por los errores de CSS en su página.
Ni a usted ni a sus colegas les gusta discutir los errores que cometió porque es vergonzoso. Incluso puede ser frustrante o roto emocionalmente a veces. Una cierta especificación a veces es útil para el mantenimiento de la base de código, como un estilo de escritura consistente, que puede parecer un poco pedante y aburrido cuando se ejecuta manualmente. De lo contrario, mostrarán los elementos de su amor habitual para presumir y terquedad.
Además, es posible que prefiera corregir los errores de manera oportuna en lugar de esperar a que se revise el código y otros para señalar los errores, y modificarlos usted mismo y declarar que no tendrá tales errores nuevamente. Cuando ocurre su error CSS, un comentario oportuno lo ayudará a ahorrar mucho tiempo.
Lo que necesitas es una máquina que evita errores
Necesita una máquina que evite que ocurran errores, pueda comprender CSS y comprenderlo: sus intenciones, preferencias, ideas y debilidades.
Dichas máquinas tendrán limitaciones. No todo es perfecto. Pero esta limitación es diferente a usted y sus colegas. Mientras pueda evitar errores, continuará evitándolos, trabajando incansablemente. Al mismo tiempo, usted y sus colegas siempre pueden mejorar la máquina, ampliar su funcionalidad y debilitar sus limitaciones. Es de código abierto, y las personas de todo el mundo pueden unirse y hacer su parte, otros autores que quieren evitar tener errores de CSS.
Al igual que otros, los autores de CSS necesitan linters
Llamamos a estos programas que evitan los errores "linters". Hay varias mejoras mejores en JavaScript. Eslint en particular, funciona milagrosamente, mostrándonos que un buen linter es muy útil. Pero en CSS no somos tan afortunados, nuestras opciones son muy limitadas: SCSS-Lint a base de rubí con preprocesadores especiales y pelusas CSS anteriores.
Pero todo esto fue antes de que apareciera PostCSS. Además, PostCSS proporciona algunos métodos para construir herramientas CSS más interactivas. Puede analizar cualquier sintaxis de clase CSS en un complemento de árbol de sintaxis abstracto (AST) para su análisis y operación. Y con un analizador personalizado, PostCSS incluso puede manejar patrones no válidos irregulares (como // comentarios)
Las condiciones de madurez ya pueden producir un enlace con características más potentes, impulsadas por PostCSS e inspiradas en las mejores características de SCSS-Lint y Eslint.
Trabajé con algunos amigos en este proyecto, y ahora comenzaré a presentar las herramientas que desarrollamos: Stylelint.
Cosas que puedes hacer con stylelint
El siguiente es un resumen de las funciones probadas en Stylelint, con más de 100 reglas y escalabilidad.
En este punto, si te encuentras un poco impaciente ("OK, ok: creo que Stylelint tendrá efectos de trabajo milagrosos. No es necesario un resumen demasiado"). Simplemente salte a la siguiente sección, aquí solo estoy explicando algunos problemas y dando algunos consejos.
Captura de errores
Algunas reglas de stylelint están diseñadas para identificar errores obvios, como errores de ortografía u omisiones creadas por sus ojos tristes o nublados. Por ejemplo, puede deshabilitar bloques en blanco, valores hexadecimales inválidos, selectores duplicados, nombres de animación sin nombre y sintaxis de gradiente lineal incorrecto.
Las otras reglas son hacer todo lo posible para captar errores más sutiles. Aquí hay una regla: cuando usa propiedades abreviadas (como margin ) que pueden anular sus pares de propiedades (como margin-top ), se emitirá una advertencia porque esto puede ser causado por su negligencia. Además, hay otra regla que le advierte: cuando ocurre un caos, si la regla A aparece antes de la regla B, pero en realidad cubre la Regla B, porque el selector de la Regla A tiene una prioridad más alta (por ejemplo, la Regla A es .foo.bar{・・・} y la Regla B es .foo{・・・} ). Esta es una situación muy difícil.
También hay una regla que utiliza el complemento PostCSS Doiuse para verificar si su navegador admite este estilo. Otro utiliza el complemento CSS-ColorGuard para solicitar una similitud de color para evitar confundir su uso. (Tenga en cuenta: esta es una de las principales ventajas de Stylelint basada en PostCSS: en comparación con otros complementos PostCSS, Stylelint puede solicitar con poco esfuerzo).
Hacer cumplir las mejores prácticas
Si utiliza métodos del sistema en sus hojas de estilo, o tiene una guía de estilo para su código, debe prohibir estos patrones. Stylelint ya proporciona estas características.
Primero, debe controlar su selector duro. Con Stylelint, puede deshabilitar selectores que excedan una cierta especificidad o establecen límites en la profundidad de anidación. Puede deshabilitar los selectores de categoría (como selectores sin IDS) y usar expresiones regulares para nombrar convenciones para el resto de ellos.
Puede prohibir el uso de !important o del navegador que su navegador no admite. Si usa AutoPrefixer (o debería), puede deshabilitar el uso de prefijos de proveedores en la hoja de estilo fuente.
Si desea ser más riguroso, puede pasar un tiempo en la configuración para garantizar una consistencia absoluta, puede hacer cumplir el orden de las propiedades de la hoja de estilo y proporcionar propiedades, valores, funciones y unidades para listas negras y artesanías.
Ejecutar convenciones de estilo de código
Stylelint tiene convenciones para ejecutar automáticamente los estilos de código, para que usted y sus compañeros de equipo no necesiten configurarlo activamente. Estamos comprometidos a hacer que estas reglas sean más completas y flexibles.
Estas reglas están dirigidas principalmente a los espacios, pero también para otros detalles, como comillas, letras superiores y minúsculas, escritura ceros antes de los decimales, utilizando palabras clave, valores deletrean, etc.
Soñando que usted y sus compañeros de equipo pueden establecer una convención de formato (por ejemplo, siempre dejamos un espacio después de declarar un colon) y modificarlo en su configuración de Stylelint, y no lo discutirá nuevamente después de eso. Que se ejecute en el Reino de la Máquina.
Desarrollar y expandir todo
Nicholas Zakas, el creador de Eslint (y CSS Lint), escribió sobre el éxito de Eslint radica en su escalabilidad. Stylelint intenta seguir el liderazgo de Eslint y proporciona a los autores CSS un enlace, que también es extensible.
Puede escribir y publicar su propio complemento de reglas. Ahora tenemos muchas cosas que usar; Y estamos ansiosos por ver los excelentes complementos de otras personas.
La configuración es extensible y, por lo tanto, se puede compartir. En cuanto a los complementos, aprendimos sobre el valor de esta característica de Eslint. Verifique que incluya configuraciones de WordPress y UNTCSS y se haya publicado.
Si no le gustan los consejos incorporados de Stylelint, puede crear su propio estilo a mano o incluso crearlo para su organización. También puede personalizar las reglas utilizadas para proporcionar mensajes de advertencia.
Usando la API Stylelint, puede crear complementos para compiladores de texto y realizar pruebas para que Stylelint se incorpore a todos los aspectos de su flujo de trabajo.
Si tiene ideas sobre extensiones de stylelint, ¡háganoslo saber!
Respuestas a las preguntas esperadas
Puede haber varias preguntas en su mente. Estas son algunas de las explicaciones más comunes:
¿Es posible usar Stylelint en SCSS o menos?
La respuesta es sí, ¡puede usar Stylelint en SCSS y también es compatible con menos! Dado que PostCSS permite analizadores personalizados, Stylelint puede soportar fácilmente una amplia variedad de sintaxis no estándar: puede personalizar un analizador PostCSS para analizar.
Debido a PostCSS Parser, el stylelint admite SCSS, menos y el nuevo Sugarss. Si desea implementar otro soporte de sintaxis personalizado, ¡puede hacerlo con postless!
Por supuesto, hay ciertas reglas que están vinculadas a su sintaxis no estándar (como #{$interpolation} en el selector de ID de SASS). Debido a que Stylelint intenta encubrir el estilo de nuestras hojas de estilo: algunas personas usan CSS estándar, algunas personas usan idiomas extendidos como SCSS, algunas personas usan propiedades personalizadas extrañas, etc., esto inevitablemente creará algunas vulnerabilidades que deben llenarse. Sin embargo, hemos estado lidiando con estos errores que encontramos; Cualquier regla durante este período puede cerrarse o deshabilitarse por completo en una hoja de estilo fila por fila o en un estilo de fila por fila.
¿Stylelint es capaz de usar la futura sintaxis CSS?
¡Sí! Similar a la respuesta mencionada anteriormente: Stylelint puede comprender cualquier cosa que PostCSS comprenda, incluida la habilitación de cualquier sintaxis CSS futura (probablemente a través del complemento PostCSS). De hecho, algunas reglas de Stylelint tratan específicamente con la futura sintaxis CSS y algunas propiedades personalizadas.
La configuración de Stylelint es enorme, ¿dónde debo comenzar?
Recomendamos tres métodos de configuración:
Extender una configuración publicada. Mantenemos los estándares de configuración de stylelint para facilitar al usuario proporcionar un punto de referencia inherente. Y se han anunciado muchas configuraciones. Comience desde cero y agregue una regla a la vez. Por defecto, no se enciende ninguna regla, por lo que al agregar las reglas manualmente sabrá cuál se aplicará y puede comprender cada regla que agregue. Inicie la configuración de Copy-Paste, decida qué opciones usar y elimine selectivamente.
Afortunadamente, no necesita escribir una gran configuración de Stylelint una y otra vez. Puede elegir un estilo que le guste y puede usarlo en cualquier lugar.
¿La forma más fácil de ejecutar Stylelint?
Para la mayoría de las personas, la forma más fácil es a través de su línea de comando.
Si prefiere Gulp Plugin, puede usar Gulp-Stylelint. Para Webpack, hay muchas posibilidades para elegir. Esperamos que estos complementos lo inspire a crear otros complementos de Stylelint, como los de Grunt. (¡Puedes buscar en proyectos de código abierto!)
También puede ejecutar Stylelint utilizando el complemento PostCSS, incluido lo que se incluya en el complemento. ¡Esto significa que puede usar Stylelint en cualquier lugar donde pueda usar PostCSS (que cubre casi todas las herramientas de compilación)!
Además, también hay un complemento de compilación de texto Stylelint para Atom, Texto Sublime, VS Código para proporcionar la retroalimentación más rápida. Para obtener más información, consulte la lista de herramientas complementarias en el sitio web de Stylelint.
Como se muestra a continuación, en la línea de comando, los resultados que espera ver:
Mostrar lo siguiente en Atom;
¿Puede Stylelint arreglar mi error?
No, pero otro llamado StyleFMT está diseñado para hacer esto. Requiere una configuración de stylelint, muy similar a lo que usa en la pelusa, y puede corregir cualquier error. Esperamos que, a medida que el personal de la comunidad contribuya, Stylelint pueda evolucionar para parchar automáticamente los errores que violen las reglas de Stylelint. ¡Ayúdelos a lograr este objetivo!
También puede usar otras herramientas como CSSComb o PerfectList utilizadas junto con Stylelint para arreglar automáticamente y forzar automáticamente descansar.
Use la pelusa para suplementos de restricciones
Hay grandes cantidades de limitaciones en un buen CSS. Es por eso que pasamos mucho tiempo discutiendo métodos como SMACSS, ACSS, BEM, UNTCSS, ITCSS, etc. Todos sabemos que escribir CSS malo es muy fácil, por lo que ya no tenemos miedo de la escritura al estilo CSS, necesitamos establecer una estrategia inteligente en el trabajo y seguir con fuerza.
El objetivo de Stylelint es automatizar la ejecución: proporcionar un conjunto de reglas centrales y un marco conectable que los autores de CSS pueden usar para ejecutar sus propias estrategias.
Vamos a intentarlo y hacernos saber cómo servirle. Si ha relacionado mejores ideas de mejora, como reglas de contribución, mejoras, pruebas, corrige errores, archivos, nuevas ideas o simplemente comentarios, ¡danos un mensaje! De esta manera, todos nuestros desarrolladores en todos los niveles tienen trabajo por hacer.