Hace un par de semanas empecé a crear un mini framework CSS para mi uso personal, normalmente uso el mismo reseter, las mismas utilidades (.replacetext, .clearfix) y un estilo básico que monta la estructura de mis maquetaciones: (#web > #cabecera, #contenido, etc).
La idea inicial fue la de crear un archivo framework.css que realizase un import al resto de archivos del framework, con lo que quedó lo siguiente:
framework.css
/**
* Micro Framework CSS
* @package aRamirezCSS
* @author aramirez.es
* @version 1.0
*/
@import 'framework/reseter.css';
@import 'framework/util.css';
@import 'framework/master.css';layout.html
<link rel="stylesheet" type="text/css" media="screen" href="/css/framework.css" />
…
<!-- Resto de archivos CSS →Esto funciona bien, solo tengo que llamar a un archivo CSS (sin contar el resto de archivos del proyecto (layout.css, secciones....) y carga mi mini framework.
Días más tarde me puse a revisar las cargas de unos archivos js mediante la utilidad de red de Firebug. Mi sorpresa fue que vi, como los archivos que se llaman mediante la regla import se cargan bastante después del archivo framework.css
Como casi siempre ando refactorizando código, esta vez le toco a mis CSS. En las webs que me toca maqueta siempre utilizo una técnica de reemplazo de texto para las imágenes.
html:
<h1><a href="index">Nombre del cliente<span></span></a></h1>CSS:
h1{ position: relative;
width: 200px;
height: 150px;
/* font-size: 0.2em; */
/* text-align: -9999px; */
/* usa una de estas dos etiquetas si la imagen es más pequeña que el texto y no lo oculta */
}
h1 a span{
position: absolute;
width: 100%;
height: 100%;
display:block;
top: 0;
left: 0;
cursor: pointer;
}Para cada imagen del diseño de la web tocaría utiizar la misma técnica, por lo que se repite en exceso el código.
¿Cómo solucionar ésto para no escribir el mismo código repetidas veces?
Pués refactorizando en una clase, asi de sencillo: