CSS Coding Standards y CSSLINT

1. Structure
Cada selector debe estar en diferente lnea, separados por comas, de la siguiente manera
Correcto:
#selector-1, #selector-2, #selector-3 { background: #fff; color: #000; }

Incorrecto:
#selector-1, #selector-2, #selector-3 { background: #fff; color: #000; } #selector-1 { background: #fff; color: #000; }

2. Selectors

Usar minusculas y separar palabras con guiones. Evitar guiones bajos (_) y CamelCases(ej: formPanel) Usar nombres descriptivos que sean interpretables. Evitar usar selectores sobre-calificados (ej: usar .container en vez de div.container)

Correcto:
#comment-form { margin: 1em 0; } input[type="text"] { line-height: 1.1; }

Incorrecto:
#commentForm { /* Avoid camelcase. */ margin: 0; } #comment_form { /* Avoid underscores. */ margin: 0; } div#comment_form { /* Avoid over-qualification. */

margin: 0; } #c1-xr { /* What is a c1-xr?! Use a better name. */ margin: 0; } input[type=text] { /* Should be [type="text"] */ line-height: 110% /* Also doubly incorrect */ }

3. Properties
Las propiedades deberan estar seguidas por dos puntos y una coma(ej: background: #fff). Todas las propiedades deberan estar con letras minsculas Usar cdigo hexadecimal para los colores o rgba() si opcidad es requerida.

4. Vendor Prefixes
Vendor Prefixes deberan estar ordenados del ms largo(-webkit-) hasta el ms corto(sin prefijo).
Mtodo preferible:
.koop-shiny { -webkit-box-shadow: -moz-box-shadow: box-shadow: -webkit-transition: -moz-transition: -ms-transition: -o-transition: transition: } inset 0 0 1px 1px #eee; inset 0 0 1px 1px #eee; inset 0 0 1px 1px #eee; border-color 0.1s; border-color 0.1s; border-color 0.1s; border-color 0.1s; border-color 0.1s;

No preferible:
.okay { -webkit-box-shadow: inset 0 0 1px 1px #eee; -moz-box-shadow: inset 0 0 1px 1px #eee; box-shadow: inset 0 0 1px 1px #eee; } .bad { -webkit-box-shadow: inset 0 0 1px 1px #eee; -moz-box-shadow: inset 0 0 1px 1px #eee; box-shadow: inset 0 0 1px 1px #eee; }

Casos especiales para gradients CSS:

.gradient {

background: #fff; background-image: -webkit-gradient(linear, left bottom, background-image: -webkit-linear-gradient(bottom, #fff, background-image: -moz-linear-gradient(bottom, #fff, background-image: -o-linear-gradient(bottom, #fff, background-image: linear-gradient(to top, #fff, #000); }

left top, from(#fff), to(#000)); #000); #000); #000);

5. Values
Dejar un espacio antes de introducir el valor (ej: background: #fff). Dejar los parntesis sin espacios(ej: background-image: url(images/bg.png)) Terminar siempre con punto y coma (ej: background: #fff;) Usar de preferencia comillas dobles. Los valores en 0 no deberan tener unidades(a menos que sea necesario). Line height no debera tener unidades, a menos que sea necesario definir un valor de pixel especfico. Usar el cero para valores decimales, incluyendo en rgba().

Correcto:
.class { /* Correct usage of quotes */ background-image: url(images/bg.png); font-family: "Helvetica Neue", sans-serif; } .class { /* Correct usage of zero values */ font-family: Georgia, serif; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5), 0 1px 0 #fff; }

Incorrecto:
.class { /* Avoid missing space and semicolon */ background:#fff } .class { /* Avoid adding a unit on a zero value */ margin: 0px 0px 20px 0px; }

6. Commenting
Para secciones y subsecciones:
/** * #.# Section title * * Description of section, whether or not it has media queries, etc.

*/ .selector { float: left; }

Para una lnea:

/* This is a comment about this selector */ .another-selector { position: absolute; top: 0 !important; /* I should explain why this is so !important */ }

Son permitidos comentarios con 80 caracteres por lnea.

7. CSSLINT
CSSLINT es una herramienta que ayuda a los desarrolladores a mejorar su cdigo CSS. Cuenta con un conjunto de reglas las cuales sirven para verificar no solamente la validez sino tambin el estilo. Estas reglas pueden ser configuradas de manera que se pueda aceptar u omitir algunas reglas de validacin. Las reglas estn agrupadas de la siguiente manera:

Possible errors
Las siguientes reglas sealan errores potenciales en CSS.

Beware of box model size Require properties appropriate for display Disallow duplicate properties Disallow empty rules Require use of known properties Avoid un-anchored hovers

Compatibility

Las siguientes reglas sealan problemas de compatibilidad entre navegadores

Disallow adjoining classes Disallow box-sizing Require compatible vendor prefixes Require all gradient definitions Disallow negative text-indent Require standard property with vendor prefix

Require fallback colors Disallow star hack Disallow underscore hack Bulletproof font-face

Performance

Las siguientes reglas estn orientadas a mejorar el rendimiento de CSS, incluyendo el tiempo de ejecucin y el tamao de cdigo.

Don't use too many web fonts Disallow @import Disallow selectors that look like regular expressions Disallow universal selector Disallow unqualified attribute selectors Disallow units for zero values Disallow overqualified elements Require shorthand properties Disallow duplicate background images

Maintainability and Duplication

Estas reglas ayudan a asegurar que nuestro cdigo sea legible y mantenible por otros desarrolladores.

Disallow too many floats Don't use too many font-size declarations Disallow IDs in selectors Disallow !important

Accessibility

Estas reglas estn diseadas para recoger los posibles problemas de accesibilidad

Disallow outline:none

OOCSS

Estas reglas estn basadas en los principios de OOCSS

Disallow qualified headings Headings should only be defined once

8. Omiting Rules
Algunas reglas se basan en la compatibilidad de navegadores, tal es el caso de Disallow box-sizing y Require fallback colors las cuales no rinden en todos los navegadores (Internet Explorer 8 y versiones anteriores).

DISALLOW BOX-SIZING
Es usado para definir la interaccin entre bordes, relleno, ancho, alto, etc. Como se muestra en el ejemplo siguiente:
.mybox { box-sizing: border-box; border: 1px solid black; padding: 5px; width: 100px; }

El problema de esta propiedad, es que no da soporte a Internet Explorer 6 y 7, por consiguiente dichos navegadores interpretan de distinta forma el cdigo CSS.

REQUIRE FALLBACK COLORS

Desde que en CSS3 se aadieron nuevos formatos de colores incluyendo rgba(), hsl(), hsla() trayendo mucha flexibilidad en la manera de definir los colores para los desarrolladores tambin trajo inconvenientes para navegadores anteriores a Internet Explorer 9, es por eso que esta propiedad no da soporte a todos los navegadores en su conjunto.