Me he encontrado con este artículo con unas 50 buenas prácticas en CSS:
- CSS in-line.
- Tamaños de fuente absolutos.
- Marcar con comillas simples las rutas de las imágenes.
- CSS hacks.
- Redeclarar valores heredados.
- Aplicar paddings/borders y un ancho fijo a un elemento.
- !important y position: absolute.
- Nombrar clases/IDs según su apariencia.
- Declaraciones CSS una por línea.
- Comentar el código.
- Organizar el fichero CSS.
- Indentar tanto como sea necesario.
- Hacer el código fácil de leer.
- Usar un sistema común de nombrado.
- Declaraciones cortas alfabéticamente.
- Un «;» no es necesario en la última declaración.
- Si declaras una unidad de 0 px/em/%/… puedes omitir la unidad.
- Mantener contenedores, propiedades, selectores y CSS Hacks al mínimo.
- Selectores de grupo te permiten seleccionar varios elementos de una vez.
- Acortar la notación de colores en hexadecimal.
- Definir las pseudoclases para enlaces en el orden LoVe/HAte.
- Definir los márgenes, paddings y bordes de los elementos en el orden TRouBLed.
- Puedes utilizar selectores hijos.
- Hacer uso de diferentes tipos de medios.
- Nombrar a las clases/IDs según su función, no su apariencia.
- Aprender a explotar la cascada natural de CSS. CSS tiene sofisticadas reglas para la herencia de reglas.
- Puedes usar selectores de atributos. Los selectores de atributos hacen juego con elementos basados en la presencia o valor de atributos.
- Cambiar la capitalización con CSS.
- Ordenar todos los elementos pertenecientes a la cabecera, contenido principal, pie de página… juntos para tener una mejor visión general.
- Echa un vistazo a las guías de estilo de las grandes compañías.
- Busca inspiración en los gurús del diseño.
- Echa un vistazo a BluePrint, un framework de CSS, un montón de grandes ideas se encuentran integradas y documentadas.
- Usa un CSS cheat sheet.
- Construye y prueba tus CSS en los navegadores más avanzados disponibles antes de probarlos en otros, no despues.
- Cuando dudes, valida.
- Prueba incrustado (embebido), lanza importado.
- Mantén una librería de class CSS de ayuda.
- Prueba un compresor CSS online, algunos de los métodos que emplean estos encogedores de CSS para reducir el tamaño de tu fichero CSS pueden ser empleados de una forma menos extrema para hacer tus CSS más aerodinámicos.
- Utiliza la web devoloper toolbar de Firefox.
- Usa un framework CSS como Blueprint.
- Puedes asignar varias clases a un elemento dado.
- Poner valores constantes a través de un documento CSS:
- La opción más simple es sólo incluir el valor del color en cada regla que quieras y usar Buscar y Reemplazar cuando quieras cambiarlos. Esto es trivial cuando utilizas un buen editor de texto.
- Desde que un elemento puede tener más de una clase, puedes hacer clases para cada constante o variable que quieras crear y luego asignar esas clases a los elementos (X)HTML que quieras que les afecte. Desde que un elemento puede tener más de una clase, esto no debería interferir con cualquier uso existente de atributos de la clase. Luego, si quieres cambiar el color, todo lo que necesitas es modificar la clase.
- Usar un lenguaje del lado del servidor para rellenar el CSS.
- Hay algunos ejemplos de lenguajes server-side de preprocesado de CSS ahora. Aparentan ser los más desarrollados.
- Puedes añadir estilos CSS a los RSS feeds.
- Puedes prevenir spam con CSS.
- Puedes ofrecer diseños «customizables» dinámicamente creando ficheros CSS con PHP.
- Hay ideas para diseño de patrones en CSS.
Estoy de acuerdo en muchas de las cosas de este articulo, pero me gustaria que me aclararas porque no usar comillas simples en la ruta hacia la imágen. No entiendo de que manera afecta esto al codigo
3. Marcar con comillas simples las rutas de las imágenes.
Un saludo
Básicamente por 2 motivos:
1. Si no usas comillas (simples o dobles) el fichero CSS tiene menos caracteres, pesa menos y el fichero cargará antes.
2. Por otro lado, en algunos navegadores antiguos, las comillas no funcionan correctamente. Por ejemplo con IE + Mac.
Un saludo.
No sabia lo de IE + Mac muchas gracias David
Hola
Estoy de acuerdo con casi todos los puntos, pero no con el 16.
Se que el punto y coma en la última sentencia no es necesario. Pero la verdad que encuentro poco estético no colocarlo. Ya que todos las sentencias llevan un punto y coma al final.
También añadiría algunos
a) Usar alias o abreviaturas, de ser posible, 4 letras para los IDs y Clases y indicar en los comentarios que significan. Son 4 letras ya que más que 4 queda un alias muy grande y con menos de 4 queda un alias muy pequeño y puede que se repita el mismo alias pero con diferente significado.
un ejemplo:
.dctn { /* … */ }
poner en los comentarios
/*
* Alias
*
* dctn = descripción (description)
*/
b) Utiliza un preprocesador de CSS, cualquier preprocesador como Sass + Compass, Stylus, Less es mejor que escribir CSS puro. Ya que estos extienden las capacidades del CSS y te ayudan con la compatibilidad con los distintos navegadores. Y la curva de aprendizaje es rápida.
c) Utiliza siempre imágenes responsive, añadiendo:
img {
max-width: 100%;
width: 100% \ 9; /* Para IE9 */
}
saludos
Sí, es más por optimización lo de quitar el punto y coma. Aunque yo también lo dejo puesto 🙂
Gracias por comentar y añadir estos interesantes puntos.
Pingback CSS - 50 buenas prácticas en CSS « Snippets for all