El proceso utópico en el desarrollo de un website sigue una serie de pasos tan marcados que podríamos designar grupos de tareas a un perfil profesional específico. Lo utópico es complicado de alcanzar, especialmente cuando las estimaciones de tiempo de producción se acortan en favor de un mejor servicio. Y es ahí donde nacen perfiles mixtos (diseñador de interacción/diseñador web; diseñador web/maquetador; maquetador/desarrollador).

A su vez, estos perfiles mixtos provocan que el desarrollo de una tarea pase por varias manos —en este caso, la creación de la Hoja de Estilos—. ¿Quieres ahorrarte más de un mail o reunión con tus propios compañeros? ¿Quieres hacer el trabajo más fácil a lo demás y obtener ese detalle de vuelta? Os dejo aqui algunas ideas que he experimentado en los últimos años y que harán el trabajo mucho más fluido cuando el código baila de un editor de texto a otro:

Crea un arsenal de estilos genéricos

¿Cuantas veces has tenido que crear una clase nueva porque, en una sección determinada, la caja necesitaba un padding superior de 10 pixels? ¿Cuántas veces has tenido que añadir otra clase para pintar de una manera especial un único texto específico? ¿Cuántas veces has necesitado modificar el alto de un contenedor con la llegada, a última hora, de una caja diferente?

Todo esto provoca ruido en tu Hoja de Estilos y hace que lo que comenzaste creando de manera ordenada se transforme en un gallinero de clases específicas para un sólo elemento. Esa no es la idea: ya sabes que una clase debe aportar valor a un cojunto de elementos similares, sino estaríamos hablando de un identificador. ¿Cómo preverlo? Crea un arsenal de clases con valores genéricos:

/* VALORES GENERICOS */

/* limpiar flotacion */
.clear {clear:both;}

/* flotacion */
.flota-izquierda {float:left;}
.flota-derecha {float:right;}

/* textos */
.alineacion-derecha {text-align:right;}
.alineacion-izquierda {text-align:left;}
.justificado {text-align:justify;}
.centrado {text-align:center;}
.subrayado {text-decoration:underline;}
.tachado {text-decoration:line-through;}

/* disposicion */
.disponer-bloque		{display:block;}
.disponer-linea		{display:inline;}
.oculto			{display:none;}

/* padding 5  (repetir con padding 10, 15, 20, etc...) */
.padding-5 {padding: 5px !important;}
.padding-top-5 {padding-top: 5px !important;}
.padding-right-5 {padding-right: 5px !important;}
.padding-botom-5 {padding-bottom: 5px !important;}
.padding-left-5 {padding-left: 5px !important;}

/* margin 5 (repetir con margin 10, 15, 20, etc...) */
.margin-5 {margin: 5px !important;}
.margin-top-5 {margin-top: 5px !important;}
.margin-right-5 {margin-right: 5px !important;}
.margin-botom-5 {margin-bottom: 5px !important;}
.margin-left-5 {margin-left: 5px !important;}

/* anchos genericos (agregar mas si necesitas) */
.width150 {width:150px !important;}
.width140 {width:140px !important;}
.width130 {width:130px !important;}
.width120 {width:120px !important;}
.width110 {width:110px !important;}
.width100 {width:100px !important;}

/* alturas genericas  (agregar mas si necesitas) */
.height150 {height:150px !important;}
.height140 {height:140px !important;}
.height130 {height:130px !important;}
.height120 {height:120px !important;}
.height110 {height:110px !important;}

Justificando el uso de !important;

Es cierto que se abusa en esta propuesta del valor !important;. La idea es anteponer estos valores a cualquier otro indicado a un elemento HTML. Teniendo presente que estos valores genéricos se deberían situar al principio de nuestra Hoja de Estilos, la propiedad !important lo que hará es luchar contra la herencia provocada por la cascada.

Modo de empleo

De esta manera si tuviéramos que modificar valores en una caja ya creada, del tipo:

Lorem ipsum dolor sit amet

Ut eget urna dui, in iaculis augue.
Más información

Podríamos hacerlo cómodamente con los valores de nuestro “arsenal”:

Lorem ipsum dolor sit amet

Ut eget urna dui, in iaculis augue.
Más información

Notas

• La idea es nombrar las clases con la propiedad que contienen para comunicar al compañero los últimos cambios aportados al elemento a través de la maquetación . Leyendo el código podemos averiguar qué modificaciones se han realizado
• Insisto: el motivo de crear el arsenal es agilizar las correcciones de última hora o indicar salvedades en cajas y otros elementos. Aunque podríamos construir una página completa con un buen arsenal de estilos, no lo aconsejo. Para maquetar normalmente se ha de seguir los conceptos generales en el desarrollo de las Hojas de Estilo (cascada y herencia).

El el siguiente artículo veremos otras metodologías que nos facilitarán el trabajo y desarrollo en equipo de las Hojas de Estilo.

Parece que el plugin Syntax Highlighter provoca algunos fallos de presentación en el código CSS propuesto. Si quieres copiarlo, utiliza la vista de texto plano por favor. Disculpa las molestias.