Share
Vi siete mai chiesti come un grande sito come Tuts + mantenga CSS, HTML e JavaScript per continuare lo sviluppo e l'iterazione? Ti mostrerò il processo che abbiamo implementato per mantenere tutto in ordine e manutenibile.
Il primo passo in questo processo è stato trovare un modo per costruire la grande quantità di CSS di cui abbiamo bisogno che non finirà inevitabilmente nel caos.
Tradizionalmente con i CSS, gli stili vengono creati quando ne hai bisogno e ti sforzano di rendere ampiamente applicabili i tuoi selezionatori in modo che possano essere riutilizzati in tutto il sito. Ad esempio, ecco alcune semplici regole CSS che non si sentirebbero fuori posto nella maggior parte dei fogli di stile:
h1 font-size: 22px; .subtitle font-size: 18px;
Se è necessario eseguire l'override di questi selettori in una parte specifica di una pagina, è possibile utilizzare regole nidificate per costruire selettori che hanno come target elementi più specifici:
.site-header h1 font-size: 40px; .site-header .subtitle font-size: 28px; .site-header a.navigation color: # 136FD2 ...
Questo approccio sembra intuitivamente corretto, tuttavia può avere alcuni problemi significativi quando si arriva a un sito che ha più di poche pagine e su cui più di uno sviluppatore sta lavorando.
Cosa succede quando cambiamo lo stile di h1 o .sottotitolo a livello globale? dimensione del font è già sovrascritto da uno stile più specifico, ma se aggiungiamo un font-weight o altezza della linea non lo sarà. Eventuali modifiche apportate agli stili globali possono propagarsi e influire su stili più specifici in modi non prevedibili senza una conoscenza approfondita di tutti gli stili sul sito.
Maggiore è il numero di stili creati in questo modo, più pronunciati saranno gli "effetti collaterali" degli stili CSS interattivi, che richiedono errori e tentativi stancanti per rimettere a posto e, in ultima analisi, una perdita di produttività e un maggior numero di errori che si insinuano nella produzione.
Per aiutare a prevenire questo problema, abbiamo adottato un approccio ai CSS basato sulla metodologia BEM. Invece di definire stili che si applicano a livello globale, tutti gli stili sono silenziati in "blocchi" autonomi mediante una convenzione di denominazione. Un "blocco" è definito, più o meno, come una singola unità indipendente di contenuto che è potenzialmente riutilizzabile (anche se non è obbligatorio che sia effettivamente riutilizzato).
Ad esempio, diamo un'occhiata al blocco "featured-sections":
Secondo la nostra convenzione di denominazione, questo blocco ha una radice div elemento con il nome della classe -sezioni presenti. Contiene elementi con nomi di classi come In primo piano-sections__title e In primo piano-sections__section-link.
Stiamo usando una convenzione di denominazione corrispondente per il nostro codice sorgente, come tale tutti gli stili per questo In primo piano sezione blocco sono memorizzati in moduli / featured_section.sass:
.margine sezioni: 0 0 $ gutter-width 0 padding-top: 8px border-top: 4px solid # dae1e5 .featured-sections__title color: # 8fa6b3 font: grassetto 14px / 1.2em $ font
Questa convenzione di denominazione garantisce che gli stili non siano più in conflitto e si mescolino. Finché la nostra convenzione di denominazione viene seguita, con il nome del blocco all'inizio di ogni nome di classe, è impossibile per uno stile influenzare qualcosa al di fuori del proprio blocco.
Inoltre, è estremamente semplice capire dove cercare nella base di codice gli stili corrispondenti a un elemento. Puoi semplicemente guardare il nome della classe dell'elemento e conoscere il nome del foglio di stile da aprire.
Abbiamo scelto di andare oltre e applicare questa convenzione di denominazione anche alle nostre opinioni. Ogni blocco ha una vista parziale con lo stesso nome, memorizzata sotto visualizzazioni / moduli. Ad esempio la visualizzazione HTML per il nostro -sezioni presenti il blocco vive dentro views / modules / _featured_sections.html.slim:
Allo stesso modo che avere una convenzione di denominazione per i nostri file CSS rende facile trovare uno stile CSS, avere questa convenzione di denominazione per le nostre viste rende facile trovare il codice di visualizzazione. Ciò risulta utile quando si visualizza una pagina in un browser e si nota una parte specifica che richiede alcune modifiche. Puoi semplicemente fare un "Ispeziona elemento" e usare il nome del blocco chiaramente visibile nella classe CSS di un elemento per aiutarti a saltare direttamente al file di visualizzazione pertinente.
Abbiamo anche seguito e adottato le stesse convenzioni di denominazione per il nostro codice JavaScript, con un po 'di aiuto da Backbone.js.
Ogni blocco che richiede un comportamento JavaScript applicato ottiene un oggetto vista Backbone usando questo stesso nome di blocco:
Accentsconagua
class window.AccountHeader estende gli eventi di Backbone.View: 'cambia .account-header__mobile-menu-select': 'mobileMenuChange' mobileMenuChange: -> document.location = @_selectedOption (). data ('url') _selectedOption: -> @ $ 'opzione: selezionato'Abbiamo scritto alcune viste che caricano il codice che viene applicato al caricamento della pagina, quindi la vista Backbone appropriata viene caricata automaticamente per ogni elemento con una classe CSS che corrisponde a un elenco di nomi di blocchi con JS associato.
Usiamo la stessa convenzione di denominazione dei file anche per il nostro codice JavaScript, risultando nella struttura per un blocco completo caratterizzato da questo:
Consiglio vivamente questo approccio per qualsiasi progetto. Penso che sia di valore inestimabile quando si lavora su un grande progetto, e anche se si sta lavorando su un sito molto più piccolo, non c'è davvero alcun svantaggio nella strutturazione del codice front-end in modo modulare.
Detto questo, potresti incontrare problemi nel tentativo di utilizzare questa strategia se hai già una quantità significativa di stili CSS globali o se ti affidi alle librerie CSS come Twitter Bootstrap. Poiché gli stili BEM usano un singolo nome di classe come selettore, hanno un valore di "specificità" CSS molto basso e tendono a essere calpestati da stili CSS globali che spesso presentano più livelli di selettori annidati, nonché nomi di tag e ID.
È sicuramente ancora possibile passare da uno stile CSS globale a uno stile BEM più modulare, e direi che ne vale la pena a lungo termine. Tuttavia, aspettati di avere un po 'di tempo per costruire i tuoi stili BEM per un po' e preparati a vivere aggiungendo almeno un po 'di tempo !importante dichiarazioni in tutto il tuo CSS, fino a quando non sarai in grado di eliminare completamente i tuoi stili globali.
