Conceptos básicos de CSS orientado a objetos (OOCSS)

El desarrollo de frontend se mueve rápidamente con muchas técnicas nuevas agregadas cada año. Puede ser una lucha para los desarrolladores mantenerse al día con todo. Entre Sass y PostCSS es fácil perderse en el mar de las herramientas de desarrollo.

Una técnica más nueva es CSS orientada a objetos, también denominada OOCSS para abreviar. Esta no es una herramienta, sino una metodología de escritura de CSS que tiene como objetivo hacer CSS modular y basado en objetos .

En este post, me gustaría presentar los fundamentos básicos de OOCSS, y cómo estas ideas se pueden aplicar al trabajo web frontend . Esta técnica puede no entenderse con todos los desarrolladores, pero vale la pena comprender nuevos conceptos para decidir si su flujo de trabajo podría beneficiarse de ello.

¿Qué hace que CSS esté orientado a objetos?

La programación orientada a objetos (OOP) es un paradigma de programación que se centra en crear objetos reutilizables y establecer relaciones entre ellos, en oposición a la programación de procedimientos que organiza el código en procedimientos (rutinas, subrutinas o funciones).

OOP se ha utilizado ampliamente tanto en JavaScript como en lenguajes back-end en los últimos años, pero organizar CSS según sus principios sigue siendo un concepto nuevo.

El "objeto" en OOCSS se refiere a un elemento HTML o cualquier cosa asociada con él (como clases CSS o métodos JavaScript). Por ejemplo, podría tener un objeto de widget de barra lateral que podría replicarse para diferentes propósitos (suscripción al boletín informativo, bloques de anuncios, publicaciones recientes, etc.). CSS puede apuntar a estos objetos en masa, lo que hace que escalar sea muy fácil.

Resumiendo la entrada GitHub de OOCSS, un objeto CSS puede constar de cuatro cosas:

1. Nodo (s) HTML del DOM
2. Declaraciones CSS sobre el estilo de esos nodos
3. Componentes como imágenes de fondo
4. Comportamientos de JavaScript, oyentes o métodos asociados con un objeto

En términos generales, CSS está orientado a objetos cuando considera clases que son reutilizables y orientables a múltiples elementos de página .

Muchos desarrolladores dirían que OOCSS es más fácil de compartir con otros y más fácil de recoger después de meses (o años) de desarrollo inactivo. Esto se compara con otros métodos modulares como SMACSS que tiene reglas más estrictas para categorizar objetos en CSS.

La página de preguntas frecuentes de OOCSS tiene mucha información si desea obtener más información. Y la creadora Nicole Sullivan a menudo habla sobre OOCSS y cómo se relaciona con el desarrollo web moderno.

Estructura separada del estilo

Una gran parte de OOCSS es escribir código que separa la estructura de la página (ancho, alto, márgenes, relleno) de la apariencia (fuentes, colores, animaciones). Esto permite que el skinning personalizado se aplique a múltiples elementos de página sin afectar la estructura .

Esto también es útil para diseñar componentes que se pueden mover con facilidad. Por ejemplo, un widget de "Publicaciones recientes" en la barra lateral debería poder moverse al pie de página o por encima del contenido mientras se mantienen estilos similares.

