Devo scrivere prima HTML o CSS?

Esistono molte analogie per lo sviluppo di HTML / CSS; che può essere un po 'confuso per un principiante.

• HTML = fondamenta / casa
• CSS = muri / progetto / carta da parati

C'è qualche buona pratica qui? Quale dovremmo scrivere per primo?

Dovresti prima costruire una casa, quindi dipingerla.

Un documento HTML può essere autonomo, anche se può sembrare noioso. Un foglio di stile CSS non può; non è visualizzabile (tranne come codice) ma le istruzioni per la visualizzazione.

È un problema diverso che durante la pittura, potresti voler apportare modifiche alla casa. Con case reali che di solito non sono fattibili, ma nello sviluppo HTML + CSS, è normale notare che è necessario un markup aggiuntivo nel documento HTML per semplificare lo stile. (È meno comune di prima, grazie ai potenti selettori CSS3.)

Uso sempre prima carta e penna, carta a dimensione intera, disegni in scala.

Cioè se non hai risolto il tuo disegno. Se sei sicuro del tuo design, ho un approccio equilibrato; html è la struttura, css la colla. Continua a costruire nel concetto (tuple) (HTML, CSS).

(HTML,CSS) + (HTML,CSS) -> (bigHTML,bigCSS)

(bigHTML,bigHTML) + (bigHTML,bigCSS) -> (biggerHTML, biggerCSS)

e così via.

È così che lo faccio, comunque.

Molto dipende dal tipo di sito Web / applicazione Web creata e dal tipo di contesto in cui verrà utilizzata.

Nella maggior parte dei casi, il modo migliore per procedere è creare HTML semanticamente corretto, quindi aggiungere CSS per browser conformi agli standard e quindi applicare hack e regole non invadenti (ad es. Commenti condizionali di IE, -vendor-somethingregole CSS, livelli di conformità javascript, ecc. ) per supportare browser non standard e abilitare funzionalità specifiche del fornitore.

Tuttavia, a volte hai un sacco di applicazioni web indipendenti che condividono fogli di stile (ad esempio come parte di uno stile di casa) e potresti persino essere nella posizione di lusso per controllare l'output HTML di ciascuno. In tal caso, scrivere prima il CSS e quindi modificare l'HTML per utilizzarlo potrebbe essere un modo migliore di procedere. Se lo fai, la strada da percorrere è prima analizzare il tipo di elementi di pagina che ti serviranno, definire le classi per questi, quindi scrivere un documento di prova statico che li usi, scrivere i fogli di stile e solo allora iniziare a scrivere il applicazioni che li usano.

In tutta onestà, tuttavia, sospetto che una tale posizione di lusso sia estremamente rara, e poche aziende in realtà riconoscono il valore di uno stile di casa unificato a livello CSS; più spesso, la praticità impone che un designer crei lo stile della casa, quindi vengono scritti set di fogli di stile indipendenti per ogni applicazione che deve seguirlo. La ragione di ciò è, principalmente, che la maggior parte delle aziende utilizza software standard con possibilità di modifica limitate per almeno parte del proprio stack e, spesso, cambiare il proprio output HTML per adattarsi a un determinato foglio di stile è molto più difficile (o addirittura impossibile per alcuni pacchetti proprietari) che riscrivere il CSS. Inoltre, lo sforzo di mantenere una dozzina di serie di fogli di stile è spesso sottovalutato e alcune differenze e stranezze minori sono ritenute accettabili.

Anche se si tratta di domande e risposte molto vecchie, sento il bisogno e la responsabilità di commentarle.

Sì, l'HTML dovrebbe essere scritto prima del CSS, tuttavia ...

È non scrivere tutto il codice HTML della pagina , e poi tornare a scrivere il CSS. Ciò renderebbe estremamente difficile ricordare chiaramente le sezioni mentre le costruisci, anche con spaziatura e commenti adeguati.

Costruisci un sito Web a strati, come se stessi realizzando una torta a più livelli.

1 ° strato: per prima cosa costruisci la base, il div contenitore, con la sua altezza minima e larghezza css.

2 ° livello - Quindi costruisci il livello successivo, le grandi sezioni della pagina (div e stile per la struttura), come righe o sezioni che sembrano colonne.

3 ° livello e oltre - Quindi continui ad aggiungere all'interno del secondo livello di sezioni.

In questo modo, scrivi un po 'di HTML, lo aggiungi e poi lo stile con CSS per la struttura, risciacqua e ripeti. Nella mia esperienza, questo è un modo molto più efficace di costruire pagine Web, e secondo me molto più veloce dell'alternativa di tutto l'HTML prima.

Infine, prova a utilizzare " * {outline: 1px punteggiato rosso} " per ottenere un contorno di tutti i tuoi elementi, mentre li aggiungi alla tua pagina con uno stile, puoi vederne il contorno e non devi preoccuparti di indovinare come sarà fino a aggiungi i colori di sfondo. Evito il bordo per questo particolare caso d'uso perché i bordi aggiungono pixel agli elementi, il contorno è una sovrapposizione.

Provalo, grazie!

Credo che lavorare prima con la struttura dei siti Web (HTML) abbia più senso in quanto si avrà un'idea degli elementi e dei nomi per quando si tratta di definire lo stile e la formattazione del sito Web.

