Devo scrivere HTML o CSS prima?

Prima dovresti costruire una casa, quindi dipingerla.

Un documento HTML può resistere da solo, anche se potrebbe sembrare noioso. Un foglio di stile CSS non può; non è nulla visualizzabile (tranne che come codice) ma istruzioni per la visualizzazione.

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

Uso sempre carta e penna prima, carta a grandezza naturale, disegni in scala.

Cioè se non hai appianato il tuo design. Se sei sicuro del tuo design, ho un approccio equilibrato; html è la struttura, css la colla. Continua a costruire in '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 che si esegue e dal tipo di contesto in cui verrà utilizzato.

Nella maggior parte dei casi, la soluzione migliore è creare HTML semanticamente valido, quindi aggiungere CSS per i browser conformi agli standard e quindi applicare hack e regole non intrusive (ad esempio, i commenti condizionali di IE, le regole CSS -vendor-something , 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 trovarti nella posizione di lusso per controllare l'output HTML di ognuno. In tal caso, scrivere prima il CSS e poi modificare l'HTML per lavorare con esso, potrebbe essere un modo migliore per andare. Se lo fai, la strada da percorrere è innanzitutto analizzare quale tipo di elementi di pagina avrai bisogno, definire le classi per questi, quindi scrivere un documento di test statico che li usi, scrivere i fogli di stile e solo quindi inizia a scrivere le applicazioni che li utilizzano.

In tutta onestà, tuttavia, sospetto che una tale posizione di lusso sia estremamente rara, e poche aziende effettivamente riconoscono il valore di uno stile di casa unificato a livello CSS; più spesso, la praticità impone che un designer realizzi lo stile della casa, quindi vengono scritti insiemi indipendenti di fogli di stile per ogni applicazione che deve seguirla. La ragione di ciò è, principalmente, che la maggior parte delle aziende utilizza software off-the-shelf con possibilità di modifica limitata per almeno alcuni dei propri stack e, spesso, la modifica dell'output HTML per adattarsi a un determinato foglio di stile è molto più difficile (o addirittura impossibile per alcuni pacchetti proprietari) rispetto alla riscrittura del CSS. Inoltre, lo sforzo di mantenere una dozzina di set di fogli di stile è spesso sottovalutato, e alcune piccole differenze e stranezze sono considerate accettabili.

Credo che lavorare con la struttura dei siti web (HTML) abbia per prima cosa più senso, perché avrai un'idea degli elementi e dei nomi per quanto riguarda lo stile e la formattazione del tuo sito web.

Anche se questa è una molto vecchia Q & A, sento la necessità e la responsabilità di commentarla.

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

Tu NON scrivi tutto il codice HTML nella pagina , quindi torna a scrivere il CSS. Ciò renderebbe estremamente difficile ricordare chiaramente le sezioni mentre la costruisci, anche con spaziatura e commenti appropriati.

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

1st Layer - Per prima cosa costruisci la base, il div contenitore, con i suoi min-height e width css.

2nd Layer - Poi costruisci il livello successivo, le ampie sezioni della pagina (div e styling per la struttura), ad esempio righe o sezioni simili a colonne.

3rd Layer and beyond - Poi continui ad aggiungere all'interno del secondo strato di sezioni.

In questo modo, si scrive dell'HTML, quindi si aggiunge lo stile con i CSS per la struttura, si risciacqua e si ripete. Nella mia esperienza, questo è un modo molto più efficace di costruire pagine web e, a mio parere, è molto più veloce rispetto a prima di tutto l'HTML.

Infine, prova a utilizzare " * {outline: 1px punteggiato rosso} " per ottenere una struttura di tutti i tuoi elementi, mentre li aggiungi alla tua pagina con lo stile, puoi vedere il loro contorno e non devi preoccuparti di indovinare cosa sembra finché non aggiungi i tuoi colori di sfondo. Evito il confine per questo particolare caso d'uso perché i bordi aggiungono pixel sugli elementi, il contorno è una sovrapposizione.

Fai un tentativo, grazie!

Dipende dal tuo ruolo attuale e dall'obiettivo primario dello sviluppo. Se l'obiettivo è determinare cosa deve essere mostrato a quale estensione in una pagina web, si dovrebbe iniziare con HTML. Se l'obiettivo è quello di creare un design piacevole e uniforme, si può iniziare con CSS. In entrambi i casi si potrebbe iniziare prima con carta e matita, e se l'obiettivo attuale è quello di sviluppare un'applicazione web, non si dovrebbe iniziare con HTML o CSS. La migliore pratica è pensare prima a quello che vuoi sviluppare e poi dividere l'attività in obiettivi e sotto-obiettivi invece di solo 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 creato la prima casa (pagina HTML), puoi semplicemente applicare la stessa decorazione (foglio di stile CSS) mentre procedi. Puoi modificare la decorazione mentre vai avanti.

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

Hai scelto una cornice davvero scarsa per l'apprendimento e la creazione.

Qui ci sono due problemi ortogonali.

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

Questi sono due compiti molto diversi che possono (e spesso fanno) richiedere approcci potenzialmente contrastanti.

Se hai familiarità con le competenze, le tecnologie e le esigenze di un progetto, inizi con una discussione sulle esigenze di un sito e segui esercizi di progettazione per determinare che cosa è necessario implementare. Questo spesso significa markup e elementi di progettazione, che spesso non hanno nulla a che fare con HTML o CSS (anche se alcune persone eseguono il mockup con HTML e CSS).

Se stai cercando di imparare come costruire un sito, mentre crei anche un sito, c'è un processo di esplorazione e apprendimento che devi coinvolgere prima di sapere che cosa è anche possibile costruire.

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

Quindi, cosa significa in concreto? Costruire un sito può essere come costruire una casa, dove si disegna piani architettonici (prototipi di design) e quindi iniziare a fare l'ingegneria per calcolare se la tua casa si alzerà e soddisferà le tue esigenze estetiche. Ma la costruzione di un sito può (e spesso dovrebbe) sembrare più come costruire una serie di piccoli esperimenti e adottare un approccio graduale per raggiungere un prodotto che rispetti il tuo concetto originale.

Come una questione molto pratica, quasi tutti futch con sia il loro HTML e il loro CSS allo stesso tempo.

Questo è il problema comune in qualsiasi progetto di sviluppo software imho e come tale potresti trarre vantaggio dall'utilizzo 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)). Attenendosi ai principi comuni che decidi all'inizio mentre li affronti e ti aggrappi a loro (KISS, YAGNI).

Quindi per me è: - Costruire dapprima un "prototipo" funzionale di base che copra un blocco funzionale della domanda  Limita te stesso ad immergerti in "questo potrebbe essere bello" / "Potrei aver bisogno di riutilizzare questo dopo" le cose 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 atteniscile  per esempio. Tag php: io uso quelli brevi perché per il mio argomento dello scenario .. si applica e ... no. - aggiungi uno stile di base ma limitati di nuovo.

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

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

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

Solo i miei 50 cts