Los fundamentos de CSS orientado a objetos (OOCSS)

El desarrollo frontend se mueve rápidamente con muchas técnicas nuevas que se agregan 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 herramientas de desarrollo.

Una técnica más nueva es el CSS orientado a objetos, también denominado OOCSS para abreviar. Esto no es una herramienta, sino una metodología de escritura CSS que apunta a Hacer CSS modular y basado en objetos..

En este post, me gustaría introducir el Fundamentos básicos del OOCSS., y Cómo se pueden aplicar estas ideas al trabajo web frontend.. Es posible que esta técnica no se adapte a todos los desarrolladores, pero vale la pena entender nuevos conceptos para decidir si su flujo de trabajo podría beneficiarse de ella..

¿Qué hace CSS orientado a objetos??

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

La OOP se ha utilizado ampliamente en ambos JavaScript y backend lenguajes En los últimos años, pero organizar CSS de acuerdo con sus principios sigue siendo un concepto nuevo..

los “objeto” en OOCSS se refiere a una Elemento HTML o cualquier cosa asociada con él (como clases de CSS o métodos de JavaScript). Por ejemplo, podría tener un objeto de barra lateral que podría replicarse para diferentes propósitos (registro de boletines, bloques de anuncios, publicaciones recientes, etc.). CSS puede apuntar estos objetos en masa lo que hace que la escalada sea una brisa.

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, escuchas o métodos asociados con un objeto

En general, CSS está orientado a objetos cuando considera clases que son reutilizables y Dirigible a múltiples elementos de la 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 un montón de información si tienes curiosidad por aprender más. Y la creadora Nicole Sullivan habla a menudo 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 personalización de piel para ser aplicado en múltiples elementos de la página sin afectar la estructura.

Esto también es útil para diseñar componentes que pueden ser movido alrededor del diseño con facilidad. Por ejemplo, un “Mensajes recientes” El widget en la barra lateral debe poder moverse hacia el pie de página o por encima del contenido, manteniendo estilos similares..

Aquí hay un ejemplo de OOCSS para un “Mensajes recientes” Widget 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 letra: 1.45em;  

Darse cuenta de diseño se maneja con el .widget lateral clase que podría aplicarse a múltiples elementos de la barra lateral también, mientras que apariencia se maneja con el .Mensajes recientes Clase que también se podría utilizar para la piel de otros widgets. Por ejemplo, si el .Mensajes recientes El widget se movió al pie de página, puede que no tome la misma posición, pero podría tener la misma apariencia.

También eche un vistazo a este ejemplo de barra lateral de CodePen. Utiliza una separación distinta de clases para flotadores y alineación de texto para que La replicación no requerirá código CSS adicional.

Contenedor separado del contenido

Separando 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, citas en bloque 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 de elementos especiales h2 * / / * No-OOCSS * / .sidebar / * contenido de la barra lateral * /. h2 / * añade más especificidad de la necesaria * / 

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

Pautas de desarrollo

Es difícil establecer especificaciones exactas porque los desarrolladores están debatiendo constantemente el propósito de OOCSS. Pero aqui estan Algunas sugerencias que pueden ayudarte a escribir un código OOCSS más limpio.:

• Trabajar con clases en lugar de identificaciones para el estilo.
• Intentar abstenerse de la especificidad de clase descendiente de varios niveles a menos que sea necesario.
• Definir Estilos únicos con clases repetibles. (por ejemplo, flotadores, clearfix, pilas de fuentes únicas).
• Extender elementos con clases dirigidas en lugar de clases para padres.
• Organiza tu hoja de estilo en secciones, Considere agregar una tabla de contenido.

Tenga en cuenta que los desarrolladores deben seguir utilizando ID para la orientación de JavaScript, pero no son necesarios para CSS porque son demasiado especificos. Si un objeto utiliza una ID para el estilo CSS, nunca podrá replicarse, ya que las ID son identificadores únicos. Si solo usas clases para el estilo entonces la herencia se vuelve mucho más fácil de predecir.

Por otra parte, las clases se pueden encadenar para características adicionales. Un solo elemento podría tener más de 10 clases adjuntas. Si bien 10+ clases en un elemento no es algo que personalmente recomiendo, 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 algo controvertidos, y no están escritos en piedra. Muchos desarrolladores prefieren mantener las clases cortas y al punto..

Funda de camello también es popular, por ejemplo. .errorbox en lugar de .caja de error. Si observa los nombres de las clases en la documentación de OOCSS, notará que el caso del camello es el “oficial” recomendación. No hay nada de malo en los guiones, pero como regla es mejor seguir las pautas de OOCSS.

OOCSS + Sass

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

En manos competentes, Sass y OOCSS podrían ser una pareja hecha en el cielo. Encontrarás un excelente artículo sobre esto en el blog de Sass Way..

Por ejemplo, usando el Sass. @ampliar Directiva puede aplicar las propiedades de una clase en otra clase. Las propiedades no se duplican, sino que las dos clases se combinan con un selector de coma. De esta manera puedes actualizar las propiedades CSS en una ubicación.

Si estás escribiendo constantemente hojas de estilo, esto ahorraría horas de escritura y ayudar automatizar el proceso de OOCSS.

Tambien recuerda que El mantenimiento del código es una parte importante de OOCSS.. Al usar Sass, su trabajo se vuelve más fácil con variables, combinaciones de herramientas y herramientas avanzadas de alineación vinculadas al flujo de trabajo.

Un atributo clave del gran código OOCSS es el posibilidad de compartirlo con cualquiera, incluso a ti mismo en una fecha posterior, y ser capaz de recogerlo con facilidad.

Consideraciones de rendimiento

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

Dado que OOCSS sigue siendo un tema nuevo, es difícil discutir sobre el tema de la hinchazón. Muchos archivos CSS terminan inflados con poca estructura, mientras que OOCSS proporciona una estructura rígida y (idealmente) menos hinchada. El mayor problema de rendimiento se encuentra 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 tratar de construir un proyecto de ejemplo y ver cómo va. Si te enamoras del OOCSS, puede cambiar radicalmente la forma en que codificas 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 no importa qué.

Manténgase ocupado escribiendo OOCSS

La mejor manera de aprender algo en desarrollo web es practicar. Si ya entiendes lo básico de CSS, entonces estás en el buen camino.!

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

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

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