Las metodologías OOCSS, BEM y SMACSS para organizar los estilos CSS

Las funciones de un preprocesador y algunas nativas como variables, funciones, mixis, operaciones matemáticas o anidaciones de estilos no son garantía para escribir código CSS bien organizado pero no son garantía para escribir código CSS con menos líneas de código, más mantenible y legible.

Por otro lado, en un proyecto en el que trabajan varias personas es recomendable seguir alguna metodología o convenciones como guía para editar los estilos y mantener la uniformidad del código. Para CSS hay varias metodologías entre las más utilizadas están OOCSS, BEM y SMACSS. Cada una de estas metodologías son independientes pero a veces se aplican varios de los principios y varias metodologías al mismo tiempo.

OOCSS

La metodología Object-Oriented CSS o OOCSS se basa en los siguientes dos principios:

• Separar la estructura del diseño.
• Separar contenedor del contenido.

En CSS hay propiedades de estructura que son invisibles al usuario pero modifican el tamaño y posición de un elemento y otro grupo de propiedades que modifican el aspecto visual de un elemento. En esta metodología los nombres de los estilos no deben contener referencias a los nombres de las propiedades.

Algunas propiedades de estructura son:

• Height
• Width
• Margin
• Padding
• Overflow

Por otro lado, las propiedades de apariencia son propiedades que modifican el aspecto visual de los elementos:

• Color
• Font
• Shadow
• Gradient

Separar la estructura del diseño

Para aplicar la regla de separar la estructura del diseño en OOCSS se diferencian las propiedades que modifican la estructura de las propiedades que modifican el diseño, para ello se crean diferentes estilos sin mezclar propiedades de estos dos grupos. Por ejemplo, las propiedades padding o margin son propiedades que modifican la estructura o maquetación mientras que color o border son propiedades que modifican la visualización pero no la maquetación.

Estos son dos ejemplos de estilos que mezclan tanto propiedades de estructura como de diseño visual.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

.block-red {
    width: 200px;
    height: 50px;
    padding: 10px;
    border: solid 1px #000;
    background: linear-gradient(#ccc, #f00);
  }
  
  .block-blue {
    width: 200px;
    height: 50px;
    padding: 10px;
    border: solid 1px #000;
    background: linear-gradient(#ccc, #00f);
  }

1
2

<div class="block-red"></div>
<div class="block-blue"></div>

En los estilos anteriores no se separa la estructura del diseño, las propiedades de estructura están repetidas en ambos estilos y las propiedades de diseño no son reutilizables en otros elementos. Aplicando la primera regla de OOCSS los estilos quedan de la siguiente forma.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

.block {
  width: 200px;
  height: 50px;
  padding: 10px;
}

.red {
  border: solid 1px #000;
  background: linear-gradient(#ccc, #f00);
}

.blue {
  border: solid 1px #000;
  background: linear-gradient(#ccc, #00f);
}

1
2

<div class="block red"></div>
<div class="block blue"></div>

Separar contenedor del contenido

La segunda regla trata de evitar que los estilos dependen del contenedor en el que están dada la estructura de HTML ya que esto hace que el estilo aplicado al contenido no sea reutilizable.

Estos son dos ejemplos de estilos en los que el contenedor y contenido tienen una dependencia.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

header h1 {
  font-family: 'Roboto', Helvetica, sans-serif;
  font-size: 2em;
  color: #F44;
}

footer h1 {
  font-family: 'Roboto', Helvetica, sans-serif;
  font-size: 1.5em;
  color: #F44;
  opacity: 0.5;
  filter: alpha(opacity = 50);
}

1
2
3
4
5
6

<header>
    <h1>Title</h1>
</header>
<footer>
    <h1>Title</h1>
</footer>

Aplicando OOCSS para separar el contenedor del contenido los estilos se transforman en los siguientes.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

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; }

.muted {
   opacity: 0.5;
   filter: alpha(opacity = 50);
}

1
2
3
4
5
6

<header>
    <h1 class="h1-size">Title</h1>
</header>
<footer>
    <h1 class="h3-size muted">Title</h1>
</footer>

BEM

La metodología Block Element Modifier o BEM se basa en que las páginas web están compuestas de bloques como encabezado, pié de página o contenido, dentro de esos bloques están elementos como título, fecha o texto y los elementos tienen modificadores que varían su apariencia como estilo de fuente o color. La ventaja de BEM es que los estilos de un bloque están separados de los estilos de otros bloques de modo que cada uno de ellos se puede modificar de forma independiente sin afectar a otros.

La nomenclatura usa dos guiones bajos para separar el bloque de un elemento y dos guiones medios para separar el modificador. Se usan dos guiones para no crear ambigüedad en caso de que el elemento tenga un guión medio en el nombre. Un defecto de esta nomenclatura es que genera nombres largos para los nombres de los estilos.

Para nombrar las clases de los estilos se siguen unas convenciones:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

.bloque {
  width: 200px;
  height: 50px;
  padding: 10px;
}
 
.bloque__elemento {
  font-family: 'Roboto', Helvetica, sans-serif;
}
 
.bloque__elemento--modificador {
  color: #000;
}

En este ejemplo hay un bloque header, los elementos title, date y text y un modificador secondary para el título.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

.header {
  width: 200px;
  height: 50px;
  padding: 10px;
}

.header--small {
  width: 150px;
  height: 50px;
  padding: 10px;
}

.header__title {
  color: #000;
}

.header__date {
  color: #000;
}

.header__text {
  font-family: 'Roboto', Helvetica, sans-serif;
}

.header__title--secondary {
  color: #aaa;
}

SMACSS

SMACSS son las siglas de Scalable and Modular Architecture for CSS es otra metodología CSS que tiene como objetivo que el código CSS sea mejor, más fácil de leer y modular. En SMACSS se separan los siguientes elementos.

• Base: son los elementos base de una página web como body, h1 o a.
• Layout: se divide la página en varias secciones de estructura como header, sidebar, content o footer. Forman la estructura de la página. Los estilos de layout se preceden con l- para distinguirlos de los de los módulos.
• Modules: son los elementos que forman la página.
• State: modifican el aspecto de los elementos en comportamientos en situaciones con interactividad como oculto, expandido, modificado o con errores. Los estilos se preceden con is-.
• Theme: modifican la apariencia de un elemento según el layout y módulo.

Elementos base.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

html {
  margin: 0;
  font-family: sans-serif;
}
 
a {
  color: #000;
}
 
button {
  color: #ababab;
  border: 1px solid #f2f2f2;
}

Elementos de layout.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

#header { 
  background: #fcfcfc;
}

#header .l-right {
  float: right;
}

#header .l-align-center {
  text-align: center;
}

Un módulo.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

.article {
  background: #f32;
}

.article--title {
  font-size: 16px;
}

.article--text {
  font-size: 12px;
}

Estilos de estado.

1
2
3

.nav--item.is-selected {
  color: #fff;
}

Estilos de tema que modifican la apariencia.

1
2
3
4

.button-large {
  width: 60px;
  height: 60px;
}