En esta ocasión voy a contarles de un tema del que se habla poco pero que es muy importante y lo eh notado en empresas que tienen una buena estructura en sus áreas de programación o desarrollo.
Las Metodologías o Arquitecturas CSS nos ayudan a escribir código CSS más predecible, reutilizable, mantenible y escalable. Es por eso que últimamente en mis proyectos eh implementado las metodologías mas populares y en esta entrada te hablare un poco de ellas.
(BEM) Blocks, Elements and Modifiers
BEM es la abreviatura de: Bloque, Elemento y Modificador que significa Modificador de Bloques de Elementos. Lo que esta metodología sugiere es que nombremos nuestras clases de manera estructurada, todo basado en las propiedades del elemento que estamos seleccionando es por eso que en esta metodología solo podemos utilizar clases y no id’s.
Con esto nos permitimos repetir el nombre BEM si es necesario y así crear una estructura CSS mas elegante y consistente. (Como podemos observar en el siguiente ejemplo).
En el ejemplo podemos observar un botón normal para los casos normales y otros dos para los casos diferentes a el. Como nos menciona la metodología BEM siempre debemos seguir la estructura Bloque, Elemento y Modificador.
(OOCSS) CSS orientado a objetos
Lo que nos dice esta metodología es que debemos separar el contenedor y el contenido con «objetos» CSS, en su documentación lista el siguiente texto que me parece explica lo que es esta arquitectura:
Al igual que con cualquier método de codificación basado en objetos, el objetivo de OOCSS es fomentar la re-utilización del código y, en última instancia, hojas de estilo más rápidas y eficientes que son más fáciles de agregar y mantener.
Así lo menciona en su repositorio de Github. También habla de 2 puntos que son claves y te los voy a traducir:
ESTRUCTURA Y PIEL SEPARADAS: Casi todos los elementos en una página web con estilo tienen diferentes características visuales que se repiten en diferentes contextos y (los colores, degradados o los bordes visibles). Por otro lado, también se repiten otras características generalmente invisibles (es decir, “estructura”).
Cuando estas características diferentes se abstraen en módulos basados en clases, se vuelven reutilizables y se pueden aplicar a cualquier elemento y tienen el mismo resultado básico. Para tener mas contexto de estas palabras a continuación dejare un ejemplo de como se ve un CSS sin aplicar los principios OOCSS y otro aplicándolo.
Los 3 elementos que se ven en el ejemplo tienen estilos que son únicos para cada uno y se aplican por ID y no son reutilizables para definir mas estilos. Este tipo de estructura suele ser la que mas se usa en proyectos para la consistencia del diseño.
Aplicando la metodología OOCSS lo que logramos es abstraer los estilos comunes para que el CSS termine así. 
Ahora todos los elementos están usando clases, los estilos comunes se combinan en una clase llamada “skin” reutilizable y nada se repite innecesariamente. Solo tenemos que aplicar la clase “skin” a todos los elementos y el resultado será el mismo que el que produciría el primer ejemplo, excepto con menos código y una posibilidad de reutilización adicional . CONTENEDOR SEPARADO DEL CONTENIDO: El segundo punto remarcado en el sitio web es la separación de los contenedores y su contenido, al principio me costo entender por que esto es importante pero lo explicare con otro ejemplo: 
En este caso tenemos un sidebar y los estilos se aplicaran a cualquier h3 que sea hijo del mismo sidebar. Pero, ¿ y si necesito aplicar exactamente los mismos estilos a los h3, con algunas excepciones como una sombra o tamaño de texto diferente?. Entonces tendríamos que hacer así:
Ahora ¿cual es el problema?, lo que pasa es que estamos duplicando estilos, con OOCSS evitamos esa duplicidad y separamos esas características comunes en módulos u objetos que se pueden reutilizar en cualquier lugar.
En los ejemplos anteriores no tenemos un selector reutilizable por que dependen de un contenedor (en este caso el sidebar. Cuando utilizamos la metodología OOCSS nos aseguramos de que nuestros selectores no dependan de ningún elemento. Por lo cual pueden reutilizarse en cualquier parte del documento.
Atomic Design
El diseño atómico es una metodología para crear sistemas de diseño, personalmente conocí esta arquitectura trabajando con gente de UX y UI entonces entendí que existen 5 niveles para trabajar:
- Átomos: Los átomos son los componentes básicos. Aplicados a las interfaces web, los átomos son nuestras etiquetas HTML, como una etiqueta de formulario, un menú de navegación o un botón. Los átomos también pueden incluir elementos más abstractos como colores, tipografías e incluso aspectos más invisibles de una interfaz como animaciones. Al igual que los átomos en la naturaleza, son bastante abstractos y, a menudo, no son terriblemente útiles por sí solos.
- Moléculas: Aquí todo se pone más interesante y tangible cuando comenzamos a combinar átomos juntos. Las moléculas son grupos de átomos unidos entre sí y son las unidades fundamentales más pequeñas de un componente. Estas moléculas adquieren sus propias propiedades y sirven como la columna vertebral de nuestros sistemas de diseño. Por ejemplo, una etiqueta de formulario que no son demasiado útiles por sí mismos, pero combínelos como un formulario y ahora pueden hacer algo juntos.
- Organismos: Las moléculas nos dan algunos bloques de construcción para trabajar, y ahora podemos combinarlas para formar organismos. Los organismos son grupos de moléculas unidas entre sí para formar una sección relativamente compleja y distinta de una interfaz. Por ejemplo, un organismo de cabecera puede constar de diversos componentes como un logotipo, navegación principal, formulario de búsqueda y enlaces a redes sociales. La acumulación de moléculas a organismos fomenta la creación de componentes independientes y reutilizables.
- Plantillas: En la etapa de plantilla, rompemos nuestra analogía de química para entrar en un lenguaje que tenga más sentido para nuestros clientes y nuestro resultado final. Las plantillas consisten principalmente en grupos de organismos unidos para formar páginas. Es aquí donde comenzamos a ver el diseño que se une y comenzamos a ver cosas como el diseño en acción. Las plantillas también son donde los clientes comienzan a ver su diseño final. En mi experiencia trabajando poco con esta metodología, las plantillas comienzan como estructuras simples de HTML, pero con el tiempo crecen para convertirse en el producto final.
- Páginas: Las páginas son instancias específicas de las plantillas. Aquí, el contenido del marcador de posición se reemplaza con contenido representativo real para dar una descripción precisa de lo que un usuario finalmente verá. Las páginas son el nivel más alto y, dado que son las más visuales, generalmente es donde la mayoría de los clientes pasan la mayor parte de su tiempo. La etapa de la página es esencial ya que es donde probamos la efectividad del sistema de diseño. Ver todo en contexto nos permite retroceder para modificar nuestras moléculas, organismos y plantillas para abordar mejor el contexto real del diseño. Las páginas también son el lugar para probar variaciones en las plantillas. Por ejemplo, es posible que desee articular cómo se ve un título que contiene 40 caracteres, pero también demostrar cómo se ven 340 caracteres. ¿Cómo se ve cuando un usuario tiene un artículo en su carrito de compras frente a 10 artículos con un código de descuento aplicado? Una vez más, estos casos específicos influyen en cómo recorremos y construimos nuestro sistema.
Conclusión
Como puedes ver, hay mucho más por explorar, cada metodología o arquitectura CSS tiene sus ventajas e inconvenientes, algunas son menos estrictas y más flexibles, mientras que otras son más fáciles de entender y adaptar en un equipo de trabajo.
Finalmente, sin importar la metodología CSS que elijas para utilizar en tus proyectos, adoptar una, siempre te dá el beneficio de tener CSS mejor estructurado.