Best practice per progetti front-end con molte viste

4

Siamo un piccolo team di sviluppo front-end che lavora con 18 mesi di esperienza e recentemente ci siamo messi in contatto con un primo grande progetto, ovvero. una web app di back office di media complessità, ma con molte e molte viste.

Dato che ci sono ovviamente nuove serie di problemi in questo progetto che incontriamo ogni giorno, renderebbe davvero la nostra vita molto più semplice se riusciremo a ottenere alcuni suggerimenti sulle migliori pratiche.

Dubbi

  • Se abbiamo 100 diverse viste, creiamo 100 file css (un css per visualizzazione) e 1 file css base / predefinito per lo stile comune o solo un grande file css che fornisca lo stile per tutte le viste?

  • Nel caso in cui vogliamo caricare un foglio di stile come un singolo file, è possibile solo questo usando i preprocessori in cui possiamo effettivamente importare e unire file css diversi?

  • Come facciamo a tenere traccia della classe unica quando si uniscono più file css?

  • Se carichiamo una pagina B all'interno di un div in una pagina A, dove teniamo css, nella pagina A o B? La pagina B è usata solo come modal nella pagina A

  • Dato che ci sono ovviamente molte icone, immagini, javascript, ecc. separiamo la nostra cartella di contenuti in base alle visualizzazioni, come contenuto / vista1, contenuto / vista2 o mettiamo tutto il contenuto in una singola directory?

Apprezzeremmo qualsiasi risposta sulle migliori pratiche!

    
posta John 08.03.2017 - 17:07
fonte

3 risposte

1

IMO, la maggior parte di questo potrebbe essere risolto usando:

  • Pre-elaboratori CSS, come SASS o MENO

  • Un qualche tipo di standard CSS, che sia BEM , qualcos'altro, o qualcosa che ti viene in mente internamente, ma assicurati che è coerente e tutti lo sanno (e ne è a bordo).

  • Inoltre, se disponi di molte risorse (file JS, ecc.) inizia con una directory /assets (o /resources , ecc.) e inserisci file CSS in /assets/css file JS in /assets/js Oppure puoi anche usare qualcosa come Bower

Ovviamente, tutto dipende da che cosa è basata l'app di back-office e dalle cose a cui i tuoi colleghi / la tua azienda hanno familiarità o con cui hanno familiarità.

    
risposta data 08.03.2017 - 18:10
fonte
0

If we have 100 different views, do we make 100 css files (one css per view) and 1 basic/default css file for common styling or just one big css file that would provide style for all the views?

A meno che non ti aspetti che lo stile delle tue visualizzazioni cambi in modo indipendente l'uno dall'altro e su base frequente, dovresti cercare di limitarti al minor numero possibile di CSS.

Potresti avere un paio di CSS per i framework (ad esempio se hai un datepicker che si basa su certe definizioni di stile, o se decidi di usare Bootstrap CSS, che consiglio). Oltre a questo, hai solo bisogno di un file CSS.

In case we want to load a stylesheet as a single file, is this only possible using preprocessors where we can actually import and merge different css files? How do we keep track of unique class when merging multiple css files? If we load a page B inside a div in a page A, where do we keep css, in page A or B? Page B is only used as a modal in page A

Una determinata pagina web dovrebbe fare riferimento a tutti i CSS di cui ha bisogno, direttamente. I CSS non hanno bisogno di fare riferimento l'un l'altro. Verranno uniti (in cascata) nel contesto del browser.

Since there are obviously many icons, images, javascript, etc. do we separate our content folder according to views, such as content/view1, content/view2 or we put all the content in a single directory?

Cartella singola. O ancora meglio, immagine singola, usando sprite .

    
risposta data 09.03.2017 - 00:26
fonte
0

Poiché la domanda sembra riguardare principalmente il CSS per un sito web / un'applicazione, illustrerò i modi fondamentali in cui esaminerei il problema.

Quanto segue è una regola empirica, ci saranno sempre delle eccezioni - ma non in modo significativo.

Il CSS è usato per disegnare un sito web - non singole pagine web .

