15 Hábitos CSS para eliminar la Frustración


Se ha dicho que la clave para el éxito de una civilización es el dominio del sistema alimentario. A menos que un grupo de personas pueden controlar eficazmente las necesidades básicas de supervivencia, nunca alcanzarán el progreso. Asimismo, antes de avanzar a un nivel superior de habilidades CSS, las bases del conocimiento deben convertirse en un instinto de cualquier desarrollador CSS.

Es necesario desarrollar estos hábitos y sentar una base sólida para aplicar técnicas avanzadas de CSS.

1- Utilizar una Hoja de estilos Reset.

Este hábito (junto con algunos otros) se menciona con frecuencia como una buena práctica CSS. El objetivo de disponer de una hoja de estilo reset es reducir las incoherencias entre los navegadores de forma explícita la programación de estilos a la mayoría de los elementos HTML. Esto asegura que cosas como los tamaños de fuente y alturas línea todos hacen lo mismo en distintos navegadores. Además, el restablecimiento despeja los paddings / margin por defecto que algunos navegadores tienen.

No sólo hay que tener en cuenta una hoja de estilo reset para restablecer las incoherencias del navegador, es necesario utilizarlo para darle a cada sitio una base conocida. Esto mejorará la velocidad en el desarrollo de hojas de estilo.

El reset de Eric Meyer y el reset Yahoo son los más utilizados. Además de personalizar una de esas hojas reset podría ser necesario para adaptarse a las necesidades específicas del sitio web.

