CSS Lint

Qué es CSS Lint

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áctivos, de posibles fuentes de errores, o incluso programas que no siguen reglas de estilo.

La extensión CSSLint de Brackets permite validar una hoja de estilo CSS mediante el validador http://csslint.net/.

CSS Lint es un validador de hojas de estilo que nos da dos tipos de avisos:

Los errores deben corregirse necesariamente, porque la hoja de estilo no puede interpretarse correctamente mientras contenga errores. 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.

Errores

CSS Lint nos indica varios tipos de errores, que debemos corregir necesariamente:

Consejos

CSS Lint nos indica toda una serie de consejos para evitar problemas en diferentes ámbitos:

Se puede consultar la lista comentada de consejos de CSS Lint o la lista resumida de consejos.

Estos avisos no tiene por qué corregirse, pero conviene tenerlos en cuenta.

Consejos no atendidos en estos apuntes

Por diferentes motivos, en los ejercicios propuestos en estos apuntes no se siguen algunas de las recomendaciones de CSS Lint. Estos avisos se comentan a continuación.

CSS Lint permite desactivar avisos de forma individual, como se explica en el apartado "Desactivar avisos de CSS Lint" de la lección sobre extensiones de Brackets. En ese apartado se muestra un ejemplo de fichero de configuración de CSS Lint que desactiva los avisos que se comentan a continuación.

Disallow overqualified elements

Explicación en la web CSS Lint: overqualified-elements

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)

CSSLint 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.

Disallow @import

Explicación en la web CSS Lint: import

Si en la hoja de estilo se utilizan reglas-arroba @import, CSS Lint genera un aviso "Disallow @import".

@import url("http://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 href="http://fonts.googleapis.com/css?family=Ribeye+Marrow" rel="stylesheet" type="text/css">
<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.

Headings should only be defined once / Disallow qualified headings

Explicación en la web CSS Lint: unique-headings - qualified-headings

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.


En los ejercicios propuestos en estos apuntes no se hace caso de estos consejos.

Alphabetical order

Explicación en la web CSS Lint: No disponible

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).

Use the bulletproof @font-faxce syntax

Explicación en la web CSS Lint: bulletproof-font-face

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-faxce 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).

Disallow adjoining classes

Explicación en la web CSS Lint: adjoining-classes

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.

Disallow IDs in selectors

Explicación en la web CSS Lint: ids

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.

Beware of broken box size / Disallow use of box-sizing

Explicación en la web CSS Lint: box-model - box-sizing

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: 1px solid black;
  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: 1px solid black;
  margin: 10px;
  padding: 5px;
}

Disallow use of box-sizing - The box-sizing property isn't supported in IE6 and IE7


En los ejercicios propuestos en estos apuntes no se hace caso de ninguno de estos consejos.

Disallow selectors that look like regexs / Disallow unqualified attribute selectors

Explicación en la web CSS Lint: regex-selectors - unqualified-attributes

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 solw.


En los ejercicios propuestos en estos apuntes no se hace caso de ninguno de estos consejos.