Aquí hay un ejemplo de OOCSS para un widget de "Publicaciones recientes" que en este caso es nuestro objeto CSS:

 / * Estructura * / .side-widget {ancho: 100%; relleno: 10px 5px; } / * Skinning * / .recent-posts {font-family: Helvetica, Arial, sans-serif; color: # 2b2b2b; tamaño de fuente: 1.45em; } 

Tenga en cuenta que el diseño se gestiona con la clase .side-widget que también se puede aplicar a varios elementos de la barra lateral, mientras que la apariencia se gestiona con la clase .recent-posts que también se podría usar para .recent-posts otros widgets. Por ejemplo, si el widget .recent-posts se movió al pie de página, es posible que no adopte el mismo posicionamiento, pero podría tener la misma apariencia.

También eche un vistazo a este ejemplo de barra lateral de CodePen. Utiliza una separación clara de clases para flotantes y alineación de texto para que la replicación no requiera un código CSS adicional .

Contenedor separado del contenido

Separar el contenido de su elemento contenedor es otro principio importante de OOCSS.

En términos más simples, esto solo significa que debe evitar el uso de selectores de niños siempre que sea posible. Al personalizar elementos únicos de la página como enlaces de anclaje, encabezados, listas de bloques o listas desordenadas, debe darles clases únicas en lugar de selectores descendientes.

Aquí hay un ejemplo simple:

 / * OOCSS * / .sidebar {/ * contenido de la barra lateral * /} h2.sidebar-title {/ * estilos especiales de elemento h2 * /} / * Non-OOCSS * / .sidebar {/ * los mismos contenidos de la barra lateral * /} .sidebar h2 {/ * agrega más especificidad de la necesaria * /} 

Aunque no es horrendo utilizar el segundo formato de código, se recomienda encarecidamente seguir el primer formato si desea escribir OOCSS limpio.

Directrices de desarrollo

Es difícil precisar las especificaciones exactas porque los desarrolladores debaten constantemente el propósito de OOCSS. Pero aquí hay algunas sugerencias que pueden ayudarlo a escribir el código OOCSS más limpio :

• Trabaja con clases en lugar de ID para diseñar.
• Trate de abstenerse de la especificidad de clase descendiente de niveles múltiples a menos que sea necesario.
• Defina estilos únicos con clases repetibles (por ejemplo, flotadores, clearfix, pilas de fuentes únicas).
• Extienda elementos con clases específicas en lugar de clases principales.
• Organice su hoja de estilo en secciones, considere agregar una tabla de contenidos.

Tenga en cuenta que los desarrolladores aún deben usar ID para la orientación de JavaScript, pero no son necesarios para CSS porque son demasiado específicos . Si un objeto usa una identificación para el estilo CSS, nunca se puede replicar ya que los ID son identificadores únicos. Si usa solo clases para diseñar, entonces la herencia será mucho más fácil de predecir .

Además, las clases se pueden encadenar juntas para funciones adicionales. Un solo elemento podría tener más de 10 clases asociadas. Si bien 10+ clases en un elemento no es algo que recomiende personalmente, sí permite a los desarrolladores acumular una biblioteca de estilos reutilizables para elementos de página ilimitados.

Los nombres de clase dentro de OOCSS son un tanto controvertidos, y no están escritos en piedra. Muchos desarrolladores prefieren mantener las clases cortas y al grano.

El estuche Camel también es popular, por ejemplo .errorBox en lugar de .error-box . Si observa el nombre de la clase en la documentación de OOCSS, notará que el caso camel es la recomendación "oficial". No hay nada de malo con los guiones pero, por regla general, es mejor seguir las pautas de OOCSS.

OOCSS + Sass

La mayoría de los desarrolladores web ya adoran a Sass y rápidamente ha superado a la comunidad de frontend. Si aún no has probado Sass, vale la pena intentarlo. Le permite escribir código con variables, funciones, anidamiento y métodos de compilación, como funciones matemáticas.

En manos competentes, Sass y OOCSS podrían ser una pareja hecha en el cielo. Encontrará una excelente reseña sobre esto en el blog The Sass Way.

Por ejemplo, utilizando la directiva Sass @extend puede aplicar las propiedades de una clase a otra clase. Las propiedades no están duplicadas, sino que las dos clases se combinan con un selector de coma. De esta manera puede actualizar las propiedades CSS en una ubicación.

Si escribe constantemente hojas de estilo, esto le ahorrará horas de tipeo y ayudará a automatizar el proceso OOCSS .

También recuerde que el mantenimiento del código es una gran parte de OOCSS . Al usar Sass, su trabajo se vuelve más fácil con las variables, mixins y herramientas de deshilado avanzadas vinculadas al flujo de trabajo.

Un atributo clave del gran código OOCSS es la capacidad de compartirlo con cualquier persona, incluso usted mismo en una fecha posterior, y poder recogerlo con facilidad.

Consideraciones de rendimiento

OOCSS debe funcionar sin problemas y sin mucha confusión. Los desarrolladores hacen todo lo posible para no repetirse en todo momento, de hecho esa es la premisa detrás del desarrollo DRY. Con el tiempo, la técnica OOCSS puede conducir a cientos de clases CSS con propiedades individuales aplicadas docenas de veces en un documento dado.

Como OOCSS sigue siendo un tema nuevo, es difícil discutir sobre el tema de la hinchazón. Muchos archivos CSS terminan hinchados con poca estructura, mientras que OOCSS proporciona una estructura rígida y (idealmente) menos hinchazón. El mayor problema de rendimiento estaría en el HTML, donde algunos elementos pueden acumular un puñado de clases diferentes para la estructura y el diseño del diseño.

Encontrará discusiones interesantes sobre este tema en sitios como Stack Overflow y CSS-Tricks.

Mi recomendación es intentar construir un proyecto de muestra y ver cómo funciona. Si se enamora de OOCSS, puede cambiar radicalmente la forma en que codifica los sitios web. Alternativamente, si lo odias, aún estás aprendiendo una nueva técnica y pensando críticamente sobre cómo funciona. Es ganar-ganar sin importar qué.

Obtener ocupado escribiendo OOCSS

La mejor manera de aprender cualquier cosa en el desarrollo web es practicar. Si ya entiendes los conceptos básicos de CSS, ¡ya estás en camino!

Como OOCSS no requiere preprocesamiento, puede intentarlo con un IDE en línea, como CodePen. Los proyectos simples son los mejores para comenzar y mejorar su conocimiento a partir de ahí.

Eche un vistazo a estos recursos para avanzar en su investigación en el campo en evolución de OOCSS.

• Sitio web oficial de OOCSS
• CSS orientado a objetos: qué, cómo y por qué
• OOCSS + Sass = La mejor forma de CSS
• Una introducción al CSS orientado a objetos