Aquí hay algunas prácticas recomendadas de CSS que deberían ayudar a hacer que su sitio sea más a prueba de balas y que su CSS sea más fácil de mantener.
1. Enumere las propiedades CSS3 en el orden correcto.
El orden correcto es: propiedades con prefijo del proveedor seguidas por la propiedad sin prefijo en último lugar. De esta manera, cuando los navegadores eventualmente comiencen a admitir la versión no prefijada de la propiedad (es decir, la implementación final correcta), anulará las otras propiedades y su sitio obtendrá automáticamente el comportamiento más reciente y correcto.
Ejemplo:
- Cómo hacer mi sitio web como fb
- Cómo habilitar HTTPS en WordPress
- Cómo hacer una barra de navegación que responda
- ¿Qué necesito para hacer un sitio web?
- ¿Cuáles son algunos buenos foros de Java donde uno puede aclarar sus dudas?
.selector {
-webkit-transform: rotar (7.5deg);
-moz-transform: rotar (7.5deg);
-ms-transform: rotar (7.5deg);
-o-transform: rotar (7.5deg);
transformar: rotar (7.5deg);
}
2. Use consultas de medios para una mejor experiencia móvil.
Las consultas de medios le permiten especificar estilos que solo surten efecto en pantallas pequeñas. Puede usar consultas de medios para eliminar elementos innecesarios, reducir imágenes grandes para evitar el desplazamiento horizontal y hacer cualquier otra optimización móvil que tenga sentido para usted.
Puede ver algunos ejemplos excelentes de consultas de medios en acción en: http://mediaqueri.es/
Ejemplo:
@media screen y (ancho máximo: 480px) {
/ * Poner estilos móviles aquí * /
}
3. No especifique en exceso sus selectores CSS.
Los selectores CSS demasiado específicos no le hacen ningún bien a nadie. Tardan más tiempo en ejecutarse y son menos reutilizables.
Por ejemplo, esto es lento:
div # nav ul.myList li a.navLink {
/ * Los estilos van aquí * /
}
Esto es mucho mejor:
#nav li a {
/ * Los estilos van aquí * /
}
4. No te excedas con los estilos CSS.
CSS es increíble y te permite controlar exactamente la apariencia de tu página. CSS3 te brinda aún más potencia con animaciones, transiciones, sombras, transformaciones y más. Usa este poder responsablemente. Por favor, no ciegue a sus visitantes con un desorden en movimiento, parpadeo, transformación y sombra de texto. Simple es casi siempre mejor.
5. Evite hacks CSS (como estos: http://www.webdevout.net/css-hacks).
Claro, los hacks CSS pueden ser útiles a veces, pero generalmente se consideran malas prácticas en estos días. Sobre todo porque hay mejores formas de atacar mal los navegadores antiguos. Modernizr (http://www.modernizr.com/) es una excelente alternativa a los hacks CSS.
Ejemplo de Modernizr:
.ie6 #elemento {
/ * Solo se aplica a IE6. * /
}
Incluso este tipo de orientación del navegador no es una práctica muy buena, aunque a veces es la única forma de corregir un error obstinado de representación de IE.
6. Valide su marcado.
Si su CSS no tiene el efecto deseado y está seguro de que su CSS es correcto, intente validar su marcado utilizando el validador W3C (http://validator.w3.org/). Y valide su CSS mientras lo hace, utilizando el validador de CSS (http://jigsaw.w3.org/css-validator/).
7. Minifica tu CSS en producción.
Reducir al mínimo su CSS puede generar grandes mejoras en el tamaño del archivo y hacer que su página inicial se cargue mucho más rápido. Uso el excelente compresor YUI: http://developer.yahoo.com/yui/c…
8. Use un restablecimiento CSS.
Los navegadores aplican diferentes estilos predeterminados a los elementos. En lugar de luchar contra los valores predeterminados, simplemente restablezca todo a cero y aumente a partir de ahí. Serás mejor por eso. Aquí hay una forma de hacerlo. http://meyerweb.com/eric/tools/c…
