Metodología ISO: guía de naming CSS de atQuo

Versión: 1.8 (septiembre de 2025)

Filosofía: Estructura robusta, contenido flexible.

La metodología ISO resuelve el «impuesto a la decisión» y la fragilidad inherentes al desarrollo web colaborativo, en el que diversos equipos (internos, autónomos, agencias) suelen perder horas depurando conflictos o descifrando convenciones de nomenclatura inconsistentes. Al aplicar una estructura rígida de tres partes separadas por guiones bajos ([DÓNDE] _ [QUÉ] _ [QUÉ]), pero permitiendo una flexibilidad total dentro de esos límites, la ISO crea un «cortafuegos» alrededor de cada sección de un sitio web. Esto garantiza que un profesional independiente que trabaje en una sección de «héroes» pueda moverse a la máxima velocidad utilizando su estilo de nomenclatura preferido sin temor a romper el «pie de página», lo que elimina la carga cognitiva que supone el estricto dogma de la nomenclatura y garantiza la coherencia estructural necesaria para una producción escalable y de alta velocidad.

¿Por qué le hemos dado este nombre? ISO significa Isolation (Aislamiento), Structure (Estructura), Object (Objeto). Se refiere a aislar el código para evitar conflictos, forzar una estructura simple para la consistencia y definir claramente el objeto HTML que se está diseñando.

1. El concepto: un marco, no una prisión

Esta metodología no busca imponer cómo para nombrar cosas, pero ayudar cómo estructurarlos para que no se rompan.

Es un sistema robusto y sencillo:

• ¿Su equipo prefiere los nombres cortos (hro1)? Funciona.
• ¿La agencia prefiere los nombres descriptivos (hero-home)? Funciona.
• ¿Colaboran dos equipos con estilos diferentes? Funciona.

Mientras todos respeten la Estructura Sagrada, el sistema puede soportar cualquier estilo sin romperse.

2. La única regla sagrada

Para evitar la lectura de manuales extensos, solo hay una ley:

La clase debe tener 3 partes, separadas por guiones bajos.

[DÓNDE] _ [QUÉ] _ [CUÁL]

El guión bajo (_) es el muro de contención. Permite que exista flexibilidad sin causar caos.

3. La fórmula flexible

A. [DÓNDE] _ (El identificador o el ámbito)

Define la sección. Es la burbuja de aislamiento.

Libertad total: usa lo que tu equipo decida que es más claro.

• nav_ (Sencillo)
• hro1_ (Numérico/Secuencial)
• hero-main_ (Descriptivo)
• campaign-xmas_ (Específico)

Regla de oro: Todo lo que esté dentro de esa sección debe comenzar con este mismo prefijo.

B. [QUÉ] _ (El objeto)

¿Qué es el elemento HTML? Mantén esto simple para que cualquier desarrollador lo entienda rápidamente.

• wrap (contenedor)
• grid, col (diseño)
• card (componentes)
• head, text (tipografía)
• img, icon, btn, link (imágenes y acciones)

C. [CUÁL] (La variante)

El apellido. Sea tan específico como lo requiera el diseño.

• principal
• intro-audaz
• función: modo oscuro

4. Ejemplos de flexibilidad en acción

El sistema se adapta al equipo, no al revés.

Por ejemplo, un equipo de «velocidad» podría preferir escribir menos y elegir una clase como hro1_text_intro. Esto funciona perfectamente porque el guión bajo mantiene el orden estructural incluso con códigos cortos.

Un equipo de «claridad», por otro lado, podría preferir leer un inglés claro y optar por hero-home_text_intro. El subrayado separa los conceptos de la misma manera, lo que garantiza la legibilidad.

Por último, es posible que un equipo «empresarial» deba ser extremadamente específico y utilizar algo como srv-new-design_card_dark. El sistema admite ese nivel de detalle sin romper la estructura.

¿Ves el patrón? No importa el estilo, la estructura visual _ _ siempre te indica dónde cortar.

5. Ejemplos prácticos de código

Ejemplo A: estilo descriptivo (agencia externa)

Ideal si colaboras con agencias que no conocen tus códigos internos.

<section class="landing-page_wrap">
  <div class="landing-page_grid_hero">
    
    <div class="landing-page_col_content">
      <h1 class="landing-page_head_main-title">We do more</h1>
      
      <div class="landing-page_wrap_buttons">
        <a href="#" class="button-primary">Start</a> <!-- Global -->
      </div>
    </div>

  </div>
</section>

‍
Ejemplo B: estilo corto (equipo interno/Relia)

Ideal para una iteración rápida y un mantenimiento diario.

<section class="srv1_wrap">
  <div class="srv1_grid_list">
    
    <div class="srv1_card_item">
       <h3 class="srv1_head_card">Relia</h3>
       <p class="srv1_text_desc">Subscription.</p>
    </div>

  </div>
</section>

6. Resumen para nuevos colaboradores (inicio)

1. Defina su prefijo: ¿Cómo quiere llamar a esta sección? (hero-main, footer, cta-2). Ese es tu [DÓNDE].
2. Añadir un guión bajo: _
3. Di lo que es: (texto, imagen, tarjeta). Ese es tu [QUÉ].
4. Añadir un guión bajo: _
5. Di cuál es: (título, principal, azul). Ese es tu [CUÁL].

Resultado: hero-main_text_title