Mejorá tu CSS con OOCSS, BEM y SMACSS

por Natalia Ventre el 25/06/2013 ・ podés leerlo en 7 minutos ・

¿Cuál es el problema con CSS? Estilos repetidos. Estilos repetidos no necesita aclaración, se trata de cuántas veces usaste la misma combinación de propiedad: valor en una hoja de estilos de un proyecto o cuántas veces escribiste el mismo código CSS para diferentes proyectos. Difícil de mantener. En la práctica se traduce como “No tengo la menor idea de qué va a pasar si modifico este estilo” y “Le agregué la clase .foo pero no funciona”.

OOCSS

Anteriormente en Jugando piedra, papel o tijera con CSS había mencionado cómo funciona la especificidad en CSS y de este tema justamente Nicole Sullivan habla en Nuestras mejores prácticas nos están matando. Con los selectores descendientes es difícil saber cuáles reglas se van a aplicar y terminás dependiendo 100% de las herramientas para desarrolladores de Chrome para saber cuál estilo se aplica, y estilos inline y declaraciones !important para que un elemento luzca como querés.

OOCSS (CSS orientado a objetos1) se basa en 2 principios:

  1. Separación de estructura y estilo visual: definir los estilos visuales (por ej. color de fondo y estilo de borde) como “skins” que se pueden aplicar a diversos módulos.
  2. Separación de contenedor y contenido: evitar el selector descendiente, por ej. no usar .sidebar h3.

OCCSS promueve la creación de una librería de componentes re-utilizables dentro del mismo sitio o entre proyectos. Los componentes son independientes de la ubicación en la página, se comportan en forma predecible, son por lo tanto portables y se pueden combinar para extender un módulo base. Para que la cascada se comporte de manera predecible se usan selectores de clase.

Aplica el principio DRY (no te repitas) y por lo tanto produce CSS:

  • Escalable: se aplica a proyectos de cualquier tamaño.
  • Fácil de mantener: es una arquitectura transparente que sigue el principio de única responsabilidad. La arquitectura se refiere a qué selectores usás.
  • Rápido: Menos CSS = más velocidad.

Aplicación de OOCSS: el objeto media

El objeto media es una imagen y un contenido (texto) lado a lado, como en por ej. una actualización de estado, el avatar del remitente y el asunto de un email, una noticia con foto, etc. según se explica en The media object saves hundreds of lines of code.

<div class="media status">
	<a class="img" href="http://www.example.com/user/username">
		<img src="/images/profile-pic.jpg" alt="Nombre Usuario" />
	</a>
	<div class="bd">
		Condimentum Malesuada Tristique Risus Aenean
	</div>
</div>
.media,
.bd{
	/* clearfix para el contenedor exterior e interior */
	overflow: hidden;
}

.media .img{
	/* posicionamiento del contenedor de la imagen */
	float: left;
	/* si necesitás distintos márgenes, usá clases */
	margin-right: 10px;
}

.media .img img{
	display: block;
}

BEM

BEM (bloque, elemento, modificador) son una serie de principios desarrollados por la empresa de TI rusa Yandex para crear rápidamente sitios web fáciles de mantener en un período largo de tiempo.

  • Bloque: es una entidad independiente. Puede ser simple o compuesto por otros bloques. Ej.: buscador (simple) o cabezal (compuesto).
  • Elemento: parte de un bloque que cumple una función. Ej.: input y botón.
  • Modificador: con un modificador se crea un bloque similar a otro existente. Por ej. para indicar un elemento activo de un menú, se usa un modificador.

Los bloques y elementos tienen nombres únicos (selectores de clase CSS). Si el bloque es .nav, un elemento se llamaría .nav__item y un modificador sería .nav__item–activo.

SMACSS

SMACSS por Jonathan Snook

SMACSS (Arquitectura modular y escalable para CSS) es una guía de estilo escrita por Jonathan Snook un diseñador, desarrollador web y autor de The Art and Science of CSS publicado por SitePoint. SMACSS abarca 12 capítulos que se pueden leerle gratuitamente online que explican cómo categorizar las reglas CSS. El acceso premium incluye 4 capítulos extras, sobre cómo aprovechar las características de los pre-procesadores de CSS para trabajar con SMACSS, cuándo definir estilos base y cuándo definir módulos, cómo trabajar con iconos, cómo lidiar con estados complejos y 2 videos.

