{ . . . }

Metodologías Modulares en CSS

Con el pasar del tiempo han surgido formas de escribir código escalable y modular por medio del lenguaje de estilos CSS llevando estas metodología a una filosofía que relaciona al lenguaje de estilos con el HTML como el lenguaje de marcado que define la estructura del sitio. Hay muchas ventajas en tener un código estructurado de forma modular ya que este será reusable en todos sus aspectos lo que lo vuelve flexible y escalable permitiéndonos iterar en bloques independientes de código dándonos esto un mejor desempeño a la hora de la creación, mantenimiento y modificación del sitio.

Actualmente existen tres principales métodos para escribir HTML y CSS de forma modular (por lo menos los mas grandes y conocidos), estos son:

  1. (OOCSS) “Object Oriented CSS”
  2. (SMACSS) “Scalable and Modular Architecture for CSS”
  3. (BEM) “Block, Element, Modifier”

OOCSS

La idea de la Metodología OOCSS es separar en cierta forma la estructura del sitio de su piel “Skin” también podemos considerar la separación del contenedor y su contenido. Ahora, cuando separáramos la estructura de la piel del sitio para definir características visuales el código generado para esto puede ser reutilizado en otra situación donde lo requiramos. El objetivo de este método es fomentar la reutilización de código lo que sin duda nos convertirá en frontends más eficientes generando hojas de estilos fáciles de mantener.

<div class="bloque simple">
	<div class="bloque-control abierto">
		<h1 class="bloque-titulo">Titulo 1</h1>
	</div>
	<div class="bloque-detalle abierto"> Lorem ipsum dolor sit amet </div>
	Lorem ipsum dolor sit amet 
</div>

En el ejemplo anterior, el bloque planteado puede ser reutilizado en diferentes situaciones, se puede mostrar con diferentes apariencias ya que los estilos de apariencia se especificarán en la regla .simple y podemos tener otras regla como .complejo o .medio con otras apariencia totalmente diferente. A la final tendremos la estructura en la clase .bloque y la apariencia en .simple.

La separación entre contendido y contenedor es simplemente dejar de usar la ubicación o tipo de elemento como un calificador de estilos o selector para aplicarle estilos, la idea es utilizar clases reutilizables por ejemplo: .bloque-titulo que aplicara los estilos al elemento h1 permitiendo utilizar esta misma regla en otros bloques u elementos.

Esta metodología es útil cuando tenemos muchos componentes  y tengamos la necesidad de combinarlos, mezclarlos y mostrarlos de forma diferentes manteniendo la misma estructura, un buen ejemplo de este enfoque es el mismo Bootstrap, un sistema complejo lleno de componentes con diferente apariencia donde su objetivo es crear un completo sistema capaz de soportar  cualquier interfaz de usuario que el desarrollador o frontend desee armar.

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

SMACSS

smacss-metodologia

la Metodología SMACSS es algo parecido a OOCSS pero sus principales enfoque son aumentar el valor semántico de una sección del documento y disminuir la expectativa de una estructura HTML. Este sistema enfoca la categorización de estilos CSS y los clasifica en 5 grupos de reglas que se agrupan en archivos separados. (Base, Layout, Module, State, Theme).

Base: Las reglas agrupadas en esta categoría se aplican a los selectores de elementos o etiquetas HTML. Hay que tener en cuenta que los estilos para los selectores ID y CLASS no se aplican en este grupo de reglas.

Layout: Las reglas de estilos agrupados en layout se aplican a los componentes estructurales de un sitio como por ejemplo: el #header, #footer, #sidebar etc, en si a las diferentes partes o regiones que forman parte de  la estructura de un diseño.

Module: Esta categoría agrupa los estilos que se aplican a los elementos considerados como modulos, que a la final vienen siendo los elementos que se ubican dentro de los elementos principales del Layout como por ejemplo, los widgets, barras de navegación o cualquier componente que se considere secundario.

