El correcto uso de las hojas estilos cascada CSS, es vital para el optimo funcionamiento y accesibilidad de un sitio web.
Aquí te doy 12 reglas de oro para optimizar tus estilos CSS.
12 Reglas de Oro para CSS
- Utiliza un número mínimo de hojas de estilo en tu sitio. Recomiendo usar 1 solo archivo CSS de hojas cascada.
- Utiliza hojas de estilo vinculadas en vez de estilos insertados dentro del documento HTML.
- Utiliza la unidad «em« para fijar el tamaño de letra, y no px. Recuerda que em hace referencia en porcentaje, al tamaño por defecto del contenedor anterior (padre) que contiene el texto en cuestion .
Una medida de letra de 0.5 em, equivale al 50% del tamaño por defecto.
(Si no especificas tamaño de letra para el body, por defecto es de 16 px) - Especifica siempre un tipo de letra genérico por defecto.
- Debes utilizar las siguientes propiedades para controlar las características de las fuente:
«font», «font-family», «font-size», «font-style», «font-variant», y «font-weight».
NO utilices FONT, BASEFONT, «face», y «size». - Si debes usar los elementos HTML para especificar información sobre el tipo de letra, utiliza BIG y SMALL.
- No utilices los elementos BLINK o MARQUEE. Estos elementos no aparecen en ninguna especificación W3C para HTML ya que no son estándares.
En su lugar puedes utilizar «text-decoration: blink», esto producirá el efecto de parpadeo. - Utiliza los estilos CSS para dar estilo al texto, en lugar de representar el texto con imágenes.
Usar texto en lugar de imágenes hará que la información esté disponible para un mayor número de usuarios y permitirá a los usuarios redefinir los estilos y cambiar los colores y tamaños de letra más fácilmente.
Además, favorece a la indexación en buscadores. - Utiliza números hexadecimales en vez de nombres, para especificar colores (ej: #ffee00).
- Utiliza las etiquetas UL para listas sin ordenar y OL para las ordenadas
- Los contenidos deben ser maquetados, ubicados, y alineados mediante las hojas de estilo y NO mediante tablas.
- Utiliza las hojas de estilo para crear líneas y bordes. (no uses imágenes en lo posible)
Aplica estas reglas a tus estilos CSS y verás como tus sitios quedarán mucho mas optimizados para acceder desde cualquier dispositivo.
*** RECURSO RECOMENDADO:
Video-Curso Completo de Maquetación Web:
Saludos!
Cristian
Creo que entre los primeros puntos también se debe incluir el usar correctamente las clases y ids para potenciar el uso de propiedades y estilos entre los objetos.
Saludos,
Si claro Raul, eso tambien es importante.
Lo que pasa es que no lo quise incluir ya que merece una explicacion mas amplia para saber como usar correctamente los IDs y las clases CSS.
Buen aporte.
Saludos!
Cristian
Hola Christian, creo que el em es relativo al tamaño de la fuente del contenedor en el que se está usando, no al body.
Así, si el body es 16px = 1em y tienes un de 32px = 2em respecto al body, si pones margin de 1em no es 16px sinó 32px…
Y si un div tiene un font-size de 2em y a un párrafo de dentro le pones 1em, ese em serán 32px y no 16px….
Te invito a que lo pruebes:
body { font-size: 1em }
h1 { font-size: 2em; margin: 1em; }
div { font-size: 2em;}
p { font-size: 1em;}
parrafo
titulo
parrafo 2
Saludos, Luis
Para evitar la dificultad en la gestión de los ems, se está estableciendo el uso de rem, que es más sencillo y sí se comporta como indicas (o así creo), pero aún no es soportado por todos los navegadores
Si Luis, tienes toda la razon.
La medida en «em» hace referencia al contenedor padre, como bien dice.
En el articulo lo corregi aclarandolo un poco mas.
Saludos!
Cristian
Es la primera vez que entiendo a la perfección el uso de em, y explicado en 4 líneas de texto. Muchas gracias 😉