Haciendo el código tan bonito como el diseño mismo

Haciendo el código tan bonito como el diseño mismo

El diseño de un sitio web obtiene toda su gloria. Cuando alguien lo visita, y entonces escuchas decir de lo grandioso que es el diseño del mismo, pero, tu alguna vez has escuchado a alguien decir ¿qué tan impresionante es el código? ¡Nunca!.
Regularmente la gente no puede ver el código, Al fin y al cabo no les importa como luce el código. Esta es precisamente la razón por la que hay tanto código horrible en la web de hoy. La gente no lo ve de modo que los desarrolladores no creen que el código limpio sea importante, pero lo es.
Es realmente muy raro encontrar un sitio con código limpiamente escrito, inclusive de grandes compañías que tienen el dinero para pagarle a muy buenos desarrolladores. De cualquier modo, Es muy importante tener un código hermoso como tener un diseño que también lo sea.

¿Por qué debería importar?

La mayoría de las veces, el código feo funciona también como el código limpio. Entonces ¿por qué debe interesar si el código en bonito o no?

Más rápido de actualizar – El código organizado es más fácil de navegar y actualizar. Ahórrate algo de tiempo en el futuro haciendo las cosas más fáciles de encontrar.

Cargas más Rápidas – A menudo, codificación limpia usa menos código, lo que significa cargas más rápidas.
Profesionalidad – ¿Tu pensarías en pagarle a alguien quien te da un montón de código que no puedes leer, o a alguien que te entrega el código correctamente organizado?, ¿Cuál va a hacer tu vida más sencilla?¿Cual es más profesional?

Encontrar los Errores – Con el código organizado, hay un menor chance de olvidar cerrar una etiqueta o que las hallas cerrado en el orden incorrecto. Además, que es mucho más rápido de encontrarlo.
Embellece tu CSS

Existen varias formas que te enseñaran a organizar tu CSS. Claro que la belleza esta en el ojo de quien la mira, así que tal vez te encuentres que lo que funciona para mí no funcione para ti.

Experimenta con distintas formas en la que organices el código que funcione para ti.

Todo en una sola línea – Colocar una regla completa en una sola línea acorta el tamaño del documento, haciendo que el archivo pese menos, sea más fácil de leer y además puedas encontrar más rápido lo que necesitas. Por ejemplo en vez de esto:

div {
background: #FFF;
font-style: italic;
font-size: 18px;
margin: 20px;
padding: 10px;
font-weight: bold;
}

Puedes hacer esto:

div { background: #FFF; font-style: italic; font-size: 18px; margin: 20px; }

Agrupa Elementos similares – A mí me gusta agrupar reglas similares y dejarlas juntas, de esa forma puedo encontrar lo que esté buscando dependiendo de la sección. Por ejemplo:

div.element {}
div.element a {}
div.element ul {}
div.element .class p {}
 
div.other {}
div.other a {}
div.other p.class {}

Seccionando – Es también algo bueno seccionar tu CSS por el área en el que se encuentra localizado. Yo uso por ejemplo comentarios para llamar la atención a secciones, una selección muy común es la siguiente: Cabecera, Navegación, Final de Página, Página principal, Subpáginas.

Semántica – la semántica se sobretodo el dar a tus objetos los nombres apropiados. Nombra tus clases e identificadores con los nombres pertinentes, como por ejemplo: “Cabecera”, “Navegación”, o “fondo.jpg”. Esto permitirá que cualquiera que lo necesite pueda actualizar el sitio y puede encontrar lo que esté buscando rápidamente.

Escritura-rápida – Disminuyen el “Background”, fuentes, ajustes, márgenes y propiedades de los bordes usando Escritura-rápida. En vez de usar una propiedad por cada elemento puedes combinarlos. Por ejemplo en vez de esto:

div { padding-left: 20px; padding-right: 30px;  padding-top: 50px; padding-bottom: 10px; }

Haz esto:

div { padding: 50px 30px 10px 20px; }

Un “tip” para que organices tu CSS, yo personalmente odio es tener que tabular las reglas en jerarquías. En mi opinión. Esto gasta espacio y hace las cosas más difíciles de leer, pero puedes intentar a ver cual funciona para ti.


Organizando tu HTML

Organizar tu HTML es mucho más rápido y fácil. Aquí hay algunos consejos.

Tabular – Es muy importante que tabules tu código HTML de forma apropiada, de otro modo se va a volver en una tarea casi imposible leer o encontrar ese “div” que olvidaste cerrar. La convención dice que hay que tabular por cada uno de los “div” interiores.

Separa con espacios – Es bueno colocar algunas líneas en blanco entre secciones de tu código, pero demasiadas puede ser un problema. Yo tiendo a separar los div principales.

Semántica – Del mismo modo que el CSS las clases y los Identificadores deben ser nombrados de forma apropiada, esto incluye imágenes y video. Esto puede salvarte tiempo en el futuro. Tu imagen de fondo debería llamarse bkg.jpg (o algo similar), en cambio no debería ser image24345.jpg.


¿Realmente lo debo hacer?

Claro está, tú no debes organizar tu código para que luzca bien, después de todo, nadie realmente va a mirarlo, ¿Cierto?

Falso. Si tu estas planeando en programar para vivir, muchas personas van a mirar tu código. De hecho, puedes estar perdiendo oportunidades de negocio sin saberlo. Muchos clientes potenciales van a pasar de tu código si tu portafolio y tu propio sitio está lleno de código horrible.

Esta fue una traducción de un Articulo Originalmente escrito por:
Articulo Original de Amber Weinberg
http://www.amberweinberg.com/making-your-code-as-beautiful-as-the-design-itself/