He estado trabajando en este artículo para organizar mi código front-end. Hace referencia a artículos sobre BEM / SMACSS, que a su vez hacen referencia a otros artículos.
Realmente estoy tratando de entender cuáles son las mejores prácticas ... Tengo unos días para establecer este "estándar", y luego tengo que pasar por un proyecto de línea de tiempo de alta prioridad / alta visibilidad / limitado. Como tal, me gustaría asegurarme de que estoy comenzando con una base que escalará como lo hace mi aplicación.
Dado un componente llamado segment... Estoy creando páginas que tendrán ~ 10 segmentspor página. Cada uno segmentcompartirá la misma clase base. Sin embargo, algunos segmentstendrán modificadores (diferentes colores de fondo). Además, los elementos dentro de cada bloque (en el enfoque BEM) también tendrán modificadores. Para demostrar, aquí hay una implementación simple (con un solo elemento arrow, mientras que mi sitio completo tendrá 4-5 elementos en cada uno segment):
.segment__arrow {
position: absolute;
bottom: -24px;
left: 50%;
margin-left: -11px;
background-position: center no-repeat;
height: 21px;
width: 21px;
z-index: 2;
}
.segment__arrow--orange {
@extend .segment__arrow;
background-image: url('/images/arrow_orange.png');
}
.segment__arrow--white {
@extend .segment__arrow;
background-image: url('/images/arrow_white.png');
}Entonces este es el enfoque de clase única:
<div class="segment__arrow--white"> ... </div>Alternativamente, podría ir con el enfoque de múltiples clases:
.segment__arrow {
position: absolute;
bottom: -24px;
left: 50%;
margin-left: -11px;
background-position: center no-repeat;
height: 21px;
width: 21px;
z-index: 2;
}
.segment__arrow--orange {
background-image: url('/images/arrow_orange.png');
}
.segment__arrow--white {
background-image: url('/images/arrow_white.png');
}Donde estaría mi marcado:
<div class="segment__arrow segment__arrow--white"> ... </div>En tercer lugar, podría hacer:
.segment__arrow {
position: absolute;
bottom: -24px;
left: 50%;
margin-left: -11px;
background-position: center no-repeat;
height: 21px;
width: 21px;
z-index: 2;
}
.segment__arrow.orange {
background-image: url('/images/arrow_orange.png');
}
.segment__arrow.white {
background-image: url('/images/arrow_white.png');
}Y entonces mi clase def sería
<div class="segment__arrow orange"> ... </div>Quizás incluso el espacio de nombres naranja con algo como sa_orangeevitar selectores sueltos.
El resultado final que estoy buscando es menos código / más fácil de mantener (lo que probablemente descarta el enfoque de clase única (opción 1), como se describe en este gran artículo sobre arquitectura escalable. El enfoque de varias clases (opción 2) da como resultado mucha verbosidad (especialmente en mi HTML), pero es extremadamente explícito. El tercero usa un enfoque de varias clases, pero no usa modificadores de espacio de nombres (como .segment__arrow), por lo que es un poco menos detallado (pero también menos explícito y más alto) potencial de colisiones).
¿Alguien con experiencia en el mundo real con estas cosas tiene algún comentario sobre la mejor manera de abordar esto?
.orangeno tiene significado solo como modificador. No veo un gran problema al usarlo.segment__arrow--orangejunto con su enfoque multiclase. Por supuesto, en proyectos más grandes, su HTML podría estar un poco fuera de control (muchas clases).