Metodologías css: OOCSS, BEM y SMACSS

Hola a todos y bienvenidos a un nuevo post del área web de la Escola Espai. En este artículo conoceremos las metodologías CSS  más extendidas y veremos como nos pueden ser útiles para optimizar nuestro código CSS.

Antes de empezar aclarar que cuando hablamos de metodología nos referimos a un sistema de métodos. Donde un método es simplemente una forma de hacer algo de una manera sistemática, un cierto modo preestablecido de hacer las cosas para lograr el resultado que queremos.

Para obtener mejores resultados, mejoramos nuestros métodos planteándolos mejor y simplificándolos para obtener unos resultados más rápidos e eficientes.

INTRODUCCIÓN

Por todos es conocido que CSS es un caos… Difícil de manejar en sistemas grandes y complejos. A medida que la hoja de estilo crece nos damos cuenta que no paramos de repetir reglas para diferentes elementos y cualquier cambio puede afectar algún elemento no deseado.

Los preprocesadores CSS como Sass o Less pueden facilitarnos el trabajo de escritura de nuestras hojas de estilo pero no solucionan el problema de escalabilidad permanente que tenemos en CSS.

Precisamente para esto están las metodologías CSS.

Las metodologías CSS nos ayudaran a escribir código CSS más flexible, reutilizable, comprensible y manejable.

Vamos a comentar las 3 metodologías CSS más extendidas: OOCSS, BEM y SMACSS

Object-Oriented CSS (OOCSS)

Fue desarrollada por Nicole Sullivan en 2008 y se basa en dos principios básicos:

• Separar la estructura del diseño (en inglés lo describen como skin, piel).
• Separar contenedor del contenido.

Igual que cualquier lenguaje de programación orientado a objetos la finalidad es la re-utilización, incrementar la velocidad y eficiencia de nuestras hojas de estilo haciéndolas más fáciles de mantener.

Separar la estructura del diseño

Casi todos los elementos en una página web tienen diferentes características visuales (es decir, «pieles») que se repiten en diferentes contextos. Por otro lado, otras características generalmente invisibles («estructura») se repiten del mismo modo.

Cuando estas características diferentes se abstraen en módulos basados en clases, se convierten en reutilizables y se pueden aplicar a cualquier.

Lo mejor es verlo con un ejemplo:

Código css sin aplicar los principios OOCSS:

#button {
  width: 200px;
  height: 50px;
  padding: 10px;
  border: solid 1px #ccc;
  background: linear-gradient(#ccc, #aaa);
  box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}
#widget {
  width: 500px;
  min-height: 200px;
  overflow: auto;
  border: solid 1px #ccc;
  background: linear-gradient(#ccc, #222);
  box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}

Código css aplicando los principios OOCSS:

