2009-02-26 17 views
25

Faccio molte applicazioni personalizzate al lavoro. Sto cercando di definire alcuni standard per nuove applicazioni. Qualcosa un po 'come Elements.Quali sono i tuoi consigli per le migliori pratiche per la struttura delle applicazioni web?

CSS: Come si organizzano i fogli di stile? Devo avere un foglio di stile di base per l'intero sito e uno per ogni singola pagina per le personalizzazioni? Dovrei avere un altro per gli stili di stampa? Ho sentito che il collegamento di più file richiede più tempo per il browser per recuperarli. (Più oggetti per pagina ... anche un problema con un sacco di file javascript o immagini) ... Quanti ne sono troppi? Commenta pesantemente il tuo CSS? Fornire una struttura annidata? Alfabetizzare all'interno degli elementi? Ho bisogno di un reset? Che dire delle importazioni? E tipografia?

Javascript: fondamentalmente la stessa domanda. File Javascript ... Devo includere una o due belle librerie (JQuery e Prototype, per esempio) e poi avere un altro incluso per ogni pagina? Ora includo improvvisamente 5 o 6 file CSS e JS ...

Struttura directory: Come si organizza un sito? Attualmente, io uso qualcosa come

/CSS   ... For CSS files 
/JS   ... For javascript files 
/INC   ... For private code includes 
/ASSETS/IMG ... For images 
/ASSETS/AU ... For audio 
/ASSETS/SWF ... For Flash 

Inoltre, qualsiasi altro suggerimento sarebbe benvenuto. Grazie!!

+0

sito interno? O esterno? –

+0

In generale, questi sono siti interni basati sui dati e scritti principalmente con ASP.NET (ma spesso con Java, PHP o altre tecnologie ...) Detto questo, vorrei stabilire una "routine" per tutti i miei disegni saranno anche esterni. –

+0

Ottima domanda. Anch'io aspetterò qualche risposta! – HardCode

risposta

23

Devo avere un foglio di stile di base per l'intero sito e uno per ogni singola pagina per le personalizzazioni?

Essere pragmatici. Se hai abbastanza regole da poterle organizzare tutte in un unico file e mantenere una supervisione su cosa fa cosa, fallo. Se si dispone di un numero significativo di regole che si applicano solo a determinate sezioni o singole pagine del proprio sito, è opportuno suddividerle nei propri sotto-fogli di stile, ma non sentire la necessità di creare un foglio di stile separato per ogni singola pagina anche quando contiene solo due regole.Aggiungi una classe o un ID specifico per la pagina al corpo < in modo da poter selezionare singole pagine da un foglio di stile condiviso nel caso sia necessario.

La separazione di stili in fogli di stile è a vostro vantaggio come autore, quindi fate quello che trovate più facile da gestire. Per un sito complicato che probabilmente sarà più di un file CSS, ma non sarà dozzine.

Devo avere un altro per gli stili di stampa?

In generale si. Sebbene sia possibile incorporare gli stili di stampa in un altro foglio di stile utilizzando una regola @media, questo è sempre stato un errore, quindi posizionare i media nel tag < è in genere più semplice. In ogni caso i fogli di stile di stampa sono spesso così diversi dalle loro controparti dello schermo che ha senso tenere le proprie regole separate.

Ho sentito che il collegamento di più file richiede più tempo per il browser per recuperarli.

Sì, ma questo effetto è spesso sopravvalutato. HTTP/1.1 riduce la latenza per richiesta mantenendo attive le connessioni tra client e server, il che è una forte attenuazione.

Quanti ne sono troppi?

Basta che sia estremamente improbabile avere così tanti fogli di stile. Gli script possono essere un problema se si utilizza il tipo di framework che richiede un file di script per classe, ma in caso contrario sono generalmente OK. È più comunemente problematico con molte piccole immagini.

Commenta pesantemente il tuo CSS?

Il commento leggero di solito dovrebbe essere sufficiente. Lo stile di dichiarazione dichiarativa del CSS di solito non diventa abbastanza complicato da richiedere il codice di spiegazioni approfondito che può essere richiesto. In particolare, tuttavia, documentano qualcosa di controintuitivo come gli hack specifici del browser.

Alphabetize within elements?

A meno che non sia più semplice da gestire. Di solito non lo farebbe, dovresti provare a raggruppare regole simili o regole che si applicano a gruppi di elementi simili.

Ho bisogno di un reset?

Un ripristino completo? Non se sai cosa stai facendo e puoi selezionare i particolari problemi problematici che vuoi ripristinare.

Devo includere uno o due librerie bello (jQuery e Prototype, per esempio)

non comprendono più di un quadro a meno che non sia assolutamente necessario.

e quindi un altro incluso per ogni pagina?