html{color:#000;background:#FFF;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}
del,ins{text-decoration:none;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0;font-variant:normal;}
sup{vertical-align:baseline;}
sub{vertical-align:baseline;}
legend{color:#000;}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}
input,button,textarea,select{*font-size:100%;}

2- Utilizar taquigrafía CSS.

El uso de CSS declaraciones abreviadas dará lugar a la codificación y depuración más rápida. También podría ahorrar un poco de errores de escritura de múltiples declaraciones.

Cuando una regla tiene múltiples declaraciones similares de un solo selector, como:

border-top: 5px; border-right: 10px; border-bottom: 15px; izquierda: 20px-frontera;

se pueden combinar en una sola línea, como:

border: 5px 10px 15px 20px;

El truco para recordar que la posición de los controles, la dirección es: Arriba, Derecha, Abajo, Izquierda.

Las principales declaraciones que utilizan la abreviatura son: border, margin, padding y background.

Bonus: Acceso directo Hex

Seis dígitos hexadecimales para los colores utilizados en CSS se pueden condensar a tres dígitos si se agrupan en pares idénticos.

Por ejemplo, #FFFFFF se puede escribir #FFF o #990055 se puede escribir #905,  pero #F091A4 no puede acortarse ya que los pares no son idénticos.

3- Documentar CSS.

Comentar el código es una de las cosas más absurdas que se pueden cometer. Los comentarios son para dar una descripción del código realizado, para hacer regresión están los servidores de revisiones.

Para agregar un comentario en la CSS es tan simple como poner

/ * aquí tu comentario * /

Cosas que debemos describir en un comentario.

Estilos de encabezado
Un breve comentario sobre a que afecta directamente en la presentación visual, quien escribió el estilo (recordar que las responsabilidades a la hora de escribir código es muy importante) y cuando se escribió éste código.

Secciones del Código
Poner un comentario de encabezado en grandes porciones de código para las diversas secciones, como los estilos globales, encabezados, barras laterales, contenido principal y el pie para ayudar a localizar el código.

Por ejemplo:

/****************************************/ / * Barra lateral * / / ** **************************************/

Problema con declaraciones
Incluir comentarios junto a las declaraciones dan problemas en algunos navegadores, por ejemplo:

input[type=textbox] / * Problema IE6 * /

Dependiente declaraciones
Incluir comentarios al lado de las cosas que dependen de otras áreas. Así que si hay una altura fija sobre una declaración que podría ser necesario ajustar si cambia el contenido, poner un pequeño comentario al lado de él, indicando qué condiciones debe pasar antes de que se tenga que ajustar.

4- Añadir una descripción de color.

Cuando trabajas con ficheros CSS pequeños, conocer los colores que utilizas no es tan difícil, pero si trabajas con un fichero de más de 2000 líneas de código se vuelve un poco más complejo el comprender a que color hace referencia cada código hexadecimal. Utilizar una descripción de colores también te ayuda a no equivocarte con los colores.

El mejor lugar para la descripción es el encabezado de hoja de estilo, por debajo de toda la documentación.

/*
 * light blue: #4595be
 * dark blue: #367595
 * special link red: #9F1212
 */

5- Recuerde aquellos elementos con posición absoluta a quienes son relativos.

El posicionamiento absoluto suele asustar a las personas que se inician en CSS, pero hay un principio que recordar que suele resolver la mayoría de éstas circustancias.

Cuando uno tiene un selector declarado de position: absolute;  se trata a la página web como una red de xy. De forma predeterminada, la posición 0,0 de la rejilla se encuentra en la parte superior izquierda de la página web. Así que al mover el elemento de posición absoluta, 10 píxeles desde la izquierda y 20 píxeles desde arriba, parte de la posición 0,0 de la pagina web, independientemente de donde se encuentre el código HTML.

Ésta funcionalidad no suele ser la deseada salvo en casos excepcionales. Lo que generalmente se desea es tener el elemento colocado en relación a los padres u otro elemento que lo contiene. Para ello sólo deberás añadir position:relative; al elemento contenedor relativo al deseado. Ésto hace que convierta la posición 0,0 en la parte superior izquierda del elemento relativo sólo visible para el elemento absoluto, el resto de los elementos seguirán como hasta ahora.

El siguiente ejemplo muestra cómo el cuadro rojo se coloca de formas diferentes dependiendo si el contenedor azul dispone del atributo position:relative;

6- Sé responsable al utilizar Hacks CSS.

Por desgracia para quienes desieñan sitios web, hay errores en algunos navegadores, principalmente Internet Explorer 6 y 7 que provocan que algunos estilos no se muestren como se supone deberían verse acorde a las especificaciones CSS. Para poder combatir estas inconsistencias, algunas personas han descubierto hacks que toman ventaja frente a estos fallos de los navegadores, como esconder algunos estilos .

Existen muchos hacks para diversos navegadores, siempre recomiendo que se utilicen aquellos que pasan la validación CSS, recuerda que ésto es siempre importante. A menos que prevalezca la importancia de la compatibilidad con el navegador por cuestiones de negocio frente a la importancia de la validación W3C.

* html #selector { atributo:propiedad; } //IE6
*:first-child+html #selector {atributo:propiedad;} //IE7

También existe la posibilidad de utilizar hojas condicionadas si no te convence la idea de los hacks.

7- Utiliza márgenes cuando estilizas capas.

Aunque este hábito no suele ser mencionado, suele ser muy útil para mantener consistencia en la presentación frente a diferentes navegadores sin tener que añadir más declaraciones para tenerlos a todos sincronizados.

La idea principal en lugar de añadir un “padding” a un elemento contenedor (padre), añade un “margin” al elemento contenido (hijo) para obtener el mismo resultado.

En lugar de utilizar:

#main-content { padding-left: 10px }

Utiliza lo siguiente:

#main-content { }
#main-content #left-column { margin-left: 10px }

Aunque no tiene nada de malo usar el padding, en mis años de construcción de sitios web, he tenido menos problemas cross-browser utilizando diseños con margin.

8- Contenedor Float.

Cuando haces un elemento flotante, no olvides añadir la ocultación al padre de dicho elemento para evitar que los mismos surgan por fuera del mismo (overflow:hidden).

Ejemplo:

ul { overflow: hidden; }
ul li {	float: left; }

Si el contenedor no tiene un overflow:hidden cuando estableces un margin o un border puede no responder como esperas que lo hagan. Esto también despeja el flotante, de modo que por debajo, los elementos  pueden fluir adecuadamente en la estructura HTML. Una sugerencia es limpiar el HTML añadiendo por debajo del elemento flotante:

<div style="clear:both"></div>

Pero hacer esto va en contra del propósito de separar el contenido web de la estructura y consume más tiempo que un simple overflow:hidden.

9- Añade a elementos flotantes el display:inline.

Este hábito es uno de los que soluciona el problema en IE6 llamado “double-margin bug” sin tener que utilizar un hack CSS. En elementos flotantes, IE6 dobla el margen del elemento, un margen de 10px pasa a ser de 20px.

Es fácil de imaginar los problemas que un error como éste puede causarle a tu sitio web, alguno de los elementos flotantes se tornan ocultos o empuja toda la estructura hacia abajo.

A pesar de que IE6 tiene su cuota de mercado (cerca del 13 %) la mayoría de los diseñadores no están tomando el tiempo necesario para que el sitio encaje perfecto en dicho navegador, es un hábito fácil de aprender y hace que tu sitio web sea mejor visto a aquellos pobres que todavía sobreviven a la evolución web.

Simplemente incorpora el hábito de añadir:

display: inline /* IE6 Problem */

Siempre que crees un elemento flotante.

10- Ponte cómodo con los Sprites.

Los Sprites enmascaran el espacio visual de una imagen grande, luego cuando el evento ocurre (típicamente un evento hover) el espacio visual de la imagen cambia y muestra otra porción de la imagen.

Los sprites no solo son más eficientes porque requieren menos llamadas HTTP, sino también son más limpias para los diseñadores web. Muy a menudo los sprites son utilizados para crear estilos de menú de navegación.

Utilizar sprites en el diseño pueden surgir algunos errores para realizar lo que realmente se desea, pero es una habilidad en la que  requiere esforzarse para incorporar el concepto.

Si deseas profundizar al respecto: El Misterio de los  CSS Sprites: Técnicas, Herramientas y Tutoriales.

11- Ten una estructura de ficheros consistente.

Tómate un tiempo para crear y organizar todos los ficheros para el desarrollo del proyecto web. Crea una estructura de plantilla maestra y efectúa el famoso “copy/paste” cada vez que necesites.

La organización de la estructura de ficheros, puede ser la siguiente:

File-structure in 15 CSS Habits to Develop for Frustration-Free Coding

La carpeta “Website Name” debería tener el nombre del proyecto en el que estás trabajando. Esa carpeta contiene todos los ficheros HTML para el sitio, junto con las carpetas de estilos y otros activos.

La carpeta de activos (assets) comúnmente contiene ficheros de documentos grandes, como PDF que necesitan ser descargados del sitio. También puede mantener versiones de imágenes editables como PSD, PNG de Fireworks, en caso que necesites modificar algo a futuro.

La carpeta de estilos se encuentra dividida en tres sub-directorios: css, imágenes y javascript.

  • css – contiene todos los ficheros css como el reset.css, layout.css y main.css.
  • images – contiene todas las imágenes del sitio web.
  • javascript – contiene todas las librerías javascript, plugins y el main.js.

Es útil crear una estructura similar para la mayoría de los sitios web para ser consistentes en donde encontraremos exactamente según que fichero necesitemos para hacer algo.

12- Indenta tus estilos.

Añadir una indentación a una hoja de estilos puede mantener una estructura visual complicada, pero probablemente se te hará más fácil encontrar el código que necesitas. Intenta probar con añadir una indentación en una jerarquía padre/hijo.

13- Utiliza píxeles como tamaño de fuente, no em.

Este hábito suele ser un tema controvertido para la mayoría de la gente que tiene una opinión fuerte, ya sea para tamaños de fuentes fijas o los relativos.

Utilizar tamaños de fuente fija, como PX reduce la frustración de quien desarrolla que utilizar tamaños de fuente relativa como EM ó %.

En su artículo de: Codificando Como En 1999, Cameron Moll apunta a los píxeles y dice:

La carga de cálculo de unidades relativas en un documento CSS se sustituye por la conveniencia de unidades absolutas.

Los tamaños de fuentes relativos fueron una buena idea hace unos años para que las personas con diferentes tamaños de fuente del navegador pudieran visualizar el sitio ajustándose al tamaño de fuente de su navegador. Pero ahora la mayoría de los navegadores pueden hacer zoom y ajustar de manera más inteligente una medición relativa, ya no es necesario adaptar el sitio.

La medida relativa se convierte en un problema porque el tamaño de las fuentes de medición heredan de los padres, cae en cascada. Por ejemplo:

body ( font-size: 62,5% ) //hace un font-size: 1em igual a 10px.

Si #blog-content tiene que ser 14px, la regla es:

#blog-content ( font-size: 1.4em; )

Ahora si la etiqueta H3 que se encuentra dentro del tag de #blog-content tiene que ser de 20 píxeles uno puede asumir:

#blog-content { font-size: 1.4em; }
#blog-content h3 { font-size: 2.0em; }

Esto sería correcto, pero es aquí donde se produce el problema de la relatividad. Debido a que ahora 2.0em es relativa a 1.4em especificada en #blog-content, en realidad el tamaño de fuente pasará a ser de 28px.

El tamaño de fuente relativo puede prestarse a confusión, por ello es recomendable pasarse a una unidad fija de medida para evitar problemas indebidos.

Mantenerse al día con el tamaño de fuente relativo puede prestarse a confusión. Stick a la utilización de una unidad fija de medida para tamaños de fuente para evitar problemas indebida.

14- Limita las pseudo-clases a los tags anchor (<a href>)

Los navegadores más modernos no tienen que lidiar con éste problema, pero es importante recordar que un sitio web necesita ser visible con navegadores antiguos, como el IE6 que todavía conserva una gran cuota de mercado.

El problema es que navegadores antiguos solamente reconocen pseudo-clases como :hover en el tag anchor. Algo como lo siguiente no funcionaría en IE6:

#header ul li:hover { background-color: #900 }

Esta cuestión puede causar problemas reales de funcionalidad, algo como un menú dropdown está basado en el evento li:hover. La gente que visualiza el sitio en IE6 nunca podrá ver el dropdown y eso puede causar dificultades para navegar por la página

Una solución es utilizar jQuery para ese tipo de efectos.

15- Evitar problemas de selectores.

Asegúrese  de tener suficientes selectores de peso para prevenir cascadas no deseadas.

La forma en que el navegador determina qué estilo se va a aplicar a un elemento con múltiples declaraciones está determinada por su especificidad

Cuanto más se especifica un selector CSS es el estilo que más peso tiene y que finalmente se aplicará al elemento HTML.

Si algunas reglas no se aplican como se desea, compruebe si el problema está en su especificidad. Podría ser tan simple la solución como una adición de un #id-nombre al comienzo del selector.

Utilice los selectores de elemento cuando sea posible.

En lugar de:

main-content .main-header

utilice:

#main-content h1

Tenga cuidado con los selectores agrupación.

Los selectores de agrupación pueden ser un método de ahorro de tiempo cuando se trata de declaraciones que no son parientes, como

.main-content div, .main-content p { color: #000; }

Pero pueden causar problemas cuando se utiliza una declaración relativa, tales como:

.main-content div, .main-content p { line-height: 1.3em; }

Porque ahora todo el texto dentro del div tiene una línea 1.3em de altura que se le aplica, pero ahora cualquier elemento p dentro de un div tiene un 1.3em adicionales para ellos.

También, a veces la agrupación de varios selectores pueden agregar más peso de lo que se desea, que a su vez provoca otro estilo no deseado.

Acerca de fabiancouto

Nacido en Montevideo, Desarrollador de software en @brujula_talk & owner de @TrabajoBalear. Adicto a la ironía y al sarcasmo. En busca de sabiduría y felicidad.

Publicado el 13 agosto, 2010 en Buenas Prácticas, CSS, Genérico, Tecnología, XHTML y etiquetado en , , , , , , , , , , , , , , , , , . Guarda el enlace permanente. 9 comentarios.

  1. Fabián, muy buena tu página, pero tienes un problema con el ancho central que no permite ver todo el escrito.

  2. Ops, un artículo impresionante, con un error CSS en su mismo diseño, al menos en Firefox. Una pena porque es buenísimo

  1. Pingback: Articulo Indexado en la Blogosfera de Sysmaya

  2. Pingback: Lo mejor de mi RSS del 9 al 15 de agosto | Superlinux

  3. Pingback: Lo mejor de mi RSS del 9 al 15 de agosto | Linux Hispano

  4. Pingback: Bitacoras.com

  5. Pingback: 15 Hábitos CSS para eliminar la Frustración | Noticias - d2.com.es

  6. Pingback: 15 Hábitos CSS para eliminar la Frustración

  7. Pingback: 15 Hábitos CSS para eliminar la Frustración - apezz.com

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: