gomflo

CSS tiene la distinción de ser una de las mejores tecnologías web que los nuevos tienden por aprender. La razón de esto es que CSS no es visto como algo grande ó serio como un lenguaje de programación como C# ó Python, y por tal razón muchos novatos piensan que no existen las mejores practicas en CSS.

El resultado de esto es que los diseñadores web tienen muy poco conocimiento de CSS y sus problemas, llevandolos a diseños mal elaborados y horas improductivas tratando de resolver un problema. Aquí están los 5 problemas más comunes que los diseñadores web cometen.

1. Sopa de DIVs

El más grande pecado de un novato en CSS es la sopa de DIVs. Esto pasa cuando existen demasiados DIVs en el documento para lograr (algunas veces muy simple) algún efecto. La sopa de DIVs crea serios problemas: las paginas cargan mas lento, el parseo del DOM es más lento, mas CSS necesita ser escrito, y el código vuelve menos mantenible.

La principal causa de la sopa de DIVs es un mal entendido básico de como las hojas de estilo funcionan. Por ejemplo, un diseñador desea crear 3 divs anidados y aplicar un estilo particular para cada DIV, digamos background-color en el primero, margin y padding en el segundo, y font-size en el tercero. Lo que el diseñador no entiende es que a menos que esta estructura sea absolutamente necesaria, todas estas propiedades pueden ser combinadas y usar un solo DIV.

<div style="background: #ccc;">
  <div style="margin: 10px; padding:10px;">
    <div style="font-size: 1.2em;"></div>
  </div>
</div>

Vaya que código tan desordenado, no parecera mentira, pero estos ojos lo han visto, así que es verdad. Ahora veamos como lo podemos mejorar.

<div id="post-23">..</div>

#post-23 {
  background: #CCC;
  margin: 10px;
  padding: 10px;
  font-size: 1.2em;
}

Mas intuitivo, sencillo y menos código vuelve más facil el mantenimiento.

Otra razón de la sopa de DIVs aparece por el deseo de usar las etiquetas DIV en lugar de etiquetas mas apropiadas como H1/H2/H3 ó UL/OL y LI. Esta practica debera ser evitada ya que crea problemas con exploradores antiguos ó exploradores movibles, escribamos webs mas semanticas.

2. ID vs Class

Este es un problema común con diseñadores de CSS que no han aprendido el lado lógico de este. Para clarificar: IDs son para un solo elemento y clases son para muchos elementos. Piensa en esto como una distinción entre tu identidad y la ciudad donde vives. un ID es “Victor H. Gomez”, pero una clase (class) es “Nuevo Leon, México”. Hay mucha gente que vive en Nuevo Leon, México, y todos ellos deben seguir algun tipo de ley o regla, como los impuestos, el reglamento de transito, etc. Pero Victor H. Gomez es un individuo único y una poca cantidad de reglas aplican para el, como podría ser su peso y su altura.

De cualquier manera no hay que aplicarle clases a todas las colleciones de elementos. Esto de nuevo, es relacionado en como las hojas de estilo funcionan. Si puedes encapsular una colección de elementos en un ID único, ya no necesitaras el atributo class dentro de estos. Esto ahorra ancho de banda y tiempo de desarrollo, consideremos el siguiente ejemplo:

<div class="color-azul"></div>
<div class="color-azul"></div>
<div class="color-azul"></div>
<div class="color-azul"></div>
<div class="color-azul"></div>

.color-azul { color: blue; }

Como se puede observar son 5 divs con la clase color-azul, esto lo debemos evitar, ya que en dado caso que necesitemos cambiar el nombre de la clase por cualquier razón, va ser necesario invertir más tiempo en cambiarle la clase a todos los elementos, me pueden decir que utilizan la super función buscar y remplazar de su editor favorito, pero esa no es la idea. Ahora veamos el siguiente ejemplo que haria lo mismo que el bloque de código anterior.

<div id="color-azul">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

#color-azul div { color: blue; }

Agregamos un div más pero tiene un valor especifico, ahora tenemos ID unico y de esa manera nos ahorramos 5 clases (class).

3. Ignorar los “atajos”

Sigo viendo paginas que declaran border widths del modo más largo, con border-left-width, border-right-width, border-top-width, y border-bottom-width, Leer esta lista es trabajo duro, pero escribirlo y mantenerlo es un doble inconveniente. Diseñadores CSS inmediatamente deberian aprender como reducir lo escrito necesario para darle estilo a los elementos.

El más importante patrón es que para los widths. Se vera repeteido este patrón en otras propiedades, asi que es importante aprenderlo. Debera ser de la siguiente manera: arriba, derecha, abajo, izquierda. Puedes pensar en esto como si fueran las manesillas del reloj empezando desde arriba. Lo que este patrón significa es que cuando especificas las unidades con este atajo seran aplicadas al lado de arriba primero, siguiendole el lado derecho, el lado de abajo, y finalmente el lado izquierdo.

border-top-width:1px;
border-left-width:1px;
border-right-width:1px;
border-bottom-width:1px;

Lo anterior tambien equivale a lo siguiente:

border-width: 1px 1px 1px 1px;

Notaras en el ejemplo anterior, el ancho de todos los bordes es el mismo. Existe un atajo para esta situacion tambien:

border-width: 1px;

Y si quieres que los anchos sean los mismos pero solo arriba y abajo y en los lados sea otro diferente, no hay problema, tambien existe un atajo para esta situación:

border-width: 1px 2px;

Lo anterior aplica el borde de 1px arriba y abajo y 2px en los lados izquierda y derecha.

Finalmente, existen atajos para la mayoria de las declaraciones, Aqui hay una lista corta:

font: estilo, peso, tamaño, fuente.

Ejemplo:

font: italic bold 1.2em Helvetica

border: ancho, estilo, color.

Ejemplo:

border:1px solid #ccc

Nota: no puedes establecer anchos usando el atajo anterior. Necesitaras declarar necesariamente los anchos separadamente.

background: color, imagen, repetición.

Ejemplo:

background: #000 url(imagen.png) no-repeat

Nota: la imagen aparece por encima del color, entonces si la imagen es transparente o si no se repite, se vera el color debajo de esta. Para evitar esto declarar el color en transparente (transparent).

Colores escritos en hex pueden ser reducidos. En vez de #111111, escribe #111. En vez de #44ff77, escribe #4f7. En vez de #00ffff, escribe #0ff

4. Ignorar el Doctype

Los exploradores web fueron diseñados para interpretar código mal escrito, como etiquetas mal cerradas, etiquetas que no estan cerradas, etiquetas cerradas pero nunca abiertas, y la lista continua. Esto no evita que debas aprender las buenas practicas en HTML y CSS, ya que diferentes exploradores mostraran el código mal escrito de diferente manera, llevandonos a dolores de cabeza innecesarios. Una de las mejores practicas que deberias adoptar es la declaración del DOCTYPE.

En los malos y antiguos dias del HTML4, era necesario escoger entre un doctype estricto, un doctype transicional ó algo completamente diferente. Afortunadamente, exploradores desde el IE6 hasta el de hoy entienden el nuevo doctype HMTL5. Lo que hace esta declaración de DOCTYPE es poner el explorador en un modo estandar, el opuesto al modo quirks. El DOCTYPE es muy facil declararlo, solo recuerda de poner lo siguiento en la primera linea de tu HTML.

<!doctype html>

Haz un hábito de declarar el doctype primero.

5. Uso incorrecto de las unidades de medida

El tamaño de las fuentes no deben ser declarados en pixeles. Aunque 1024×768 es la resolución mas común, anchos mas largos y altos mas altos se estan volviendo normales alrededor del mundo. Esto quiere decir que la gente esta leyendo textos más pequeños en pantallas mas grandes. Creo la mayoria de los diseñadores estaran de acuerdo que gran parte del diseño web es la tipografia. El texto deberia y debe ser flexible, ya que leer 10px Verdana en una pantalla de 1920x no solo es doloroso, es perdidad de tiempo.

¿La solución a este problema?. Declara el tamaño de las fuentes usando la unidad em, como esto: font-size:1.2em, Esto quiere decir que el tamaño de la fuente de un particular elemento es 1.2 veces el tamaño de fuente predeterminada, que es 16px en Firefox e Internet Explorer en este caso 1.2em equivale a 19.2px. Un beneficio muy importante de esta pratica es que el tamaño de la fuente de todo el sitio puede ser incrementado simplemente cambiando la etiqueta BODY (o cualquier otra etiqueta contenedora) usando la propiedad font-size. Hacer esto con las medidas en pixeles es imposible, a menos que alguien use la funcionde zoom del explorador, El tamaño de las fuentes tampoco deberia ser declarado en puntos (pt), centimetros (cm), o cualquier otro unidad de medidad. Evita los porcientos, ya que 1em es funcionalmente equivalente al 100%.