Se ogni pagina presenta un comportamento personalizzato particolare, è possibile. Ma di solito non succede. Se crei script di comportamento a miglioramento progressivo che si legano ad es. i nomi delle classi, è possibile includere lo script per ogni comportamento in ogni pagina che lo utilizza, quindi lasciare che trovi gli elementi da associare automaticamente.

Struttura della directory: come si organizza un sito?

Personalmente, per le mie applicazioni/WSGI Python:

appfolder 
    application.py  - main WSGI entry point and control/configuration script 
    data     - run-time writable application file store 
     private   - files not available through the web server 
     public   - mounted as a virtual directory on the web server 
    logs     - access, error, application log files 
    system    - all the static application code and data 
     htdocs   - web server root folder 
      file   - static servable files 
      img   - static images 
      script  - JavaScript 
      style  - CSS 
     lib    - Python modules used by site 
      appmodule - main application code package 
     templates  - HTML page templates 
      mail   - mail text templates 

E 'importante per me mantenere la ‘data’ in un luogo separato (con permessi separati) per l'applicazione di ‘sistema’. Devi essere in grado di scambiare la cartella 'sistema' per aggiornare l'applicazione, senza doversi preoccupare che ci siano immagini caricate in htdocs/img che devi preoccuparti di mantenere.

+0

Se lo stai ospitando tramite mod_wsgi, ti consiglio vivamente di non avere "application.py" in una directory che contiene qualcos'altro, specialmente non le sottodirectory che contengono elementi sensibili come i file di configurazione o il codice. Questo perché è necessario impostare 'Permetti da tutti' per Apache sulla directory 'application.py' è in. Ciò significa che Apache è autorizzato a servire i file da tale albero di directory. Se un URL è stato mappato in quella directory inavvertitamente, i client possono scaricare ciò che vogliono. Meglio averlo in una sottodirectory e accedere solo a quella specifica sottodirectory. –

+0

Personalmente non uso affatto mod_access, non è nemmeno compilato; Non penso sia una misura molto efficace. – bobince

1

Fai del tuo meglio per avere un foglio di stile. Il collegamento di singoli fogli di stile per pagine singole vanifica lo scopo.

È possibile ereditare altri fogli di stile nel CSS includendo le seguenti righe nella parte superiore del foglio

@import url('blueprint/screen.css'); 
@import url('blueprint/styles.css'); 

in questo caso sto ereditando gli stili CSS progetto aggiungendo poi i miei stili personalizzati di sotto di tale.

In termini di librerie JS preferisco collegare 3 file.

The Library, una pagina con tutti i plug-in, e infine il codice della pagina.

Per la struttura delle directory generalmente ho quanto segue:

/_css /_images /_scripts file

ma di recente ho cominciato a mettere tutto utilizzato per rendere l'aspetto del sito/lavorare nel modo Lo voglio in una/_presentation directory ... quindi qualsiasi altra immagine simile per i post del blog ecc. Andrebbe in/immagini

Spero che questo aiuti.

3

Ho pubblicato la struttura della directory e i commenti in un'altra discussione, ma è applicabile anche qui!