I peggiori siti web visualizzati saranno quelli in cui ogni pagina è strutturata, ridimensionata o colorata in modo diverso dal resto ...

Ci dovrebbe essere uno stile standard per tutte le pagine contenute in un sito web.

Dicendo questo, non tutte le pagine saranno disposte allo stesso modo, quindi il design dovrebbe iniziare con l'identificazione dei layout che ti serviranno:

Pagine master, navigazione, diapositive, piè di pagina, ecc. Potrebbero esserci diversi layout che userete, ma non uno per ogni pagina . Il contenuto di questi layout cambierà, ma ciò non richiede singoli fogli di stile.

Successivamente, vi è lo stile individuale per i titoli, le etichette, i controlli di input, le div, le span, le tabelle, ecc. che dovrebbero essere standard in tutte le aree del sito in base all'area che l'utente sta visitando. Un'area amministrativa può essere strutturata in modo diverso rispetto a un'area di registrazione, e le loro dimensioni e colori di controllo possono differire anche se realmente richiesti.

Gli stili devono essere impostati rispetto ai singoli controlli come base: tutti i div, i tavoli, le caselle di testo ecc. con riempimento standard, margini, colori, ecc. Quindi puoi definire le classi da applicare ai controlli dove necessario; in questo modo se devi correggere o modificare il modo in cui vengono visualizzate le div, ad esempio, devi solo modificare lo stile in un unico punto: tutti i div che usano quella classe cambieranno di conseguenza.

Se hai bisogno di visualizzare una pagina specifica in modo diverso rispetto allo stile standard, non c'è nulla di sbagliato nel posizionare lo stile di sostituzione sulla pagina stessa, perché è specifico solo per quella pagina e non viene utilizzato da nessun'altra parte. Questo è applicabile solo quando la pagina è l'unica con la differenza . Se è usato altrove, e devi cambiarlo, dovrai dare la caccia a tutte le pagine che hanno la stessa differenza e modificarle tutte individualmente - non è un compito piacevole.

Se hai bisogno di caricare i partial in un'altra pagina, normalmente dovrebbe avere lo stesso stile del resto della pagina. Tuttavia, se hai bisogno che sia diverso (ma standardizzato perché ci sono molte parziali che hanno uno stile simile), vai avanti e crea un foglio di stile per il loro uso e inserisci un link al foglio di stile nel partial.

Poiché i CSS (Cascading Style Sheets) sono in cascata, l'ultimo stile dichiarato sovrascriverà tutti gli altri stili dichiarati in precedenza. Pertanto, se uno stile è stato dichiarato per una classe denominata "importante" che definisce il grassetto e il rosso per il carattere, è possibile dichiarare nuovamente "importante" per un partial dove è stato definito blu solo come colore. Il grassetto originale sarebbe comunque valido, ma il colore sarebbe stato sostituito dalla nuova definizione blu.

Quindi la struttura di base è:

  • Foglio di stile principale per tutte le pagine del sito web
  • Sovrascrittura dei fogli di stile per aree particolari
  • Sostituzione di singoli stili per le pagine (un foglio di stile o sulla pagina stessa)

Per quanto riguarda la cartella Contenuto: i fogli di stile dovrebbero essere creati e nominati in base allo stile che forniscono, non alla vista o alla pagina in cui saranno utilizzati.

  • I file Javascript devono essere inseriti negli 'script' e dovrebbero essere denominati in base alle funzioni contenute all'interno, non alla vista o alla pagina in cui verranno utilizzati.
  • Le icone e le altre immagini devono essere collocate nella cartella "immagini" e devono essere raggruppate in base a quali sono le immagini, non dove saranno utilizzate (a meno che non ci siano molte immagini per ogni area nel sito Web, quindi potresti raggruppare di nuovo sotto un nome per l'area).

Fondamentalmente, prova a spostare lo stato attivo da 'questo foglio di stile è per una pagina' a 'questa pagina usa questo foglio di stile' e mantieni i fogli di stile al minimo.

    
risposta data 29.03.2017 - 01:45
fonte

Leggi altre domande sui tag