State: Las reglas de estado reúnen estilos de cambios como los estado hover de las navegaciones, ítems activados de componentes que tienen elementos activos como acordeones etc, es decir componentes de módulos que pueden cambiar de aspecto según la interacción de los usuarios.

Theme: Apila las reglas de estilos que se aplican al proyecto como tal, lo que lo vuelve único e identificativo, aquí se reúnen  las reglas de color, tipografía etc. Una capa visual que nos permite cambiar de apariencia fácilmente.

También debemos de tener en cuenta lo que dice el autor de este método Jonathan Snook en su libro SMACSS donde menciona los beneficios de una convención de nomenclatura para definir nombre de estilos, esto para comprender de inmediato a que categoría pertenece un estilo como tal y el papel que juega dentro del ámbito general de la pagina.

<div class="bloque bloque-simple">
	<div class="bloque-control activo">
		<h1 class="bloque-titulo">Titulo 1</h1>
	</div>
	<div class="bloque-detalle activo"> Lorem ipsum dolor sit amet </div>
	Lorem ipsum dolor sit amet 
</div>

Seguimos con el bloque HTML que utilizamos en el metodo anterior, pero esta vez está en disposición para aplicar el método SMACSS donde podemos tener los estilos de módulos (.bloque, .bloque-titulo, .bloque-detalle, .bloque-control), submodulos (.bloque-simple) y el grupo de estado (.activo).

Más información: https://smacss.com/

BEM

en.bem.info

El tercer método es el BEM ( Block, Element, modifier) y está al otro lado del espectro de SMACSS. Este método viene de los desarrolladores del buscador Yandex y en si es una convención de nomenclatura que nos presenta una manera inteligente de darle nombres de clases coherentes a los diferentes elementos para darle más sentido a lo que desarrollamos y así al darle estilos se entienda mas la relación HTML, CSS. Veamos:

  • Block: (bloque) Este es el nombre del elemento padre.
  • Element: (Elemento) Este es el nombre del elemento dentro del bloque.
  • Modifier: (Modificador) Esta es Cualquier modificación asociada con el bloque o el elemento.

los objetivos de esta metodología son: El desarrollo rápido, El trabajo en equipo, Escalabilidad y la reutilización de código.

veamos cómo se aplicaría esta metodología al bloque de HTML que venimos tratando:

<div class="bloque bloque--simple">
	<div class="bloque__control bloque__control--activo">
		<h1 class="bloque__titulo">Titulo 1</h1>
	</div>
	<div class="bloque__detalle bloque__detalle--activo"> Lorem ipsum dolor sit amet </div>
	Lorem ipsum dolor sit amet 
</div>

BEM utiliza una convención muy concisa para la creación de estas cadenas de clase, que pueden llegar a ser bastante largas pero clarificadas. Los elementos se añaden después de un doble guión al piso o underscore Ej: ( bloque _control) y los modificadores se añaden después de un doble ( –activo). Algo más o menos asi:

.bloque {}
.bloque__elemento {}
.bloque__elemento--modificador {}

Más información: https://en.bem.info/

 

¿Cual elegir?

dudaPienso que a la final, lo único que importa es encontrar una solución que funciona para cada uno. No elija una convención porque es popular, porque este hablo bien de ella, porque este colega la utiliza, en fin. Los tres enfoques nos dan una filosofía y herramientas muy similares para trabajar, y se integrarán con cualquier sistema de diseño de manera muy similar, conozco gente que han creado su propio sistema como resultado de una mezcla de los diferentes métodos creando un “OOSMABEM“, jaja y les funciona, porque no, todo es probar y quedarnos con lo que nos sirva y nos ayude. En fin, La idea de todos es que nuestra organización de estilos pueda ser mas entendible, coherente, legible, modular y escalable.

Comentar

avatar
Ordenar:   Nuevos | Antiguos | Más votados
Facundo Herrera

Muy bueno! muy esclarecedor , voy a tratar de implementar alguna de estas metodologias.
Te hago una consulta, cual de estas ocupas vos?

Henrry Saa

Muy buen articulo pero se podría combinar mas de una metodología en un solo proyecto??

wpDiscuz