Informe y estadísticas sobre el uso de CSS

Alex McPherson ha hecho un interesante estudio sobre cómo se usa CSS.

Su estudio recoge una muestra de las CSS de 10.400 dominios, los 1000 primeros de Alexa y el resto de su lista de correo, es decir, hay de todo, se supone que las 1000 de Alexa tendrán un mayor cuidado en su CSS pero el resto corresponde en teoría a webs más personales o con menor presencia.

El informe es muy extenso, aquí vamos a resaltar algunas curiosidades.

Propiedades CSS

Declaradas 1.528 propiedades diferentes.
Las 5 más usadas: color, width, display, content, background-color
Se han utilizado hacks (* y _ ) para antiguas versiones de IE, siendo las más comunes * zoom y _font-family
Los vendor prefix lo utilizan el 7% de los sitios estudiados aunque los navegadores modernos no lo necesitan.
También han encontrado propiedades no válidas de esas que en producción escribimos con algún error y luego no corregimos: bototm, foat, and heith.
El mayor valor en un z-index es 999999999999999999999999999 o 9.99e26. (LOL) El menor -999999.

Selectores CSS

Los 5 selectores más comunes: body, textarea, h1, pre, h2

El selector más largo mide nada menos que 221 caracteres: .ClientAreaContainer .element-columns-alpha-outer .element-columns-alpha-inner .element-column-right-alpha-outer .element-column-right-alpha-inner .element-column-right-alpha-content:first-child .ContentEditor > p .h2Grey

13.7% Selectores con #id
84.1% Selectores de clase
20.4% Selectores con un :pseudo-selector
0.3% Selectores con un :pseudo-element-selector
7.5% Selectores de elementos HTML

Colores

Para ilustrar su artículo muestra por orden los colores más populares en Internet.

#428BCA es el más utilizado como color de marca seguramente por ser de BootStrap. El 99,6% utiliza el modo de color HEX y el 0,4% rgb/rgba
La media es de 169 declaraciones de color. Este alto número indicaría un uso de color no coherente en muchos sitios.

Unidades de medida

Ganan los píxeles por goleada, seguido del %

77.8% usan px
14.2% usan %
6.1% em
1.6% rem
0.1% pt
0.1% calc()
<0.1% vw
<0.1% vh
<0.1% cm
<0.1% ex
<0.1% in
<0.1% mm
<0.1% pc (1pc == 12pt)
<0.1% vmin
0% ch
0% vmax

La media es 31 medidas para fuentes distintas por sitio, una barbaridad.

Responsive Design

El 64% utiizan algún breakpoint con media queries aunque las medidas utilizadas alrededor de los 990px indican cierto baile de resoluciones trabajadas. 768, 992, y 1200 son las que inclye Bootstrap por defecto.

Frameworks

Gana el popular Bootstrap con el 78,2% seguido de Foundation con el 15,1%

Formatos de imagen

Teniendo en cuenta background-image se ha estimado que

77,7% usa PNG,
el 9,5% GIF
6.7% SVG
5,9% .jpg o .jpeg

Un buen dato aunque seguro que el SVG irá ganando con el tiempo.

El informe completo en Quick Left | Reports on Internet Performance (EN)