Dovresti davvero mantenere separati js, html e css?

10

Ho sentito / letto tutto il tempo che è più pulito per mantenere separati js , html e css . Presumibilmente rende più facile la manutenzione, il debug. Presumibilmente è più efficiente, perché consente di memorizzare nella cache / minificare i file css e js .

Per quanto mi riguarda, utilizzo di framework web (Django, Rails, ...), librerie di javascript templating, ... Tendo a suddividere parecchio una singola pagina html in più template riutilizzabili - una sorta di widget se desideri. Ad esempio, posso avere un widget news feed , un selezionare più widget, ecc ... ognuno di essi ha un layout coerente tra le diverse pagine e ognuno è controllato da il suo pezzo di javascript.

Con questa organizzazione - che mi sembra più pulita che possa ottenere, massimizzando la riusabilità - ho difficoltà a capire perché sarebbe più semplice mantenere tutti js e css in file separati. Penso che sarebbe molto più semplice per esempio :

nel seleziona più file di widget

  • HTML
  • layout css di base
  • controllo delle interazioni dirette e miglioramenti UX con un po 'di JS.

Penso che in questo modo sia più riutilizzabile, molto più mantenibile, perché non devi scorrere un file js grasso, quindi passare a e scorrere un grasso css file, passa di nuovo al file html ... avanti e indietro.

Quindi mi piacerebbe sapere come voi ragazzi organizzate il vostro codice, se vi attenete alla separazione che di solito è raccomandata.

  • Ci sono davvero dei buoni motivi per farlo?
  • non è che le guide sul web di solito presumono che non userete nessuno strumento di fantasia (nel qual caso mi piacerebbe avere letture online più aggiornate per le migliori pratiche)?
  • È solo una questione di preferenza?
posta sebpiq 06.12.2011 - 17:42
fonte

3 risposte

5

Mantengo questa struttura

Per ogni pagina o controllo, gli do una cartella per la sua pagina html (o aspx, php, ecc.). In quella cartella ci sono anche le cartelle per file js, xml, immagini e css. Quelli per pagina / controllo sono specifici, non risorse condivise.

Nella root del sito, ci sono anche le cartelle js, xml, images e css, ognuna delle quali contiene risorse del sito.

I file js e css del sito sono arrotolati lato server e restituiti come un singolo file js. Le pagine specifiche, in quanto di solito ne esiste solo una per pagina, vengono lasciate in pace.

Questo organizza le mie risorse per quanto riguarda il loro scopo. E mentre posso avere una dozzina di file js nella cartella root js, saranno restituiti come una risorsa js combinando e minificandoli lato server (e memorizzando nella cache il risultato).

Inoltre non sto caricando risorse specifiche per pagex quando sono su pagey. L'unico "spreco" potrebbe essere nel file di risorse del sito, ma dal momento che è memorizzato nella cache e molte delle risorse verranno utilizzate in più posizioni, è più efficiente.

    
risposta data 06.12.2011 - 18:44
fonte
2

generalmente la convenzione è di avere file separati per JS / CSS / HTML per mantenere una separazione di contenuto, presentazione e comportamento. Tuttavia, se la velocità diventa un problema, allora tutto va bene.

    
risposta data 06.12.2011 - 18:06
fonte
1

in the select multiple widget file

  • HTML
  • layout css di base
  • controllo delle interazioni dirette e miglioramenti UX con un po 'di JS.

Ho uno strumento di organizzazione ( trinity ) che ti promuove.

Tranne che il file widget è diviso in 3 piccoli file, HTML, CSS e JS. Ciò significa che hai i tuoi file separati ma sono ancora collegati.

Questo evita il problema dei file grassi, ma ti dà comunque file separati.

Quindi semplicemente mettere le separazioni di preoccupazioni non significa che dovresti avere un grande file HTML / CSS / JS. Dovresti avere più triplette di <HTML, CSS, JS> per tutto il tuo codice incapsulato riutilizzabile

Ora non c'è niente di sbagliato nell'avere tutti questi file in un unico file finché sono chiaramente separati.

Quindi un widget che assomiglia a

<div id="wrapper">
  <style scoped> CSS code </style>
  <script> JS code </script>
  HTML code
</div>

Va bene, e fantastico. Tranne che avere tutto in un file rende fin troppo facile per un maintainer iniziare a mescolare e adattare il CSS / JS / HTML.

Rende fin troppo facile trasformarlo in spaghetti nel tempo.

Il motivo principale per cui le persone promuovono file separati è due volte

  • download separati. Non appena copi e incolli un codice css / js in più "widget" devi inserirlo nel proprio file.
  • Aggressivamente prevale il codice degli spaghetti non facendo affidamento all'autore per mantenere il loro css / js / html ben separato in un unico file
risposta data 06.12.2011 - 19:35
fonte

Leggi altre domande sui tag