Cuando aprendemos a desarrollar interfaces, como diseñador muchas veces cuesta aprender un poco mas de que puede y no puede hacer el código, que permiten y no permiten los estándares, como desarrollador front end un diseñador también debe aprender a optimizar su trabajo conforme a reglas para un mejor funcionamiento.

Un desarrollador front end., es en conocimientos algo mas completo que un diseñador web, debe saber estándares, manejar un buen diseño, saber maquetar y dar estilo a sus diseños y en la mayor parte de los casos también trabajar con programación para darle vida a los sitios web como JavaScript o por lo menos entender los conceptos de jquery, json, etc.

Al desarrollar una interface o sitio web del lado del usuario también es importante la optimización, si la optimización de código.  Prácticamente cada línea de código es una porción de memoria que le quitas a la computadora y en muchos casos se transmite en lentitud y problemas al visualizar el sitio. Seguramente los maestros en front end saben que no es lo mismo tener 6 líneas de código a tener 2 líneas haciendo exactamente la misma función.

Los casos de optimización de código normalmente se aplican a los estilos, cada estilo se que agrega en el sitio es un pedacito de memoria robada y un pedacito de tiempo y usuarios perdidos. 

Optimizar las hojas de estilo no es una tarea difícil, es una tarea que necesita un poco de labor constante para tomar un ritmo y saber que hacer al momento de crear. Hay varias maneras de nombrar este tipo de optimización de código, la más común es “extends” y que son las herencias que se va dejando sobre las clases en el código de CSS.

Para ver esto más a fondo vamos a tomar un ejemplo. Vamos a crear una clase llamada ventaja, esta clase tiene como parámetros, que es transparente, grande y tiene un bonito stroke en color gris

.ventaja { color: #transparent;  height: 100px; width: 100px; border: 1px solid #ddd; }

Dentro de nuestra casa vamos a tener una puerta, esta puerta es de color café y también tiene un bonito contorno gris, lo que haríamos es crear una clase nueva que se llame puerta:

.puerta { color: be9710; height: 180px; width:60px; border: 1px solid #ddd; }

Hasta ahora nuestras dos clases tienen algunos parámetros similares y otros distintos. La idea de los extends es crear parámetros que puedan funcionar para varias clases y por herencia, por ejemplo en el caso anterior, supongamos que todos los elementos siguientes van a tener valores similares como el borde gris, es ahí cuando nuestra optimización de CSS entra al rescate. Para modificarlo y optimizarlo la opción poner jerarquías y para esto tendríamos una clase que englobe a las dos anteriores, en este caso vamos a llamarla casa. En casa vamos a tener el borde gris que va a regir en todos los elementos.

.casa { border: 1px solid #ddd; }

Después de esto cada subclase que vamos a agregar y que este dentro de la clase casa va a contener este valor, por lo cual ya no sería necesario agregarlo una y otra vez. En el HTML sería donde veríamos esta optimización, agregando por jerarquías los elementos, por ejemplo:

<div class=”casa puerta”>

            soy una puerta

</div>

Aquí lo que le estamos diciendo al navegador es que primero tome los parámetros que la clase casa tiene y que después le agregue los parámetros de la subclase puerta; con esto tenemos todos los estilos de las dos clases pero sin repetir el código en CSS. Este es un ejemplo muy básico de cómo optimizar el código y esto no solo se aplica al CSS, por lo cual seria buena idea que lo ejecutes en la mayor parte de tus desarrollos.