CSS Lint es un sitio web que ofrece un validador de hojas de estilo y que Visual Studio Code incorpora parcialmente. Pero actualmente (octubre de 2022) el proyecto puede considerarse abandonado, ya que aunque la página web sigue funcionando, el repositorio GitHub de CSS Lint no se ha modificado desde febrero de 2019, y CSS Lint no ha sacado nuevas versiones desde septiembre de 2016.
lint fue el nombre de un programa creado a finales de los 70 para analizar programas escritos en C en busca de expresiones sintácticamente correctas pero que pudieran dar lugar a errores en los programas. Actualmente, lint se utiliza para referirse a las heramientas que analizan programas o documentos en busca de errores sintácticos, de posibles fuentes de errores, o incluso programas que no siguen reglas de estilo.
CSS Lint es un sitio web que ofrece un validador de hojas de estilo que nos da dos tipos de avisos:
Los errores de sintaxis deben corregirse necesariamente, porque la hoja de estilo no puede interpretarse correctamente mientras contenga errores de sintaxis. Pero los consejos deben tomarse como lo que son: consejos, que en unos casos es conveniente seguir, pero en otros casos no, ya que puede haber motivos para estar en desacuerdo con ellos.
Visual Studio Code incorpora una parte de los avisos de CSS Lint, como se comenta en la lección Validación de HTML y CSS.
CSS Lint indica varios tipos de errores, que debemos corregir necesariamente:
p
color: black;
Parsing Errors - Expected LBRACE at line 1, col 15. (errors)
p {
colour: black;
}
Require use of known properties - Unknown property 'colour'. (known-properties)
p {
color: negro;
}
Require use of known properties - Expected (<color> | inherit) but found 'negro'. (known-properties)
CSS Lint proporciona una serie de consejos para evitar problemas en diferentes ámbitos. Estos avisos no tiene por qué corregirse, ya que no son errores, pero en general conviene tenerlos en cuenta. En la web de CSS Lint se puede consultar la lista comentada de consejos de CSS Lint y la lista resumida de consejos.
Nota: Visual Studio Code incorpora algunos de los consejos de CSSLint, aunque la mayoría están desactivados. Los consejos que muestra VSCode se indican en el listado siguiente con el logotipo de VSCode (
). La configuración predeterminada de Visual Studio Code para estos consejos se indica con los logotipos:
El consejo está desactivado, no se muestra ningún aviso
El consejo se muestra como aviso
El consejo se muestra como errorActualmente (octubre de 2021), los consejos son los siguientes:
Estas reglas identifican posibles errores:
box-model: Beware of box model size
duplicate-properties: Disallow duplicate properties
empty-rules: Disallow empty rules
known-properties: Require use of known properties
Estas reglas identifican problemas de compatibilidad entre navegadores:
CSS Lint desaconseja el uso de clases múltiples, ya que estas no funcionan en Internet Explorer 6 (y anteriores).
div.a.b {
background-color: #E56F60;
}
Disallow adjoining classes - Don't use adjoining classes.
En los ejercicios propuestos en estos apuntes no se hace caso de este consejo. El objetivo de estos apuntes no es tratar las particularidades de navegadores obsoletos.
CSS Lint incluye dos avisos complementarios relativos al modelo de caja.
Por un lado, CSS Lint genera un aviso cuando se utilizan las propiedades border o padding junto con width. Este aviso simplemente nos recuerda que en el modelo de caja CSS 2, el tamaño del borde y del margen interior se añaden al tamaño del elemento definido con la propiedad width.
div {
width: 100px;
border: black 1px solid;
margin: 10px;
padding: 5px;
}
Beware of broken box size. Using width with border can sometimes make elements larger than you expect.
Beware of broken box size. Using width with padding can sometimes make elements larger than you expect.
Ese aviso se puede evitar utilizando la propiedad CSS 3 box-sizing: border-box, que hace que los tamaños del borde y del margen interior se descuenten del tamaño definido con la propiedad width. Pero, al usar esa propiedad, CSS Lint genera un aviso que nos recuerda que esa propiedad no funciona en versiones antiguas de los navegadores.
div {
box-sizing: border-box;
width: 100px;
border: black 1px solid;
margin: 10px;
padding: 5px;
}
Disallow use of box-sizing - The box-sizing property isn't supported in IE 6 and IE 7
En los ejercicios propuestos en estos apuntes no se hace caso de estos consejos.
compatible-vendor-prefixes: Require compatible vendor prefixes
vendor-prefix: Require standard property with vendor prefix
En los ejercicios propuestos en estos apuntes, se utiliza una versión sencilla de la propiedad @font-face que sólo hace referencia a la fuente en formato WOFF y que provoca un aviso de CSS Lint:
@font-face {
font-family: "MyFontFamily";
src: url("myfont.woff")
}
Use the bulletproof @font-face syntax - @font-face declaration doesn't follow the fontspring bulletproof syntax.
CSS Lint aconseja utilizar una declaración @font-face más complicada, que funcione en todos los navegadores (sobre todo, en versiones antiguas de Internet Explorer).
@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf') format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg');
}
En los ejercicios propuestos en estos apuntes se ha utilizado la versión sencilla para no tener que manejar tantos formatos de fuentes y porque el objetivo de estos apuntes no es tratar las particularidades de cada navegador (aunque en algunos casos se comenten).
Estas reglas identifican problema de rendimiento (y tamaño).
import: Disallow @import
Si en la hoja de estilo se utilizan reglas-arroba @import, CSS Lint genera un aviso "Disallow @import".
@import url("https://fonts.googleapis.com/css?family=Ribeye+Marrow");
Disallow @import - @import prevents parallel downloads, use <link> instead. (import)
Cuando se utiliza una regla-arroba @import, el navegador descarga el archivo al que se hace referencia y se espera a que termine la descarga para continuar leyendo la hoja de estilo. Eso ralentiza la carga de la página completa, por lo que CSS Lint aconseja utilizar en su lugar un enlace <link> en la página web (en la hoja de estilo no haría falta escribir nada), ya que la descarga de varios ficheros sí que se gestiona en paralelo. Pero entonces la asignación de la fuente a los elementos se debe hacer también en la página web.
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ribeye+Marrow">
<style>
h1 {
font-family: "RibEye Marrow", cursive;
}
</style>
En los ejercicios propuestos en estos apuntes no se hace caso de este consejo y las fuentes de Google Fonts se llaman desde la hoja de estilo.
En los ejercicios sobre fuentes de iconos incluidos en estos apuntes en los que se utilizan las fuentes de icomoon.io, se utiliza la hoja de estilo generada por icomoon que provoca dos avisos.
Por un lado, un aviso desaconseja el uso de selectores de atributos CSS 3 que utilicen expresiones regulares, en este caso, ^= (empieza por ...) y *= (incluye ...) por su lentitud. Por otro lado, desaconseja el uso de selectores de atributos que no incluyan etiquetas, también debido a su lentitud.
[class^="icon-"], [class*="icon-"] {
...
}
Disallow selectors that look like regexs - Attribute selectors with ^= are slow!
Disallow unqualified attribute selectors - Unqualified attrbiute selectors are known to be slow.
En los ejercicios propuestos en estos apuntes no se hace caso de este consejo.
universal-selector: Disallow universal selector
zero-units: Disallow units for zero values
Si en la hoja de estilo se escribe un selector que contenga una etiqueta y una clase, CSS Lint genera un aviso "Disallow overqualified elements".
p.ejemplo {
color: gray;
}
Disallow overqualified elements - Element (p.ejemplo) is overqualified, just use .ejemplo without element name. (overqualified-elements)
CSS Lint aconseja utilizar selectores universales para facilitar la reutilización de clases (es decir, para que la clase se pueda aplicar a cualquier elemento en la página web).
.ejemplo {
color: gray;
}
CSS Lint admite etiquetas con clase cuando especifican casos particulares de un selector universal:
.ejemplo {
color: blue;
}
p.ejemplo {
color: red;
}
En los ejercicios propuestos en estos apuntes no se hace caso de este consejo y los selectores contienen las etiquetas y las clases, salvo cuando la clase se aplica a varias etiquetas.
Estas reglas ayudan a conseguir un código legible y mantenible por otras personas:
floats: Disallow too many floats
ids: Disallow IDs in selectors
CSS Lint desaconseja el uso de ids en los selectores porque no se pueden reutilizar en una misma página web y aconseja utilizar clases en su lugar.
div#intro {
background-color: #E56F60;
}
Disallow IDs in selectors - Don't use IDs in selectors.
En los ejercicios propuestos en estos apuntes no se hace caso de este consejo ya que en la mayoría de los casos las hojas de estilo sólo se utilizan en una página.
important: Disallow !important
Si en la hoja de estilo no se escriben las propiedades en orden alfabético, CSS Lint genera un aviso "Alphabetical order".
p.intro {
margin-left: 30%;
margin-right: 30%;
font-family: sans-serif;
line-height: 200%;
text-align: justify;
}
Alphabetical order - Rule doesn't have all its properties in alphabetical order.
En los ejercicios propuestos en estos apuntes no se hace caso de este consejo y las propiedades están en otro orden (primero las propiedades relacionadas con el posicionamiento, después las relacionadas con el modelo de caja, después los colores y después el resto de propiedades, como se comenta en la guía de estilo de las hojas de estilo).
Estas reglas identifican posibles problemas de accesibilidad:
En los ejercicios propuestos en estos apuntes no se hace caso de estos consejos.
Estas reglas están basadas en los principios de las CSS orientadas a objetos (OOCSS):
CSS Lint aconseja que en un sitio web todos los títulos (<h1>, <h2>, etc.) se muestren con el mismo estilo. Por ello, CSS Lint genera un aviso si se definen varios estilos de una misma etiqueta de título, o incluso si se escriben selectores que pudieran permitir definir varios estilos de una misma etiqueta de título (aunque no lo hagan).
h2 {
color: blue;
}
h2.aviso {
color: red;
}
Headings should only be defined once - heading (h2) has already been defined.
div h2 {
color: red;
}
Disallow qualified headings - Heading (h2) should not be qualified.