Perché si sta usando l'attributo style in html male?

Question

Mi è stato detto, oltre a leggere che l'uso dell'attributo style in html è considerato cattivo/sciatto/scadente. Inoltre, tutti i bit specifici per il rendering dovrebbero essere divorziati in css e in altre parti, a seconda dei casi. Sto cercando di capire perché esattamente questo è.

Posso capire perché si potrebbe voler mantenere l'HTML un puro DOM semantico, che parla della struttura del documento, ma per le pagine pratiche, l'importanza è che la pagina sia corretta e funzioni in modo appropriato.

C'è qualche motivo più convincente per questa separazione?

Answer 1

• separazione degli interessi Ciò rende più facile sostituire gli stili senza cambiare il codice, o viceversa.Inoltre è possibile avere una persona che lavora su CSS e un altro a lavorare su contenuti

• Non Repeat Yourself È possibile applicare uno stile a molti elementi senza dover ripetere più e più volte. Pagine più piccole significano tempi di caricamento più rapidi utilizzando meno larghezza di banda. Inoltre è più semplice da modificare in seguito, perché puoi modificarlo in un unico posto in un unico file, anziché in molti posti in molti file.

• Cachability Se lo stesso foglio di stile viene utilizzato su ogni pagina del tuo sito, i browser possono scaricare una volta e poi in cache di esso, invece di scaricare gli stili con il contenuto di ogni singola pagina. E non dovranno scaricarlo nuovamente ogni volta che cambia il contenuto di quelle pagine.

• più versioni E 'facile creare più versioni del layout visivo e l'aspetto del tuo sito dal momento che solo bisogno di scambiare il foglio di stile per modificare l'aspetto di ogni pagina. Ad esempio, puoi creare una versione white label di un'applicazione web che i tuoi partner possono ridigitare per abbinare il loro marchio. Vedi CSS Zen Garden per alcuni grandi esempi di quanto questo approccio possa essere flessibile.

Answer 2

CSS dovrebbe essere un altro file incluso in HTML perché, se si desidera modificare uno stile di un elemento che è incluso in più di una pagina, si modificherà semplicemente uno stile da CSS e le modifiche verranno applicate a tutti i File. Se hai lo stile in HTML, dovresti andare sulle pagine uno per uno e cambiare lo stile. È un buon esempio di costruzione di modelli.

Answer 3

Separando markup e css. Puoi usare css per cambiare l'aspetto di tutto, senza intaccare il markup.

I vantaggi includono: Creazione di progetti diversi per lo stesso html. Dividere il lavoro all'interno di una squadra. Uno sviluppatore front-end può concentrarsi interamente sul css. Gli sviluppatori di back-end, non hanno problemi con il css. Più facile cambiare look in futuro. Più facile la migrazione del markup html a una nuova piattaforma o sistema di gestione dei contenuti in futuro.

Answer 4

Inizia con questo codice:

<ul> 
    <li style="color: blue;">One</li> 
    <li style="color: blue;">Two</li> 
    <li style="color: blue;">Three</li> 
    <li style="color: blue;">Four</li> 
</ul> 

Diciamo che oggi, si decide di cambiare il colore del collegamento al rosso. Dato che questi stili sono in linea, è necessario passare attraverso ogni elemento e modificare l'attributo style. Immagina di farlo per 10, forse 20 pagine HTML e vedrai perché questo diventa un problema.

utilizzo di un foglio di stile separa il contenuto:

<ul> 
    <li>One</li> 
    <li>Two</li> 
    <li>Three</li> 
    <li>Four</li> 
</ul> 

Dallo stile:

ul li { 
    color: blue; 
} 

Aveva è stato utilizzato un foglio di stile fin dall'inizio, cambiando il colore è semplice come cambiare blue-red in il tuo foglio di stile.

Oltre a semplificare lo stile del documento, esiste anche la specificità del selettore. Immaginate che avete ereditato il primo blocco di codice da uno sviluppatore precedente e vorrebbe cambiare di nuovo il colore, ma (essendo una bella sviluppatore) preferisce i fogli di stile:

ul li { 
    color: red; 
} 

Presto diventano frustrati e ricorrere all'utilizzo di !important , poiché i selettori non possono ignorare gli stili in linea.