.button {
  width: 200px;
  height: 50px;
  padding: 10px;
}
.widget {
  width: 500px;
  min-height: 200px;
  overflow: auto;
}
.skin {
  border: solid 1px #ccc;
  background: linear-gradient(#ccc, #aaa);
  box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}

Ahora todos los elementos usan clases, los estilos comunes se combinan en una «piel» re-utilizable y nada se repite innecesariamente. Sólo tenemos que aplicar la clase de .skin a todos los elementos y el resultado será el mismo que en el primer código, excepto con menos código y una posibilidad para su posterior re-utilización.

Separar contenedor del contenido

Para ilustrar el segundo principio veamos un ejemplo. Es muy común que tengamos un código CSS parecido a este:

header h1 {
  font-family: 'Roboto', Helvetica, sans-serif;
  font-size: 2em;
  color: #F44;
}
/*mas código css...*/
footer h1 {
  font-family: 'Roboto', Helvetica, sans-serif;
  font-size: 1.5em;
  color: #F44;
  opacity: 0.5;
  filter: alpha(opacity = 50);
}

Estamos repitiendo código otra vez y los estilos que se declaran usando el selector descendiente no son reutilizables, ya que dependen de un contenedor en particular (en este caso, header y footer).
Una buena aproximación siguiendo la metodología OOCSS sería:

h1{
  font-family: 'Roboto', Helvetica, sans-serif;
  color: #F44;
}
/* ... */
h1, .h1-size { font-size: 2em;   }
h2, .h2-size { font-size: 1.8em; } 
h3, .h3-size { font-size: 1.5em; }
/* ... */
.transparente {
  opacity: 0.5;
  filter: alpha(opacity = 50);
}

El Html sería de la siguiente forma:

<header>
  <h1>Header Title</h1>
</header>
<footer>
  <h1 class="h3-size muted">Small title in the footer</h1>
</footer>

Si seguimos los principios de OOCSS, nos aseguraremos de que nuestros estilos no dependen de ningún elemento contenedor. Esto significa que se podrán volver a utilizar en cualquier parte del documento, independientemente de su contexto estructural.

Más información: http://oocss.org/

Block, Element, Modifier (BEM)

BEM es un sistema de nomenclatura de clases ideado por el equipo de desarrollo de Google Rusia.
La idea que hay detrás de BEM es diferenciar clases CSS que cumplen diferentes funciones. Esto se hace nombrando las clases CSS de una manera especial, de tal forma que su nombre describe su función

BEM complementa la metodología anteriormente explicada (OOCSS) porque OOCSS no impone ninguna convención de nombres de clase en particular.

En la terminología de BEM, un bloque es un componente de interfaz de usuario independiente, modular. Un bloque puede estar compuesto de varios elementos HTML, o incluso varios bloques. Un ejemplo de un bloque podría ser un menú de navegación o un formulario de búsqueda.
Un elemento es un componente de un bloque. Un elemento sirve un propósito singular. Por ejemplo, si tenemos un bloque de menú de navegación, sus elementos podrían ser los elementos de la lista (elementos li) y los links (elementos a).
Un modificador es una clase css que cambia la presentación de un bloque o un elemento.

Así que resumiendo tenemos:

• Bloques

  Entidad independiente que tiene significado por sí misma. (header, container, menu, checkbox, input…)

• Elementos

  Partes de un bloque que no tienen un significado independiente. Están semánticamente vinculados a su bloque. (elemento de un menú, elemento de una lista, titulo de un header, caption de un elemento picture, etc…)

• Modificadores

  Indicadores de bloque o elemento. Utilizados para cambiar la apariencia o comportamiento. (disabled, highlighted, checked, fixed, size big, color yellow…)

Veamos una imagen que ilustra a la perfección lo anteriormente explicado

Esta es el sistema de sintaxy de BEM

 	
.bloque
 	
.bloque--modificador
 	
.bloque__elemento
 	
.bloque__elemento--modificador

Un caso práctico para finalizar. Vamos a fijarnos en un boton de una pagina con diferentes estados

El HTML sería:

<button class="button">
	Normal button
</button>
<button class="button button--state-success">
	Success button
</button>
<button class="button button--state-danger">
	Danger button
</button>

Y el CSS aplicando los principios y nomenclatura BEM;

.button {
	display: inline-block;
	border-radius: 3px;
	padding: 7px 12px;
	border: 1px solid #D5D5D5;
	background-image: linear-gradient(#EEE, #DDD);
	font: 700 13px/18px Helvetica, arial;
}
.button--state-success {
	color: #FFF;
	background: #569E3D linear-gradient(#79D858, #569E3D) repeat-x;
	border-color: #4A993E;
}
.button--state-danger {
	color: #900;
}

Beneficios de utilizar BEM:

• Modularidad: Los estilos de los bloques no deberían tener dependencias con otros elementos de la página, de esta manera evitaremos problemas de cambios en cascada.
  Además, estos módulos/bloques pueden ser reaprovechados para otros proyectos.
• Reutilización: Componer bloques independientes y reutilizarlos reduce la cantidad de código CSS a mantener.
• Estructura: BEM otorga una estructura simple y comprensible a tu código CSS.

Más información: http://getbem.com/

Scalable and Modular Architecture for CSS (SMACSS)

Desarrollado en 2011 por Jonathan Snook, SMACSS funciona mediante organización de las reglas CSS en 5 categorías. (Base, Maquetación, Módulo, Estado y tema):

Base

Reglas básicas para elementos, atributos, pseudo-clases, etc… Normalize.css sería un ejemplo de reglas base

Ejemplos:

h1 {
 font-size: 32px;
}
div {
  margin: 0 auto;
}
a {
  color: blue;
}

Maquetación

Las reglas de estilo que están relacionados con el diseño estructural de la páginas. Contenedores, grillas, etc. Van con el prefijo layout- o l-

Ejemplos:

.layout-sidebar {
  width: 320px;
}
.l-comments {
  width: 640px;
}

Módulos

componentes re-usables y modulares

Ejemplos:

.call-to-action-button {
  text-transform: uppercase;
  color: #FFF200;
}
.search-form {
  display: inline-block;
  background-color: E1E1E1;
}

Estados

Las reglas de estilo que especifican el estado actual de algo en la interfaz.

Ejemplos:

.is-hidden {
  display: none;
}
.is-highlighted {
  color: #FF0000;
  background-color: #F4F0BB;
  border: 1px solid #CBBD15;
}

Temas

Es lo que en OOCSS se le llama “skin” o piel. En SMACSS es opcional, los estilos visuales pueden estar integrados a los módulos y estados o separados por tema para sitios en donde el usuario pueda elegir un tema, para sitios multi-lenguaje, etc…

SMACSS ofrece una nomenclatura más simple que BEM. No hay nombres para los estilos base ya que se usa los propios selectores (h1, p, a, etc.). A los módulos se les da un nombre de clase único. Los sub-componentes y las variaciones son prefijados con el nombre el módulo padre

Más información: https://smacss.com/. También existe un libro gratuito para indagar más en el tema.

CONCLUSIÓN

Todas las metodologías CSS tratan el problema de la escalabilidad y mantenimiento del código CSS proporcionando un sistema para organizar grandes diseños en módulos reutilizables .

Dichas metodologías hacen que sea más fácil de desarrollar e iterar un diseño. Hacen código front-end más fácil de leer y comprender, y hacen que sea más fácil para que otras personas colaboren en un diseño.

Debido a que las metodologías CSS fomentan la reutilización de código, eso se traduce en una reducción del tamaño y en un aumento de la velocidad de carga.

Pensad que no existe una metodología CSS «mejor». Diferentes enfoques funcionan mejor para diferentes personas, equipos o proyectos.

Se pueden combinar entre sí (OOCSS-SMACSS, o OOCSS-BEM, o BEM-SAMCSS, etc.) para adaptarse a las necesidades de un proyecto.

Existen otras metodologías que no hemos tratado aquí como Atomic CSS , DoCSSa, csstyle, etc.

También existen frameworks y librerías basadas en estas metodologías, como por ejemplo, inuit.css, Pure, Topcoat etc..

 

Esto ha sido todo. Un post un poco denso pero, a mi parecer, interesante y muy demandado en ofertas de empleo de empresas medianas-grandes actuales.

Espero que os haya gustado.

Saludos