Questo dipende dal tuo ruolo attuale e dal tuo obiettivo principale di sviluppo. Se l'obiettivo è determinare cosa dovrebbe essere mostrato a quale estensione in una pagina Web, si dovrebbe iniziare con HTML. Se l'obiettivo è creare un design piacevole e uniforme, si può iniziare con i CSS. In entrambi i casi, è meglio iniziare prima con carta e matita e se l'obiettivo attuale è sviluppare un'applicazione Web, non si dovrebbe iniziare con HTML o CSS. La migliore pratica è innanzitutto pensare a ciò che si desidera sviluppare e quindi dividere l'attività in obiettivi e sotto-obiettivi anziché semplicemente hackerare tutto insieme.

Progetta la casa (layout della griglia) insieme a un'idea di come sarà decorata; Costruisci la casa (HTML) con la griglia; quindi decoralo (foglio di stile CSS).

Dopo aver costruito la prima casa (pagina HTML), puoi semplicemente applicare la stessa decorazione (foglio di stile CSS) mentre procedi. Puoi modificare la decorazione mentre procedi.

Alla fine, potresti voler ridecorare (ripetere il foglio di stile CSS).

Hai scelto una cornice davvero scadente per l'apprendimento e la costruzione.

Ci sono due problemi ortogonali a portata di mano qui.

1. Come faccio a creare un sito che soddisfi le mie esigenze?
2. Come imparo a costruire un sito Web?

Sono due compiti molto diversi che possono (e spesso lo fanno) richiedere approcci potenzialmente diversi in conflitto.

Se hai familiarità con le competenze, le tecnologie e i requisiti di un progetto, uno inizia con una discussione sulle esigenze di un sito e passa attraverso esercizi di progettazione al fine di determinare ciò che deve essere implementato. Ciò significa spesso markup e elementi di design, che spesso non hanno nulla a che fare con HTML o CSS (anche se alcune persone fanno il modello con HTML e CSS).

Se stai cercando di imparare a costruire un sito, mentre allo stesso tempo costruisci un sito, c'è un processo di esplorazione e apprendimento in cui devi impegnarti prima di sapere cosa è persino possibile costruire.

È qui che è diventata popolare una strategia di progettazione e costruzione modulare e iterativa. Quando non sai necessariamente dove stai andando con il tuo prodotto finale (perché non sai cosa è possibile), costruisci piccoli pezzi di funzionalità, sperimenta se soddisfa i tuoi requisiti e quindi incorpora l'esperimento più piccolo nel più grande intero.

Quindi, cosa significa effettivamente in termini concreti? Costruire un sito può essere come costruire una casa, in cui si elaborano piani architettonici (modelli di progettazione) e quindi si inizia a fare ingegneria per calcolare se la tua casa si alzerà e soddisferà le tue esigenze estetiche. Ma costruire un sito può (e spesso dovrebbe) sembrare più simile a costruire una serie di piccoli esperimenti e adottare un approccio graduale per raggiungere un prodotto che soddisfi il tuo concetto originale.

In pratica, quasi tutti fregano contemporaneamente sia con il proprio HTML che con i propri CSS.

Questo è il problema comune in qualsiasi progetto di sviluppo software imho e come tale potresti trarre vantaggio dall'uso di uno qualsiasi dei concetti come Rapid Prototyping, DSDM. Combinabile con qualsiasi stile, ad es. Agile (programmazione estrema o Feature Driven Design (il mio preferito)). Attenersi ai principi comuni che decidi all'inizio mentre li affronti e ti attieni a loro (KISS, YAGNI).

Quindi per me lo è: - costruisci prima un "prototipo" funzionale di base, coprendo un blocco funzionale della domanda Limita te stesso ad immergerti in "questo potrebbe essere bello" / "potrei aver bisogno di riutilizzarlo più tardi" a meno che non siano OBVIOUS. Dillo a te stesso, non ne avrai bisogno! (YAGNI). - Annota le decisioni che prendi come "convenzione di codifica" e rispetta le stesse, ad esempio i tag php: io uso quelli brevi perché per il mio argomento dello scenario ... si applica e ... no. - aggiungi uno stile base ma limitati di nuovo.

Quindi espandere il codice fino a raggiungere un prototipo di livello superiore che copre più blocchi funzionali. In linea con esso, fai crescere il tuo modello css. Non appena affronti le decisioni che incidono su tutto ciò che hai già fatto (lo farai), leggi su di esso, prendi una decisione e annota nelle convenzioni di codifica il motivo per cui sei andato a sinistra oa destra.

'Cerchia' la tua strada verso un prodotto più maturo e finale.

Non aver paura delle grandi decisioni che potresti dover affrontare, perché preoccuparti di esse potrebbe costarti più tempo che risolverlo. Inoltre, non preoccuparti per la comunità di Internet che ti guarda alle spalle con un'espressione accigliata, alla fine quando hai un prodotto che funziona, hai imparato molto e il fantasioso giudice del codice sorgente cattivo sarà più soddisfatto di la prossima cosa che costruisci (nota l'iterazione qui).

Solo i miei 50 ct

Mentre confronti una pagina Web con una casa:

HTML = fondamenta / house CSS = muri / progetto / sfondo

Come farai a galleggiare i muri a mezz'aria fino a quando non costruirai le basi su cui siedono? Come puoi scrivere CSS per dare uno stile alla tua pagina fino a quando non hai scritto i tag HTML a cui stai applicando gli stili.

Ogni pezzo di CSS è caratterizzato da specifici tag HTML. Questi tag devono esistere per poterli modellare. Se non si dispone di HTML per lo stile, il file CSS dovrebbe essere vuoto in quanto tutti gli stili in esso contenuti sono ridondanti in quanto in realtà non modellano nulla.