10+ Consejos sobre CSS

Nov 15, 2011 Diseño web 3 comentarios

Algunos no creen que CSS (Cascade Style Sheets) sea un lenguaje de programación, pero junto a javascript hace de la www un lugar mejor, haciendo que nuestros diseños cobren vida y se reflejen nuestras ideas en los navegadores. Pero esto no es tan sencillo como piensan muchos.

El principal motivo de este post no es que aprendan CSS, sino mostrarles algunos consejos y sugerencias a tener en cuenta cuando se diseña con CSS, porque créanlo o no, todo el mundo tiene algo que decir sobre CSS.

1. La página debe ser usable y legible sin el CSS, teniendo en cuenta que es así como la ven los buscadores y muchos usuarios que usan navegadores de texto, o que no renderizan CSS.

2. Las propiedades (clases o capas) se escriben en minúsculas y sin caracteres especiales, utiliza clases cuando sea algún elemento de la página que se repite más de una vez, por ejemplo, si tienes este código HTML:

Código HTML:

<div id="destacado">
    <h2>Texto Destacado </h2>
    <p> Este es un texto destacado, pero solo habrá uno</p>
</div> 
<p class="noticia">Esto es otra noticia dentro de la página</p>
<p class="noticia">Esta es la tercera noticia, que se repite</p>
<p class="noticia">Y esta es la cuarta noticia</p>

Código CSS:

#destacado {
   color: red;
   font-weight: bold;
}
#destacado h2 {
   font-size: 1.4em;
   font-family: georgia, tahoma, serif;
}
.noticia {
   color: grey;
   font-size: .9em;
}

3. Tabula bien todas las clases, y comenta los bloques por secciones, un ejemplo de una clase sería algo como:

.myclass {
       padding: 4px 20px;
       margin-left: 5px;
       text-decoration: none;
       font-weight: bold;
}

4. La mejor forma de enlazar un archivo .css desde el .html es poniendo la siguiente línea entre las etiquetas “head” del código fuente:

<link rel='stylesheet' href='style.css' type='text/css' media='screen' />
Evita usar @import o insertar el código css junto con el de HTML

5. Cuando definas alguna familia de letras, añade al final algun tipo de letra genérico, como serif, sans-serif, cursive, o monospace y no hace falta que estén entre comillas. Por ejemplo:

 font-family: helvetica, arial, sans-serif

6. Sobre el tamaño de la letra, algunos dicen que es mejor definirlas en % o em debido a que IE no permitía hacer zoom a las letras cuando estaban definidas en pixeles, pero últimamente he leído que es mejor en pixeles.

7. El objetivo de utilizar un reset.css es el de reducir inconsistencias de navegación en cosas como la altura de las líneas por defecto, los márgenes y el tamaño de las fuentes. El razonamiento general fue discutido en un post de Eric Meyer hace unos años. Yo personalmente utilizo el reset.css desarrollado por el mismo Meyer, aunque existen muchas versiones, pero esta es la más genérica y simple.

8. Utiliza algún IDE potente y olvídate de la vista previa en modo de diseño al estilo Dreamweaver. Ya cuando estás escribiendo código HTML y CSS tienes que hacerlo con una idea básica. Yo personalmente uso Aptana Studio , que es un IDE para desarrollo web súper profesional y gratis, con autocompletado en CSS y HTML, corrección de código, por no mencionar que permite crear proyectos usando JavaScript, PHP y Ruby on Rails.

9. Hay algunas técnicas y patrones de diseño que pueden ayudarte a reducir la cantidad de archivos de imágenes y recursos que uses para construir tu página: CSS Sliding Doors , CSS Sprites , etc. Siempre es bueno conocer este tipo de hacks.

10. Es importante también últimamente mantener y preparar la hoja de estilos para impresión y dispositivos móviles, que son una importante fuente de visitas en muchos casos.

11. Si validas tu código a medida que editas tu CSS, te evitarás muchos dolores de cabeza al final del proceso. De igual forma, asegúrate de que esa propiedad que estás utilizando esté disponible en la mayoría de los navegadores, y si vas a usar alguna de las nuevas, por ejemplo text-shadow, tienes que hacer algo como esto:

text-shadow: 1px 1px 1px #000;
-webkit-text-shadow: 1px 1px 1px #000;
-moz-text-shadow: 1px 1px 1px #000;
Esto se debe a que la propiedad text-shadow, está disponible para Webkit (Safari 3+), Opera 9.5, Firefox 3.1, y Konqueror, y se le añaden los prefijos –moz y –webkit para que se pongan bien en navegadores como Chrome y Firefox 3.0 o menor.

12. Y si quieres seguir leyendo sobre CSS, TripwireMagazine ha creado una recopilación de la mayor lista de recursos para CSS jamás mostrada. En ella se enumeran más de 155 recursos hacks y tutoriales.

Compartir:

3 comentarios

Forma parte de nuestra discusión y síguela de cerca

Muy buen articulo. gracias

Autor: Sergio | Fecha: Abr 2, 2012.

A ver "@hdrom: 10+ Consejos sobre CSS: http://t.co/TzceR3qV&quot;

Autor: Jose Rafael Camejo | Fecha: Jun 25, 2012.

Hola, excelentes consejos para tener en cuenta en los diseños. Muchas gracias por compartirlo.!

Autor: De todo un poco Pcs, Programacion y electronica | Fecha: Dic 20, 2014.

Escribe tu comentario

Requerido.

Requerido. No público.

Si tienes alguno.