Descriverò una struttura consigliata per organizzare i file nella tua applicazione HTML5. Questo non è un tentativo di creare alcun tipo di standard. Invece, darò suggerimenti su come raggruppare e denominare i file in modo logico e conveniente.
Il tuo progetto
Supponiamo che tu stia creando un'applicazione HTML5. In alcuni casi potresti utilizzare la radice del tuo server come contenitore principale, ma ai fini di questo articolo presumo che l'applicazione HTML5 sia contenuta in una cartella. All'interno di questa cartella è necessario creare il file di indice dell'applicazione o il punto di ingresso principale.
In generale, la tua applicazione sarà composta da file HTML, CSS, immagini e Javascript. Alcuni di questi file saranno specifici della tua applicazione e altri potranno essere utilizzati in più applicazioni. Questa è una distinzione molto importante. Per eseguire un raggruppamento efficace dei file, è necessario iniziare separando i file di uso generale dalle risorse specifiche dell'applicazione.
- appcropolis-project
- risorse
- fornitori
- my-index.html
Questa semplice separazione semplifica notevolmente la navigazione tra i file. Dopo aver posizionato le librerie e i file generici nella cartella dei fornitori , è chiaro che i file che verranno modificati si troveranno nella cartella delle risorse .
A parte il codice HTML, il resto dei file nella tua applicazione sono principalmente CSS, Javascript e immagini. È probabile che tu abbia già raggruppato i file dell'applicazione all'interno di cartelle che corrispondono a questo tipo di risorse.
- appcropolis-project
- risorse
- fornitori
- my-index.html
La cartella js conterrà il tuo codice Javascript. Allo stesso modo, la cartella delle immagini è il luogo in cui è necessario aggiungere immagini che vengono utilizzate direttamente da index.html o da qualsiasi altra pagina dell'applicazione. Questa cartella di immagini non deve essere utilizzata per ospitare file relativi ai fogli di stile. Il tuo codice CSS e le immagini correlate dovrebbero trovarsi all'interno della cartella css . In questo modo, puoi creare pagine che possono facilmente utilizzare temi diversi e consentire alla tua applicazione di essere più portabile.
- appcropolis-project
- risorse
- css
- blue-tema
- immagini
- blue-theme.css
- my-index.css
- js
- my-index.js
- my-contatto-info.js
- immagini
- prodotti
- computer.jpg
- cellphone.png
- printer.jpg
- my-società-logo-small.png
- my-società-logo-large.png
- dati
- some-data.json
- più-data.xml
- table-data.csv
- Extra-data.txt
- fornitori
- jquery
- immagini
- ajax-loader.gif
- icone-18-white.png
- jquery.min.js
- jquery.mobile-1.1.0.min.css
- jquery.mobile-1.1.0.min.js
- some-css-library
- some-plugin.jquery
- my-index.html
- my-contatto-info.html
- my-prodotti.html
L'esempio precedente mostra il contenuto della cartella css . Si noti che esiste un file denominato default.css che dovrebbe essere utilizzato come file CSS principale. Le immagini utilizzate dal foglio di stile predefinito dovrebbero essere inserite nella cartella delle immagini . Se desideri creare fogli di stile alternativi o se desideri sovrascrivere le regole definite nel tuo foglio di stile predefinito, puoi creare file CSS aggiuntivi e le cartelle corrispondenti. Ad esempio, puoi creare un foglio di stile blue-theme.css e inserire tutte le immagini correlate all'interno di un file tema blucartella. Se hai codice CSS o Javascript che viene utilizzato solo da una pagina (in questo caso my-index.html), puoi raggruppare il codice specifico della pagina all'interno di file .css e .js con lo stesso nome della pagina (ei my-index .css e my-index.js). Il tuo codice CSS e Javascript dovrebbe essere il più generico possibile, ma puoi tenere traccia delle eccezioni inserendole in file separati.
Raccomandazioni finali
Alcune raccomandazioni finali devono essere fatte sui nomi di cartelle e file. Come regola generale, assicurati di utilizzare lettere minuscole in tutti i nomi di cartelle e file. Quando si utilizzano più parole per denominare un file o una cartella, separarli con un trattino (ad esempio, my-company-logo-small.png). Se segui i consigli in questo articolo dovresti essere in grado di combinare più pagine mantenendo le risorse comuni insieme e il codice personalizzato ben separati.
Infine, anche se non scegli di utilizzare la struttura consigliata in questo articolo, è importante attenersi a una convenzione. Aumenterà la tua produttività e, cosa più importante, renderà il lavoro che svolgi facilmente comprensibile agli altri.
Fonte di credito:
come organizzare i file HTML, CSS e Javascript