Sin duda lo que le da belleza a la web es el CSS, no obstante aprender el lenguaje suele ser difícil, en primera porque es un mundo y en segunda cssquickporque no basta con saber las propiedades, hay que saber optimizar y escribir correctamente tus style.css.

Y aunque no me considero un experto en el tema, tengo unos cuantos consejos, técnicas y trucos CSS que he ido guardando a lo largo del tiempo, mismas que comparto a continuación:

Trabaja por secciones

Ejemplo aplicado al style.css de un theme WordPress, divide tu hoja en secciones: Estilos Globales o Generales, del Contenedor principal, Sidebar…

/* Global */
body { font: 14px/1.6 Arial, Helvetica, Verdana, sans-serif; }
/*Area de Contenido */
#wrap-post { width: 600 px;  float: left; }

CSS Shorthand, el mejor amigo de tu hoja estilos.

El principio básico del asunto según la W3C es que CSS esta compuesto por 2 cosas: un selector y una declaración y en cada declaración hay una propiedad y un valor, basandonos en esto los shorthands serían propiedades con valores condensados o comprimidos, ejemplo práctico:

/* Propiedad margin sin shorthand */

.elemento {
        margin-top: 10px;
        margin-bottom: 20px;
        margin-left: 10px;
        margin-right: 5px;
}
/* Propiedad margin usando shorthand */
.elemento { margin: 10px 5px 20px 10px; } 

Para entender mejor esto, les recomiendo leer la Guía del CSS Shorthand.

Agrupa selectores

Tienes 2 o más selectores y las mismas reglas, no escribas lo mismo 2 veces.

.bloque { background: #FFF; padding: 15px; margin-top: 10px; }
.articulo { background: #FFF; padding: 15px; margin-top: 10px; }

Agrupalos de esta forma:

.bloque, .articulo { background: #FFF; padding: 15px; margin-top: 10px; }

Menos espacio es igual a más rápido.

La optimización del CSS apunta a la compresion de éste, entre menos espacio hay entre tus selectores, más rápido cargará el navegador tu página. Por ende es mejor escribir las declaraciones como lo hice en el anterior ejemplo, sin espacios en blanco.

Espero que esta serie de tips te ayude a escribir hojas de estilo más optimizadas.

<h4>También te puede interesar:</h4>
<ul>
<li><a href="http://www.kernelweb.org/accesibilidad-y-usabilidad-total-para-una-pagina-web/" title="Accesibilidad y usabilidad total para una página web (21 Mayo 2009)">Accesibilidad y usabilidad total para una página web</a> (2)</li>
<li><a href="http://www.kernelweb.org/como-abrir-un-archivo-desconocido/" title="¿Cómo abrir un archivo desconocido? (26 Febrero 2009)">¿Cómo abrir un archivo desconocido?</a> (0)</li>
<li><a href="http://www.kernelweb.org/smushit-optimizar-reducir-bytes-de-imagenes/" title="Smush.it reduce los bytes de las imagenes (16 Febrero 2009)">Smush.it reduce los bytes de las imagenes</a> (0)</li>
<li><a href="http://www.kernelweb.org/riot-software-para-optimizacion-radical-de-imagenes/" title="RIOT, software para optimización radical de imágenes (27 Marzo 2009)">RIOT, software para optimización radical de imágenes</a> (1)</li>
<li><a href="http://www.kernelweb.org/resaltar-comentarios-del-admin-o-autor-en-wordpress/" title="Resaltar comentarios del admin o autor en WordPress (17 Mayo 2009)">Resaltar comentarios del admin o autor en WordPress</a> (3)</li>

Via http://www.kernelweb.org/principios-y-tips-para-un-css-optimizado//a>

Related Posts with Thumbnails
Tagged with:  

Comments are closed.

WordPress Blog