Tipo di follow-up per Devo scrivere HTML o CSS prima?
Su un sito web relativamente grande, stiamo prendendo in considerazione l'utilizzo di SASS e / o Bootstrap. Dai progetti precedenti, sembrano esserci diversi modi per farlo:
- Un framework (ad es. bootstrap) fornisce una serie di classi css (esp per il layout della griglia). Potremmo persino aggiungere a ciò con le nostre classi riutilizzabili. Quindi creiamo il codice html per utilizzare queste classi.
Se vogliamo cambiare il layout, dobbiamo modificare l'HTML, non il CSS. Una classe per una barra laterale sarebbe comecol-lg-3anzichésidebar-left.
La chiamo strategia "CSS first". - Per prima cosa creiamo il nostro codice HTML, usando classi semantiche. Una barra laterale dovrebbe essere classificata
sidebar-lefto anchesidebar-firstper non implicare nulla su come verrà visualizzata. Quindi usiamo CSS personalizzati che hanno come target questa regione.
Probabilmente si sta utilizzando un mixin SASS per il layout della colonna della griglia.
Se vogliamo cambiare il layout (ad esempio, rendere la barra laterale più piccola), modifichiamo il CSS, non l'HTML.
La chiamo strategia "HTML first".
Di solito vogliamo farlo con "componenti", in cui parti della pagina sono indipendenti l'una dall'altra ed evitiamo selettori profondi arbitrari. - Tradizionalmente in Drupal (questo è ciò con cui lavoriamo), un sacco di HTML è già fornito da moduli core e di terze parti. Tradizionalmente, lasceremmo la maggior parte dell'HTML così com'è, e poi lo selezioniamo con brutti selettori profondamente annidati.
Anche questo è "HTML first", ma senza componenti. Cerco di evitare questo schema.
Spesso le classi fornite nell'html generato si basano sulla configurazione presente nel database e create con l'interfaccia utente. Quindi abbiamo CSS (= codice) a seconda delle cose nel database. Sarebbe più mantenibile nella direzione opposta, se le cose nel database dipendono dal CSS. - Gli autori di contenuti vogliono essere in grado di aggiungere alcuni effetti speciali nel loro html creato (che viene filtrato, ovviamente). Per esempio. scatole wrapper per immagini. Forniamo alcune classi che possono usare.
Ciò ricadrebbe nella strategia "CSS first", sebbene sia un caso di uso speciale. - In un CMS, potremmo avere alcuni componenti che puoi scegliere dall'interfaccia utente, per configurare come dovrebbe essere visualizzato qualcosa. Questi componenti potrebbero avere nomi umani che mostrano come è, ad es. "cursore", "griglia", "scatola blu".
Forse questo è di nuovo "prima CSS".
Le strategie 1. e 2. sembrano piuttosto opposte l'una all'altra. Posso pensare ad esempi in cui l'uno o l'altro approccio sarebbe preferibile. Ma mi chiedo se ci sono alcune regole generali per capire quale approccio sia migliore o dove usare quale.
Sembra che la differenza principale sia se preferisco aggiornare l'HTML o il CSS, se voglio apportare un cambio di layout / aspetto.
Questo porta anche alla domanda su quanto "semantico" dovrebbe essere il nome della tua classe.
- Con l'approccio "CSS first", scriverei CSS per una classe "shiny-blue-button" e un altro "shiny-red-button". Se voglio cambiare l'aspetto, cambierò l'HTML per usare il pulsante rosso invece di quello blu.
- Con l'approccio "HTML first", scriverei HTML con una classe "panic-button" e un altro "submit-button", e poi li modifico di conseguenza. Qui le classi sono molto più semantiche, ma molto meno riusabili.
Vedi anche argomenti cogenti per "css semantico" su 'css orientato agli oggetti'