Ho lavorato su questo articolo per organizzare il mio codice di front-end. Fa riferimento agli articoli su BEM / SMACSS, che a loro volta fanno riferimento ad altri articoli.
Sto davvero cercando di capire quali sono le migliori pratiche ... Ho un paio di giorni per stabilire questo "standard", e poi devo bruciare un progetto di timeline ad alta priorità / alta visibilità / limitato. In quanto tale, mi piacerebbe assicurarmi di iniziare con una base che verrà scalata come fa la mia app.
Dato un componente chiamato segment ... Sto creando pagine che avranno ~ 10% disegments per pagina. Ogni segment condividerà la stessa classe base. Tuttavia, alcuni segments avranno su di essi dei modificatori (colori di sfondo diversi). Inoltre, gli elementi all'interno di ogni blocco (nell'approccio BEM) avranno anche i modificatori. Per dimostrare, ecco una semplice implementazione (con solo un singolo elemento arrow , mentre il mio sito completo avrà 4-5 elementi in ogni 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');
}
Quindi questo è l'approccio a una sola classe:
<div class="segment__arrow--white"> ... </div>
In alternativa, potrei seguire l'approccio multi-classe:
.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');
}
Dove il mio markup sarebbe:
<div class="segment__arrow segment__arrow--white"> ... </div>
Terzo, potrei fare:
.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');
}
E poi la mia classe def sarebbe
<div class="segment__arrow orange"> ... </div>
Forse anche namespacing orange con qualcosa come sa_orange per evitare selettori allentati.
Il risultato finale che sto cercando è meno codice / più facile da mantenere (il che probabilmente esclude l'approccio a classe singola (opzione 1), come descritto in questo ottimo articolo su architettura scalabile L'approccio multi-classe (opzione 2) risulta molto verboso (specialmente nel mio HTML), ma è estremamente esplicito. Il terzo usa un approccio multi-classe, ma non usa i modificatori con namespace (come .segment__arrow), quindi è un po 'meno verboso (ma anche un potenziale meno esplicito e più elevato per le collisioni).
Qualcuno con esperienza del mondo reale con questa roba ha qualche feedback sul modo migliore per avvicinarsi a questo?