Vengo a contaros un truco CSS que aprendí relativamente poco y aunque no es algo explícito de nuestro framework PHP, sí es algo a tener en cuenta a la hora de aplicar buenas prácticas a nuestro código.

Se trata de evitar situaciones en las que rompemos la estructura de nuestro código HTML, evitando hacer cosas como esta:

<a href="/blog/2016/12/01/enlazar-bloques-de-html-con-css">
<div>
<p>"DIV" Y OTRAS ETIQUETAS PESADAS DENTRO DE "A", NO PARECE LA FORMA MÁS CORRECTA</p>
</div>
</a>

Para evitar esto propongo crear una clase CSS con las siguiente propiedas:

<style>
/* ENLAZAR BLOQUES */
.box-link { overflow:hidden; position:relative; }
.box-link a { height:100%; left:0; position:absolute; top:0; width:100%;
</style>

Con la clase box-link le damos solidez a la caja que va a ser enlazada.
Y después le decimos al enlace que ocupe todo el alto y ancho de la caja.

Nuestro ejemplo quedaría ahora de la siguiente manera:

<div class="box-link">
<p>AHORA ESTA CAJA ES UN ENLACE</p>
<a href="/blog/2016/12/01/enlazar-bloques-de-html-con-css"></a>
</div>

Espero que les sea útil.

Gracias por leerme.

La entrada Enlazar bloques de HTML con CSS se publicó primero en KumbiaPHP Framework PHP en español.