Sono stato con la seguente configurazione per un po 'di tempo con ottimi risultati:

  • /Area: Questo è dove il mio sito di lavoro effettivo vivrà. Installerò il mio CMS o piattaforma in questa directory dopo la creazione dei modelli.

    • .htaccess (ritocchi di base di solito trovo che consente in ogni caso)
    • robots.txt (in modo da non dimenticare per non consentire oggetti come/admin tardi)
  • /source: contiene comps, note, documenti, specifiche, ecc.

  • /templates: Inizia qui! Creare tutti i modelli statici che dovranno eventualmente essere portati nel CMS o nel framework di/site.

    • /_behavior
      • global.js (site-specific codice; può essere scoppiata in più file, se necessario)
    • /_media: immagini, file scaricabili, ecc Organizzato come necessario

    • /_style: preferisco lo sviluppo CSS modulare, quindi di solito ottengo molti fogli di stile per ogni sezione univoca del sito web. Questo è ripulito molto con Blender - Consiglio vivamente questo strumento!

      • print.css (questo alla fine viene mescolato, in modo da utilizzare @media print)
      • reset.css (Eric Meyer's)
      • schermo.css (per @ media schermo, palmare)
      • moduli aggiuntivi, se necessario
    • /_vendor: tutto il codice 3rd party (jQuery, shadowbox, ecc)

    • Blendfile.yaml (per Blender; vedere sopra)

    • template.html (modello di base di partenza, può essere copiato e rinominato per ogni modello univoco)
  • /test: test di unità Selenium

0

ho sempre cercare di mantenere il browser da dover caricare e interpretare le regole CSS e il codice JS che non viene utilizzato il codice HTML in questione. Sono d'accordo con @bobince che dovresti rompere solo gli stili e gli script di una pagina in un file separato se è necessario per l'organizzazione, ma se il tuo sito è molto grande, raggiungerai quel punto.

Tuttavia, dal momento che creo solo siti basati su modelli, sto iniziando a chiedermi perché mi collego a file esterni. Ad esempio, se ho un modello di base, le cose che metto in testa a quel modello verranno applicate a tutte le pagine del mio sito. Allora perché non metti i miei stili e script lì?

Due motivi mi vengono in mente. Prima il browser può memorizzare nella cache il file esterno e riutilizzarlo su ogni pagina che lo include senza doverlo caricare di nuovo. I secondi designer potrebbero non essere così a proprio agio nei tuoi modelli mentre stanno giocando con semplici file CSS.

Questo va bene per gli stili globali che si applicano a ogni singola pagina del tuo sito, ma che dire di quelle pagine una tantum che hanno uno stile che non è condiviso da nessun'altra parte? Se hai aggiunto questo stile a un file esterno applicato globalmente, aumenterai il tempo di caricamento iniziale del tuo sito solo per avere uno stile che viene utilizzato solo su una pagina. Inoltre, quando tornerai a quel file mesi dopo probabilmente avrai dimenticato a cosa servivano quelle regole.

suggerisco che qualsiasi regola di stile che non si esprime sulla ogni singola pagina deve essere posto in <style> tag all'interno del sub-modello che rende il codice HTML si applica la regola. Ciò trasferirà il carico e la complessità dal foglio di stile globale alla pagina effettiva in cui sono necessari gli stili e fornirà il contesto delle regole in modo che possano essere mantenute in futuro. Se questo spaventa il tuo designer, non è necessario che stia scrivendo CSS in ogni caso. Dì loro di attenersi a Photoshop e di fare il lavoro da grande.

+0

Sapevo che non sarebbe stata un'opinione molto popolare :-) Ma sono felice di dire che l'ho messo in pratica con buoni risultati. È particolarmente utile durante lo sviluppo quando non si desidera che le copie memorizzate nella cache di file CSS esterni siano in giro per confondervi. – arkanciscan

3

Assicurati di non utilizzare maiuscole per le cartelle. Potrebbe morderti quando sviluppi su Windows e distribuisci su un server Linux.

8

CSS: Uso solo un foglio di stile. Continuo ad appendere al fondo mentre procedo. Di solito inserisco un commento prima di ogni gruppo di regole specifiche della pagina. Ctrl + F se ho bisogno di modificare qualcosa.

Javascript: Di solito include solo una libreria e forse alcuni plug-in. Utilizzato per lanciare qualsiasi JS specifico per la pagina direttamente nell'intestazione di quella pagina, ma lo trovo un po 'brutto e mescola il "comportamento" con i dati.Quindi sto iniziando un nuovo paradigma:

MVCB - Modello, Visualizza, Controller, Comportamento. MVC è ottimo per le app desktop con interfacce utente statiche piuttosto statiche, ma quando aggiungi molti JS penso che richieda un ulteriore livello di astrazione.

Così, la mia struttura del file originale:

index.php 
app 
    config 
     bootstrap.php    -- code that needs to run before anything else, or functions that don't really fit elsewhere 
     core.php     -- timezone, database, and misc settings 
     routes.php     -- default routes 
    layouts       -- layout/template files 
     flash      -- layouts for one-time popup messages 
    objects       -- all files are stored in the same folder as the controller to keep directories 
              smaller and ease reusability 
     object 
      controller.php 
      model.php 
      routes.php    -- object-specific routes to override default routes 
      behaviours    -- page-specific javascript files 
       action.js   -- included automatically on that page if this file exists 
      views 
       action.php   -- the view for this action 
    public       -- static media files, sometimes called "assets" 
     favicon.ico 
     xrds.xml 
     css 
     img 
     js 
     uploads   
core 
    app.php       -- initializes stuff 
    controller.php     -- default controller 
    dispatcher.php     -- includes everything and calls all the appropriate functions 
    model.php      -- default model that all other models inherit from 
    components      -- helper functions to used in controllers 
    datasources      -- mysql, oracle, flat-file... 
    helpers       -- functions to be used in views and layouts 
    structures      -- model helpers such as tree or polymorphic behaviours 
    utils       -- functions that are useful everywhere 
libs        -- 3rd party libs 

.htaccess

Options -Indexes 

RewriteEngine On 

RewriteCond %{REQUEST_URI} !^/app/public/ 
RewriteCond %{DOCUMENT_ROOT}/app/public%{REQUEST_URI} -f 
RewriteRule .* /app/public/$0 [L] 

RewriteCond %{REQUEST_URI} !^/app/objects/ 
RewriteRule ^([^/]+)/(.+\.js)$ /app/objects/$1/behaviours/$2 [L] 

RewriteCond %{REQUEST_FILENAME} !-f 
RewriteRule .* /index.php?url=$0 [L,QSA] 
Problemi correlati