Share
Hacer que nuestro código sea revisado por un profesional es una excelente manera de mejorar la calidad del código, pero ¿qué sucede si no tiene acceso a un programador de Rockstar? Usted hace la mejor cosa siguiente y toma una "pelusa" para ese idioma.
Hoy, me gustaría hablar un poco sobre CSSLint, una herramienta de análisis de código recientemente lanzada para, lo has adivinado, CSS. Únete a mí después del salto!
Vamos a Wikipedia para una definición:
Lint es una herramienta que marca el uso sospechoso en software escrito en cualquier lenguaje informático..
Básicamente, una pelusa mira nuestro código y verifica las malas prácticas de programación. Variables indefinidas, construcciones ineficientes, cosas así..
Probablemente te estés preguntando por qué necesitarías una herramienta así. Seamos realistas: no todos nosotros tenemos un conocimiento supremo de lo que estamos trabajando o tenemos el lujo de conseguir que nuestro código sea revisado por pares. En estos casos, pegar nuestro código en una pelusa es la mejor opción. Y a diferencia de las herramientas de limpieza, la pelusa escupe información sobre su código y cómo mejorarlo.
Creada por Nicholas Zakas y Nicole Sullivan, CSSLint es una herramienta de código abierto que verifica su sintaxis contra un conjunto de reglas predefinidas para eliminar posibles ineficiencias y asegurarse de que su presentación funcione como es de esperar con pocas sorpresas..
Después de dirigirse al sitio de CSSLint, simplemente puede pegar su CSS de origen y elegir las reglas que desea aplicar. Pulsa el botón de la pelusa y CSSLint comenzará a erosionar tu presunción..
Si eres un adicto a Node como yo, también hay una versión para eso. Solo escribe sudo npm install -g csslint y eres bueno para ir!
Echemos un vistazo rápido a las reglas que CSSLint impone.
Si eres como yo, algunas de las reglas deben haberte desconcertado.
Francamente, sí, no y todo lo demás..
Después de merodear en varios foros de discusión y salas de IRC, descubrí que muchos desarrolladores parecen estar alborotados por las reglas y tal vez sí. Permítame intentar explicar por qué la mayoría de las reglas tienen sentido pero otras no..
Las identificaciones no se deben usar en los selectores porque estas reglas están muy unidas al HTML y no tienen posibilidad de reutilización. Es mucho más preferido usar clases en selectores y luego aplicar una clase a un elemento en la página.
Este golpeó un nervio con muchos desarrolladores ya que estamos bastante acostumbrados a asignar ID para los componentes estructurales principales de un diseño como el encabezado y el pie de página..
CSSLint sostiene que el estilo de dichos elementos, por definición, no se puede reutilizar directamente. Si desea barras laterales dobles en su página, una clase le permite reutilizar el estilo mientras que una ID no.
Tenga en cuenta que solo porque una clase pueda reutilizarse no significa que tenga que ser así. Las clases únicas son perfectamente aceptables y una forma excelente de reutilizar el estilo si surge la necesidad..
Los elementos de encabezado (h1-h6) deben definirse como estilos de nivel superior y no deben incluirse en áreas particulares de la página..
La mayoría de los desarrolladores, incluido yo, se han acostumbrado a escribir encabezados sensibles al contexto. Al igual que en, definimos un estilo separado para los encabezados dependiendo de, digamos, en qué página se muestra. Un argumento a favor de este enfoque es que mueve todos los cruces desde el marcado a la hoja de estilo. Simplemente puede definir una etiqueta y dejar que el CSS caiga en consecuencia.
CSSLint sostiene que este enfoque compromete la previsibilidad de su diseño. Si alguien más tomara su diseño e intentara colocar un encabezado en algún lugar, él / ella tendría que estar al tanto del contexto y la ubicación del elemento. Con los encabezados definidos incondicionalmente, él o ella puede usar un encabezado en cualquier lugar que confíe en su presentación, independientemente de sus padres..
Los elementos de encabezado (h1-h6) deben tener exactamente una regla en un sitio.
Una extensión de la regla anterior para mejorar la previsibilidad de la presentación. Bien o mal, tenga en cuenta que esto básicamente excluye la inclusión de algún tipo de código de reinicio en su hoja de estilo. Cada hoja de reinicio también funciona en sus encabezados y, por lo tanto, CSSLint lo marcará como un error.
Las clases adjuntas se parecen a .foo.bar. Aunque técnicamente está permitido en CSS, Internet Explorer 6 y versiones anteriores no las manejan correctamente..
Con esta regla habilitada, CSSLint marca reglas como .nav.red, La razón oficial es que Internet Explorer 6 y anteriores no juegan bien con el selector. Respeto a los desarrolladores, pero tengo que estar en desacuerdo aquí. Solo porque no funciona con Internet 'Dev-buster' Explorer 6 No es una buena razón para dejar de trabajar con una característica útil..
Los bordes y el relleno añaden espacio fuera del contenido de un elemento. Por lo general, establecer el ancho o la altura junto con los bordes y el relleno es un error porque no obtendrá el resultado visual que está buscando. CSS Lint advierte cuando una regla usa ancho o alto además de relleno y / o borde.
El modelo de caja puede estar roto, pero casi todos los desarrolladores front-end que conozco están íntimamente al tanto de las deficiencias y cómo superar las disparidades con la implementación. ¿Estamos realmente preparados para renunciar a una capa de control porque algunos navegadores más antiguos tienen una implementación diferente??
El uso de fuentes web conlleva implicaciones de rendimiento, ya que los archivos de fuentes pueden ser bastante grandes y algunos navegadores bloquean la representación al descargarlos. Por este motivo, CSS Lint le avisará cuando haya más de cinco fuentes web en una hoja de estilo..
No preveo una situación en la que esté usando más de cinco fuentes en una página, pero creo que sumergirse en este territorio es un poco cuestionable. En todo caso, este es un defecto de diseño que un defecto de desarrollo. Si un desarrollador hace referencia a cinco fuentes distintas en su hoja de estilo, es probable que no sea por accidente..
CSS Lint simplemente comprueba si ha usado float más de 10 veces y, si es así, muestra una advertencia. El uso de estos muchos flotadores generalmente significa que necesita algún tipo de abstracción para lograr el diseño.
Si bien estoy de acuerdo con el argumento de los creadores de que tener más de diez instancias de float es una mala idea, también creo que esto afectará el marcado una vez que haya pasado un tamaño determinado..
Por ejemplo, en una situación en la que desearía flotar dos elementos, tradicionalmente usaría:
? y el estilismo, por métodos tradicionales..
.contenedor-1 ancho: 70%; flotador izquierdo; .container-2 ancho: 30%; flotador izquierdo;
El método CSSLint estaría abstrayendo el flotador de la siguiente manera:
? y el estilo como tal:
.contenedor-1 ancho: 70%; .container-2 ancho: 30%; .float float: left;
Si bien estoy de acuerdo en que este es un enfoque viable, creo que el marcado se llenará significativamente una vez que intente abstraerse más. Prefiero ver una clase que contenga la mayor parte de su estilo en un solo lugar que el desorden del marcado con más de 10 clases. De nuevo, siento que este es un tema subjetivo..
Todas las reglas anteriores se adhieren a las prácticas estándar actuales. Claro, algunas de las reglas tienen poca importancia en el mundo real, como valores cero que no necesitan unidades, o serán capturadas por un IDE decente, como errores de análisis, pero sin embargo, estas son buenas reglas para tener en un conjunto de pruebas de CSS.
CSSLint va a ayudar a muchos desarrolladores en el futuro, pero?
CSSLint es, sin duda, escrito por desarrolladores con grandes credenciales y definitivamente ayudará a muchos desarrolladores y diseñadores en el futuro.
Lo que me parece un poco molesto es que muchas de las reglas controvertidas provienen de Object Oriented CSS, un marco CSS destinado a permitir que los desarrolladores escriban CSS mantenibles. Si bien no tengo nada en contra del marco y su paradigma, tendrías que estar de acuerdo en que es una forma de hacer las cosas, no la manera de hacer las cosas.
A diferencia de JSLint, donde siento que todas las reglas tienen sentido, con CSSLint, siento que me dicen que un estilo de escritura CSS es correcto y que los otros están equivocados. Sería como si alguien me pidiera que renunciara a los Beatles porque los Rolling Stones son su banda preferida..
Las herramientas son solo eso - herramientas.
Por supuesto, nosotros, como grupo, tendemos a ser bastante pegajosos cuando se trata de nuestro código. No nos gusta escuchar que nuestro código podría tener problemas de * jadeo * o estar escrito de una manera completamente diferente.
Lo principal para hacer una nota aquí es que CSSLint es, en última instancia, una herramienta. Simplemente le permite saber que algunas de las áreas mayo tener errores.
CSSLint no tiene que ser el puño de hierro alrededor del cual basas todo tu ego. No hay razón para inclinarse hacia atrás para evitar una advertencia si sabe exactamente lo que está haciendo.
Sí.
En CSS, como en el cálculo integral, hay muchas soluciones para un problema dado. No necesariamente hay una "mejor" forma de hacer las cosas: puede favorecer la legibilidad, mientras que yo puedo favorecer la eficiencia. Lo importante es que te das cuenta de que cada uno de nosotros tiene nuestra forma única de hacer las cosas..
Si no tiene las mismas perspectivas para resolver un problema, puede estar en desacuerdo con otro enfoque e incluso puede resultar cuestionable..
Habiendo dicho eso, nunca hay una buena razón para no aprender cosas nuevas. Mirar los problemas desde la perspectiva de otro desarrollador es una excelente manera de ver si puede aprender algo nuevo..
¿Qué opinas sobre CSSLint? ¿Te resulta útil? ¿Confuso? ¿Te ha ayudado con tus problemas del mundo real? Háganos saber en los comentarios..
Ser excelentes el uno al otro y muchas gracias por leer!
Accentsconagua