Aprende que es OOCSS y como puedes optimizar tu código CSS mediante la reutilización de codigo.
Hoy vamos a ver algo nuevo, vamos a aprender acerca de una técnica llamada OOCSS que significa Oriented Object CSS en donde la idea principal es seguir los fundamentos básicos de la programacion orientada a objectos y reutilizar el código lo mas que podamos. En pocas palabras el objetivo de OOCSS es simple, optimizar nuestro código para reducirlo y poder agregar mas código de una forma rápida. Si eres programador entenderás acerca de la POO ( Programación Orientada a Objetos ) y sino no hay ningún problema, yo te explicare de una forma muy sencilla que es y como es que aplicaremos esta técnica a CSS.
OOCSS no se trata de alguna nueva implementación de la W3C como CSS3 o algo por el estilo, se trata de una técnica, una forma en la que que vamos a escribir nuestro código CSS por lo que no vamos a tener ninguna linea de código que no conozcamos ya antes.
Los principios son muy básicos, solo tenemos que prestar atención a ciertas reglas que debemos de seguir, y aunque no hay ningún efecto si no sigues estas reglas si que es recomendable para que obtengas buenos resultados en la optimización de CSS.
Olvídate de los ID
Empezaremos por dejar de escribir ID para utilizarlos como selectores CSS, los ID a partir de ahora solo debes de utilizarlos para el uso de formularios y cosas por el estilo. La razón de esto es que ahora vamos a utilizar clases ya que nos otorgan grandes ventajas respecto a los ID, en primer lugar las clases se pueden repetir en varios elementos, los ID no. Por otro lado las clases son mas fáciles de acceder, mientras que los ID son muy específicos y no nos permitirán reutilizar código.
Si antes tenias ID para diseñar simplemente remplazalos por clases, esto te permitirá agregar mas elementos similares y tener el mismo diseño y si no agregas mas elementos no pasa nada, no hay ningún cambio en el mundo si escribes una clase CSS y solo la utilizas una sola vez como si fuera un ID.
Elimina propiedades en común
La idea principal es reducir código lo mas que podamos y al mismo tiempo mantenerlo para facilitar la escritura de mas código por lo cual tienes que eliminar las propiedades que tienen en común ciertos elementos similares, vamos a verlo con un ejemplo.
Aquí tengo 2 cajas, ambas tienen las mismas propiedades, son exactamente iguales, a excepción del color, el problema aquí es que estamos repitiendo el código css para las 2 cajas cuando solo queremos que cambie de color.
See the Pen sKrJn by Carlos Arturo Esparza (@falconmasters) on CodePen.
Así que la solución a esto es crear una clase que contenga la estructura (tamaño, margins, paddings, positions, etc ) de ambas cajas y otras clases extras que le darán apariencia dependiendo de lo que nosotros queramos, en este ejemplo haré 3 clases, cada una le dará la apariencia (fondo,color de la fuente, tipografía,etc).
See the Pen nDvju by Carlos Arturo Esparza (@falconmasters) on CodePen.
Como puedes ver la clase .caja es la que contiene toda la estructura y con las demás clases .azul, .naranja, .verde le damos color a nuestras cajas, es importante que veas el código html, porque no solo utilizamos una clase como habitualmente lo haríamos, sino que utilizamos tantas clases necesitamos, primero para darle la estructura y después la apariencia ambas mediante 2 clases.
Cada clase cumple una función que queremos y nos permite reutilizar el código. Es importante tener una cosa en mente, si indicamos 2 o mas clases a un elemento y estas clases tienen propiedades iguales, el navegador leerá la propiedad duplicada de la ultima clase indicada. En el ejemplo anterior podemos apreciar esto, como puedes ver por defecto la clase .caja tiene un background gris, pero también nuestras clases .azul, .naranja y . verde y en nuestro primer div le hemos indicado que tendrá tanto la clase .caja y al mismo tiempo la clase .azul como ambas clases tienen la propiedad background, el navegador tomara el background de la ultima clase.
Y es asi de sencillo, todo se basa en separar la estructura de la apariencia, separar tamaños, margenes y posiciones de lo que son fuentes, colores y fondos. Un pequeño tip que te puedo dar para saber si estas utilizando correctamente esta técnica es ver tu código CSS y si encuentras una propiedad igual en varios elementos similares, significa que no estas separando correctamente todo.
Con OOCSS tus archivos css deberían contener menos lineas de código y por lo tanto pesar menos, no importa si tu código html se llena de clases, aunque asi lo sea va a ser mas fácil de mantener el código y saber que estilos corresponden a que elementos.
Puedes empezar a utilizar OOCSS desde ya en tus proyectos, comienza practicando y poco a poco dominaras mas esta técnica y veras como todo es mas fácil de diseñar. OOCSS esta pensado para proyectos grandes en los que reutilizar unas pocas lineas de código sea la diferencia entre un sitio que carga rápido a uno que carga lento, pero aun asi practica con tus proyectos y veras que no importa el tamaño del proyecto, te sera bastante útil y mas aun si planeas hacer aplicaciones web.
Por ultimo comentarte que OOCSS se utiliza en todos lados y su uso mas cercano esta en los Frameworks de diseño web, tal como boostrap, fundation, etc. Todos ellos implementan OOCSS, mediante sus clases tu les puedes indicar que tipos de columnas sean, que colores de botones tamaños y un sin fin mas. Tu simplemente creas el archivo html y como si fuera un catalogo vas escogiendo que clases quieres usar para cada elemento.
Si quieres comenzar a practicar te dejo un tutorial en el que creamos unos bonitos botones flat utilizando iconos con CSS y utilizando OOCSS de por medio.
Link: Tutorial como hacer botones Flat usando iconos con CSS
[…] Introducción y fundamentos de OOCSS (Oriented Object CSS) […]
Es muy interesante, sobre todo porque ya hacia eso pero no sabia que tenia un nombre. El de usar estilos para varios elementos en una misma clase. Muchas gracias siempre atento a que publicas, me gustaría ver más backend, sobre todo con WordPress.
Dos saludos
Vaya que si es bastante interesante, como tu dices alguna vez ya tuvimos contacto con OOCSS y muchas veces ni nos dimos cuenta. Claro que vendrán mas tutoriales sobre WordPress, no al 100% como backend (php) pero si en la parte de configuraciones, plugins, mejoras, etc.
Saludos a ti!
oooh esto interesante, y tambien yo fui uno de los que lo aplicaba sin saber que era, es muy útil, gracias por compartir =p
Genial, siempre se aprende algo, aunque ya lo hicieras ahora sabes como se llama, gracias a ti tocayo.
Muchas gracias por compartir todos estos tutoriales me han servido de mucho, tienes un lugar en el cielo te lo aseguro
pd: llevo 8 horas el dia de hoy viendo tus tutos sin contar los dias anteriores
exlente tutorial :D
Excelente aporte Carlos Arturo…saludos :)