Feb 13 2010

10 Consejos para mejorar tus CSS




Os vamos a enseñar unas cuantas técnicas que usamos nosotros a la hora de maquetar un site, tanto sea web, como blog, foro…

Los puntos que vamos a ver son:

  1. Resetear tu CSS
  2. Tabular bien tus “classes” CSS
  3. Comentar tus “classes”
  4. Usar clases en lugar de ID’s
  5. Ordenar las “classes”
  6. Diferenciar los links de descarga segun contenido
  7. Hacer clicable toda el área alrededor de los links
  8. Clearfix con hacks para IE6 & IE7
  9. Valida tu código a medida que codifiques.
  10. Los hacks son la última solución.

1.Resetear tu CSS

Cuando escribimos CSS para un navegador no hay problema, el problema radica en cuando el cliente nos pide que sea para más de un navegador, cosa de lo más normal del mundo, ahí es donde empiezan los problemas.

Para estos casos la solución o mejoría para nuestras CSS es “resetearlas”, aún así algunos diseñadores creen que no, esto también depende de cada uno.

Aquí os dejo una hoja de resteo de CSS:

[css] html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big,
cite, code, del, dfn, em, font, img,
ins, kbd, q, s, samp, small, strike,
strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
center, u, b, i {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: normal;
font-style: normal;
font-size: 100%;
font-family: inherit;
vertical-align: baseline
}
body {
line-height: 1
}
:focus {
outline: 0
}
ol, ul {
list-style: none
}
table {
border-collapse: collapse;
border-spacing: 0
}
blockquote:before, blockquote:after, q:before, q:after {
content: ""
}
blockquote, q {
quotes: "" ""
}
input, textarea {
margin: 0;
padding: 0
}
hr {
margin: 0;
padding: 0;
border: 0;
color: #000;
background-color: #000;
height: 1px
}
[/css]

Aquí os dejo otro reseteador de css pero este incluye elementos de HTML5.

[css] html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}

article, aside, dialog, figure, footer, header, hgroup, nav, section {
display:block;
}

nav ul {
list-style:none;
}

blockquote, q {
quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
content:”;
content:none;
}

a, a:link, a:hover, a:active{
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
}

ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}

mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}

del {
text-decoration: line-through;
}

abbr[title], dfn[title] {
border-bottom:1px dotted #000;
cursor:help;
}

table {
border-collapse:collapse;
border-spacing:0;
}

hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}

input, select {
vertical-align:middle;
}
[/css]

2.Tabular bien tus clases CSS

Cuando hablamos de archivos CSS que tienen 20 líneas no supone un problema a la hora de identificar un estilo que deseamos modificar, pero cuando tenemos 600 o más líneas la cosa se empieza a complicar, así que en lugar de escribir esto:

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

Deberíamos hacerlo así, aunque parezca lo mismo os digo que os será de ayuda, escribirlo tal que así:

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

3.Comentar tus classes

És muy importante comentar todas las “classes” posibles, si bien comentar cada class sería una pérdida de tiempo, otra manera sería comentando por bloques, un ejemplo sería algo como…

[css]

/*——–css bloques adsense——–*/
.adsense_afterpost{

width:610px;

margin: 0px 5px 4px 12px;

height:100%;

color:#504945;

font: 13px tahoma, century gothic,Arial,verdana, sans-serif;

background-color:#fff;

border:1px solid #ccc;

padding: 10px;

}

.adsense_img{

width:610px;

margin: 0px 5px 4px 12px;

height:100%;

font: 13px tahoma, century gothic,Arial,verdana, sans-serif;

}
/*——css links——*/
a {

color:#6F615A;

text-decoration:none

}

a:hover {

color:#d53030;

text-decoration:none

}
[/css]

4.Usar clases en lugar de ID’s

¿Porqué? Pués hoy en día se usa mucho JQuery, se suelen usar id’s(#) para llamar a funciones, aunque también lo podríamos hacer con “classes”, pero así si nos acostumbramos, sabremos que las “classes” son usadas solo para estilos, y las id’s para llamadas desde JQuery o cualquier otro framwork o llamadas desde formularios, como por ejemplo formularios de contacta o validación.

5.Ordenar las clases

Una manera de encontrar el código en todo momento que necesitemos es ordenar el código, ya sabemos que cuando se está maquetando vas escribiendo CSS segun tus necesidades, pero si estamos usando lo que hemos comentado en el punto 3, “comentar por bloques”,  una vez que escribes tu class CSS, y una vez hayamos comprobado que la class creada funciona segun nuestras necesidades, lo mejor sería hacer un copiar y pegar en su bloque adecuado.

Así al tener que modificar la clase, o otra persona ajena al proyecto tenga que hacer una modificación, le será más fácil identificar y localizar dicha class.

6.Diferencias los links de descarga segun contenido

[css]

a[href$='.pdf'] {

padding:0 20px 0 0;

background:transparent url(/graphics/icons/pdf.gif) no-repeat center right;

}

[/css]

7.Hacer clicable toda el área alrededor de los links

Usando la propiedad “display” en block en los links (a, anchor) de una lista, conseguiremos que el usuario no tenga que posar el cursor del mouse sobre el texto específicamente para poder hacer clic, sino que quede linqueado todo el recuadro contenedor.

[css]

#navigation li a {

display:block;

}

[/css]

8.Clearfix con hacks para IE6 & IE7

[css]

/* nuevo clearfix */
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

[/css]

9.Valida tu código a medida que codifiques.

Te evitarás muchos dolores de cabeza al final del proceso. Gran parte de problemas de renderizado son consecuencia de marcado no válido. De igual forma, asegúrate de que esa propiedad que tanto te gusta de CSS que estás usando sea estándar y no exclusiva para IE

10.Los hacks son la última solución.

Invierte hoy 30 minutos más en encontrar la alternativa cross-browser y ahórrate horas la semana que viene tratando de modificar tu hoja de estilos.

Aunque a veces por falta de tiempo es bueno usar algun hack, por eso desde hace 1 mes en nuestro caso no damos soporte para IE6. Actualízate.

Esperamos que os haya servido de ayuda el artículo.

Share on Twitter

Escrito por • CSS, Informática • 2 • Tags: , , , , , , , , , , , ,