SMACSS se basa en organizar las reglas CSS en 5 categorías:

  • Base: reglas básicas para elementos (o [atributos], pseudo-clases, etc.). Normalize.css es un ejemplo de reglas básicas.
  • Maquetación: define las secciones de una página (grilla).
  • Módulo: componentes re-usables y modulares.
  • Estado: cómo luce un módulo a través de diferentes estados, o sea clases que se agregan vía JavaScript (oculto/expandido, activo/inactivo) y a través de distintas vistas (homepage, página interior).
  • Tema: es lo que en OOCSS se le llama “skin”. 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-lenguaje2, etc.

La convención es nombrar las clases con un prefijo que indica la categoría. Los módulos no llevan prefijos y los sub-módulos llevan como prefijo el nombre del módulo padre.

Arquitectura CSS

  • Semántico vs Genérico: La arquitectura CSS tiene que ver con encontrar un punto intermedio entre semántico y genérico. Los nombres de las clases deben ser lo suficientemente claros para entender qué son, pero no tan específicos que no se puedan re-utilizar.
  • Diseño vs Refactorización: El diseño es un proceso creativo y cada sitio web es único. Podés empezar desde el primer día con la arquitectura CSS en mente, pero generalmente es un proceso porque necesitás tener una cierta cantidad de elementos del diseño definidos para poder abstraer patrones que se repiten. Una vez que el sitio web está online no deberías tener que refactorizar para agregar un nuevo componente.
  • Único vs Re-usable: Que diseñes sitios web a medida no significa que tengas que resolver los mismos problemas una y otra y otra y otra vez.
  • Nombres vs Mantenimiento: Durante el desarrollo tener una guía de cómo nombrar objetos te sirve para no perder tiempo pensando en qué nombre de clase le pongo al título del formulario. Los nombres de clase con prefijos son útiles para el mantenimiento porque es muy obvio saber a qué van a afectar y podés introducir un objeto nuevo con la seguridad de que no vas a alterar uno existente.

Frameworks basados en BEM, OOCSS y SMACSS

Estos frameworks son ejemplos de aplicaciones de los conceptos de BEM, OOCSS y SMACSS. inuit no tiene diseño, es solamente una colección de objetos CSS. Pure y Topcoat soportan temas personalizados.

  • inuit.css es un framework open source que sigue la convención de nombres BEM y los principios OOCSS desarrollado Harry Roberts, un joven desarrollador web y arquitecto front-end. Es un framework modular que consiste en una serie de objetos y abstracciones, no de elementos de diseño como Bootstrap. “Generic” incluye normalize.css, el clearfix, etc. “Base” son reglas básicas para títulos, tablas y otros elementos. Finalmente “Objects” es la parte más interesante, con los objetos CSS con código profusamente comentado. inuit está desarrollado en Sass, podés modificar las variables y extenderlo con tu propia UI.
  • Pure: de Yahoo! consiste en una serie de módulos según se definen en SMACSS. Así como en otros frameworks podés modificar variables, en Puere podés construir una skin en un editor visual.
  • Topcoat de Adobe es un framework CSS para aplicaciones web basada en la arquitectura BEM y enfocada en el rendimiento. Automáticamente genera una guía de estilos, incluye archivos PSD, una colección de iconos en formato SVG y la fuente Adobe Source Sans Pro.

Conclusiones

BEM, OOCSS, y SMACSS surgieron como soluciones a problemas de mantenimiento de hojas de estilos CSS en grandes proyectos web, pero el concepto es aplicable a todo tipo de proyectos. El OOCSS de Nicole Sullivan es el más general y abstracto de los modelos y la metodología BEM son reglas demasiado estrictas (¿qué guión uso?). Personalmente el enfoque que más me gusta es el que plantea Jonathan Snook en SMACSS porque la categorización de las reglas es intuitiva y la convención de nombres es sencilla.


  1. Un objeto CSS es un patrón puramente visual que consiste en HTML, CSS, assets (por ej. imágenes de fondo) y JavaScript (opcional) asociado al elemento.

  2. Podés hacer ajustes tipográficos para optimizar un sitio web para diferentes idiomas.