Pautas al trabajar con CSS
1.- Agrupa tus estilos
Agrupa tus estilos en categorías (Ej: layout, tipografía, formularios…) y visualizalos de forma separada en tu archivo css. Un título y tabla de contenidos tampoco vendría mal.
/* HuddleTogether.com Screen Styles Table of Contents: layout typography forms */ /* layout ----------------------------------------------- */ /* typography ----------------------------------------------- */ /* forms ----------------------------------------------- */
2.- Escoge las categorías
Aún a pesar que tengo unas prácticas comunes, no tengo ninguna plantilla de cómo separar los estilos en categorías.
Para principiantes, casi siempre se debería tener las categorías layout y tipografía. Con la tipografía definimos el look & feel del sitio. Dependiendo de la complejidad, debería separar los estilos de tablas y formularios en sus propias categorías.
Después, trato las secciones físicas de la página con sus propias categorías: header, sidebar, content, y footer por ejemplo. Por último, cojo los estilos específicos de la sección de la página y del contenido y los pongo en su propia categoría (y a veces subcategorías).
3.- Importar Hojas de estilo
Otro método es categorizar los estilos y situarlos en archivos CSS separados que serán importados por un archivo CSS principal. Encuentro este método bueno en teoría pero pero podemos sobreescribir estilos y generar confusión si no tenemos cuidado.
@import url("layout.css");
@import url("typography.css");
@import url("forms.css");
4. Saltos de línea e Indents
Cuando aplicamos estilos a múltiples etiquetas, ids, o clases con atributos comunes, mostramos cada uno en una línea.
También cuando cerramos indents. Esas dos acciones mantienen la columna izquierda limpia así que puedes desmenuzar de un vistazo tu hoja de estilos:
h2,
h3,
h4 {
font-weight: bold;
padding-bottom: 1.5em;
}
h5 {
font-weight: normal;
font-size: 1.5em;
padding-bottom: 0;
}
5. Selectores Descendientes
Usa selectores descendientes de forma abundante para mantener tus estilos agrupados cuidadosamente:
#header {}
#header .logo {}
#header .logo img {}
6. Deshabilitación rápida
#footer{
border-top: 1px solid #e5e5e5;
xborder-bottom: 1px solid #e5e5e5;
}
7. No perder de vista los DIV
Indicador rápido del HTML. Para las etiquetas DIV que están abiertas durante un considerable número de líneas, añade un pequeño comentario tras la etiqueta de cierre que informe sobre la clase o id del DIV abierto.
<div id="content"> <h2></h2> <p></p> <p></p> <p></p> <p></p> </div><!-- end #content-->
Fuente: Huddle Together (Inglés)
1. Intenta utilizar ID sólo para definir grandes zonas de las páginas (#cabecera, #pie, #menu….)
No lo he leído en ningún sitio, pero tengo la sensación de que un ID manda más que un class, con lo que el uso de IDs bloquea un poco la herencia de estilos y en ocasiones hace que espesemos nuestras hojas de estilo. Utiliza pocos IDs para definir grandes zonas y poder así aislar etiquetas HTML como #menu a, #pie a…
2. Define primero las etiquetas, después los IDs y los class
Si no te volverás loco con la herencia de propiedades.
3. Dentro de un estilo, define por este orden: posición, después las dimensiones, márgenes y paddings, tipografía, fondos y bordes.
El orden viene dado por poner primero los elementos que más afectan a la composición de bloques y dejar al final los que menos influyen y que, además, suelen ser los que más se retocan: color, bordes, tipografía…
4. Nunca declares en un mismo estilo un ancho con un padding y/o un borde.
IE añade el padding al ancho (ancho pintado = ancho + paddings laterales) con el alto pasa lo mismo, pero no suele importar. Ffox añade el border al ancho. Si mezclas anchos y paddings/bordes tendrás que recurrir a “hacks” y esto es una lata.
5. No uses hacks
Las cosas tipo
width:20px; /width:18px; /width:20px;
son un pestiño. A veces es mucho mejor meter un div de más para esquivar un hack y, en general, si te lo piensas dos o tres veces, verás que no necesitas ese div de más para esquivarlos.
6. Primero escribe el HTML que necesitarás, después el CSS
Si lo haces así, tendrás un HTML más limpio, ligero, semántico y elegante. Un error muy frecuente cuando empezamos con esto del CSS es usar HTML para pintar cosas: con el tiempo verás que apenas necesitas “div presentacionales”: casi todo se puede pintar desde la CSS.
7. Evita usar imágenes en el HTML más allá del contenido
Si quieres hacer un botón de imprimir con un icono de impresora mejor créale un estilo para añadir la imagen de fondo y deja limpio el HTML, algo tipo
<a href="window.print();" class="imprimir">Imprimir</a>
8. Utiliza colores de fondo
Si tienes una imagen de color rojo de fondo en un div, añade color de fondo rojo, mejorarás la sensación de carga de la página y te asegurarás de que, aunque no se carguen las imágenes, quedarán definidas las diferentes zonas de contenidos que quieres marcar en la página.
9. Comenta el CSS
Se sincero contigo mismo: si no te vas a acordar mañana de por qué pusiste ese “padding-left” coméntalo, siempre hay tiempo para borrarlo.
10. Comenta el HTML
Comentar el cierre de los divs con el id o class del div te ahorrará horas de trabajo
<div id="menu"> ... </div> <!<del>-/menu->
11. No te olvides de las impresoras
Los cuatro gatos que se impriman una página maquetada por ti te agradecerán enormemente una CSS para impresora.
Si usaste IDs para las grandes zonas, ahora es momento de tirar de ellas para ocultar todo lo que es prescindible en impresora, como los menús de navegación, los adwords, formularios inútiles en papel… Fuerza a negro todo el texto posible (ojo con los enlaces) y asegúrate de que tus textos superen el tirón de una impresión en blanco y negro.
Define una tipografía y tamaño que sean agradables para leer impresos y, aunque seas forofo de los ems, plantéate usar puntos en lugar de ems para la versión impresa.
12. Monta las cosas en un navegador decente, y después lo pruébalo en IE
Hacerlo al revés suele dar más problemas.
Fuente: Tocomocho
Excelente artículo, muy recomendable de verdad
Todo me parece estupendo, menos el comentario de los Ids. No es que un Id mande mas que un class, es que son cosas diferentes. Un class se pone en una clase, es decir que define una clase, y puede hacer muchos tags con el mismo class. Un Id marca (define) un único elemento, y solo se puede (debe) de poner en un tag. De eso se deduce que si un estilo aplicado a un ID predomina sobre el estilo aplicado al class,, siguiendo la lógica de css que empieza a aplicar estilos en lo general y va particularizando.
Yo estoy usando bastante javascript, y veo que necesito Ids en muchos contextos, en grandes zonas y en pequeñas, cuando quiro acceder a un elemento desde el javascript necesito que tenga un Id.
Hola Pedro,
En realidad, un Id sí que manda más que un class, de hecho el orden de importancia que sigue es: Id, clase, etiqueta. Y en el caso de existir varias clases aplicadas al mismo tag, prevalece la que primero hayamos definido en nuestro código CSS.
Un ejemplo:
<html> %lt;head> <style> div {height:30px;width:300px;background-color:#000000;} #div {background-color:#ff0000;} .div2 {background-color:#0000ff;} .div {background-color:#336699;} </style> </head> <body> <div id="div" class="div div2"> </div> </body> </html>Haz la prueba.
Con respecto al uso de los Id, no es que se deba poner solo en un tag, es que si quieres respetar los estándares y quieres hacer las cosas bien y que tu html valide, solo puedes utilizarlo una vez.
Un Id prevalece sobre un class, por supuesto; por ello se entiende que tiene más importancia.