El futuro del CSS

Object-Oriented CSS (OOCSS)

Sí, para diseñar una página web mediante CSS también es fundamental aplicar Object-Oriented pero… ¿de qué se trata?

Primero iniciemos con lo que la mayoría en el campo de TI conocemos y es la POO (Programación Orientada a Objetos) qué básicamente es, una forma especial de programar, donde la principal característica es la reutilización del código que hacemos. Con la POO nos obligamos a hacer las cosas diferentes, a escribir los programas en términos de objetos, propiedades, métodos, etc.

El futuro del CSS

Algo similar pasa con OOCSS, el desarrollador Nicole Sullivan propuso el CSS orientado a objetos en 2008, su principal ideología es la reutilización del código, encontrar patrones, consiguiendo de esta manera hojas de estilo más eficientes, rápidas y fáciles de mantener.

Sullivan, propone dos conceptos básicos, los cuales son:

1.Separar el estilo de la estructura del objeto
Cada componente que hacemos tiene una estructura, un estilo visual propio que se le llaman Skin (piel).

La estructura consta de propiedades que para el usuario son “invisibles”, como lo son: width, height, margin, padding, overflow.
El skin son las propiedades que para el usuario es mucho mas fácil determinar, como lo son: color, Font, opacity, grandients.

Dicho de otra manera, la estructura consiste en la forma que se le da a un elemento, y el skin define como se ve el diseño.

El siguiente es un claro ejemplo de lo que consiste este primer punto, que básicamente es crear un elemento con tamaños diferentes, pero colores y forma igual:

El fragmento de código anterior tiene dos propiedades que son repetitivas en ambas clases, como lo son: background y border-radius.

Pero aplicando este primer concepto, quedaría algo así.

Por ende, nuestro HTML quedaría de esta manera.
Estamos ahorrando código y utilizamos el existente.

2. Separar el contenido del contenedor
Este punto, consiste en nunca utilizar los tags que HTML nos dá, en nuestro CSS para definir estilos y simplemente usar clases en su lugar.

La parte del código CSS, sería la no recomendable, ya que estamos usando tags HTML específicos para darle forma y/o estilo a un componente.

La forma en que Sullivan la plantea es que nuestro CSS quede de la siguiente manera, sin utilizar ningún tag HTML.

VENTAJAS

1. Velocidad: Reduce la repetición de código ya que hace que las aplicaciones se ejecuten rápido.
2. Escalabilidad: Permite mezclar y volver aplicar clases libremente en diferentes elementos.
3. Eficiencia: Tener menos bloques de código, hará que nuestro código sea más fácil de escanear, esto también conlleva a que nuestro código sea menos complicado a la hora de editar.
4. Mantenibilidad: Agregar o reorganizar los tags HTML ya no requiere que reconsidere todo su flujo CSS. Esto es especialmente útil para grandes proyectos en curso.
5. Legibilidad: Cuando otros desarrolladores vean tu código, podrán comprender rápidamente su estructura.
6. Aprendizaje: Comprender esta metodología orientada a objetos facilita el aprendizaje de lenguajes de programación y a la inversa.

DESVENTAJAS

1. Incrementa el número de clases: Como hay mucha más separación en la forma en que se crean las clases, es posible que deba agregar varias clases a un elemento para tener en cuenta todos los elementos de estilo. Esto puede causar cierta confusión a aquellos que no están familiarizados con OOCSS y pueden saturar su marca.

2. Puede ser una exageración en proyectos pequeños: OOCSS ciertamente no es requerido para todos los casos de uso. Para proyectos más pequeños puede optar por no usarlo en absoluto y eso es completamente correcto. Como se mencionó anteriormente, algunos de los principales beneficios son: escalabilidad, legibilidad y mantenibilidad. A medida que los proyectos crecen, estos aspectos se vuelven más difíciles de administrar, lo que hace que OOCSS sea una gran herramienta, sin embargo, no son tan urgentes para proyectos más pequeños.

3. Requiere curva de aprendizaje: Puede ser que otros desarrolladores o diseñadores web necesiten realizar ajustes en su código. Sin embargo, si está usando OOCSS y sus compañeros de trabajo no están familiarizados con esto, esto requerirá la necesidad de que aprendan a usarlo antes de continuar, lo que lleva tiempo.

Conclusión

Utilizar esta metodología tiene sus ventajas y desventajas (que ya las daré a conocer), pero en mi concepto pesan mucho más las ventajas, ya que, le da un orden a nuestro código, adicionalmente lo reduce por que vamos a tener clases que las podremos utilizar en otros componentes y así evitar el código repetido, además vamos a dejar de usar tags HTML y simplemente le damos diseño por medio de otras clases.

Con todo esto logramos tener hojas de estilo mucho más ligera ya que estamos eliminando todo el código repetido.

Referencias:

1. OOCSS – The Future of Writing CSS (https://www.keycdn.com/blog/oocss#the-disadvantages-of-using-oocss)
2.Metodología CSS: Object-Oriented CSS (https://blog.interactius.com/metodolog%C3%ADa-css-object-oriented-css-oocss-b58118935d3e)