Dopo settimane di lavoro su un progetto web, i file CSS si riempiono di definizioni ripetitive, nomi di classi lunghi e difficili da comprendere e linee il cui scopo è difficile da tracciare. Questo caos non si manifesta all'improvviso, ma si accumula con ogni piccolo aggiustamento o aggiunta temporanea che diventa permanente.
Ma scrivere CSS non deve essere per forza un'operazione casuale o macchinosa. Esistono tecniche semplici e metodologie comprovate che aiutano a organizzare il codice, ridurre la duplicazione e migliorare l'estensibilità. Seguendo alcune regole e pratiche, un file CSS può essere trasformato in qualcosa di chiaro, facile da capire e veloce da caricare.
In questa guida condivideremo i passaggi pratici per aiutarti a scrivere un CSS pulito, dalla prima riga all'ultima modifica.
Fin dai suoi esordi alla fine degli anni '90, la portata dei CSS si è notevolmente ampliata. È ormai una tecnologia potente e avanzata, ampiamente supportata dai browser desktop e mobili, ma c'è ancora molto da imparare. Che tu sia alle prime armi con CSS o che tu voglia impararlo per la prima volta, questa checklist ti sarà utile con suggerimenti pratici, linee guida generali e risorse di alta qualità.
1. Assicurati prima di conoscere l'HTML.
La prima cosa che dovresti sapere prima di iniziare a imparare il CSS è l'HTML. Potrebbe sembrare ovvio, ma ci sono alcuni concetti importanti da ribadire prima di iniziare a formattare i contenuti.
Il tuo percorso di apprendimento si concentrerà sulla separazione tra semantica (HTML) e stile (CSS). Assicuratevi di utilizzare un markup chiaro e corretto e di eliminare tutti i tag HTML stilistici a cui potreste essere abituati.
La documentazione HTML di Mozilla è eccellente. (E tutto il suo materiale riguardante la piattaforma web), quindi inizia da lì se non hai familiarità con l'HTML.
2. Inizia con le basi assolute del CSS
Rimani sul sito web di Mozilla eImmergiti nell'introduzione ai CSS.
A questo punto, ci sono due cose fondamentali da imparare: come scrivere CSS di base e collegarlo ai file HTML. La documentazione di Mozilla inizia con una semplice introduzione a CSS utilizzando questo esempio:
Anche se non sei bravo a scrivere CSS, probabilmente capirai cosa fa questo frammento: rende rossi gli elementi h1 e imposta una dimensione specifica del carattere.
L'articolo di Mozilla "Introduzione ai CSS" descrive la seconda parte del puzzle, spiegando come applicare i CSS, come quello sopra, ai file HTML. I fogli di stile interni sono probabilmente il modo più rapido e semplice per iniziare, ma quelli esterni hanno molti vantaggi, quindi è una buona idea provarli entrambi.
3. Gioca a qualche gioco
Sebbene ci siano molti fantastici giochi che ti aiutano Impara CSSDi solito, però, coprono tecniche più avanzate, come la pianificazione di rete. CSS Diner è più adatto ai principianti e dovrebbe aiutarti a comprendere i selettori CSS che contrassegnano parti specifiche del tuo documento per la formattazione. L'esempio sopra mostra un semplice selettore "h1", ma può essere più complesso.
a#selected > .icon,
.box h2 + p {
font-weight: bold;
}
Il test è considerato CSS Speedrun Un altro buon test per mettere alla prova le tue abilità con i selettori, anche se, come suggerisce il nome, può rivelarsi un'esperienza più stancante!
4. Utilizzare gli strumenti per sviluppatori di Chrome/Safari/Firefox
Una volta apprese le basi, sarai quasi pronto per iniziare a scrivere i tuoi fogli di stile. Tuttavia, puoi iniziare a sperimentare con i CSS direttamente nel tuo browser, evitando di dover aprire un editor di testo e iniziare a modificare i file.
Ad esempio, Element Inspector in Google Developer Tools ti consente di visualizzare il CSS che si applica a qualsiasi elemento in qualsiasi pagina che visualizzi:
Inoltre, puoi usare il pannello Stili per modificare qualsiasi file CSS o addirittura creare nuovi stili e vedere i risultati all'istante.
Questi strumenti variano leggermente a seconda del browser, ma dovresti riuscire a utilizzarli per migliorare le tue competenze. Chrome offre un eccellente supporto di completamento automatico per suggerire nomi e valori di proprietà accettabili. Sperimentando, puoi conoscere diverse funzionalità e saperne di più tramite link diretti alla documentazione di Mozilla Developer Network (MDN):
5. Prova un editor online
Prima di utilizzare questo editor di testo, esiste un altro modo per mettere alla prova le tue competenze CSS senza dover gestire file locali. Esistono numerose applicazioni web, tra cui: CodePen أو JSFiddle. Questi strumenti sono simili ad alcuni giochi che hai già visto in precedenza, fatta eccezione per la parte di gioco. Fornisce caselle di testo che puoi utilizzare per modificare HTML e CSS, con un'anteprima che mostra il risultato finale.
Consigli
Sebbene questi strumenti includano solitamente una sezione JavaScript per sviluppare le tue competenze di programmazione, questa è del tutto facoltativa. Ignora semplicemente le sezioni "JS" o "JavaScript" e concentrati su HTML e CSS.
Questi editor includono funzionalità utili come l'evidenziazione della sintassi e la formattazione del codice. JSFiddle ha una buona capacità di segnalazione degli errori, ad esempio segnalando valori CSS non validi. Ti consente inoltre di salvare il tuo lavoro per un utilizzo successivo e di copiare e incollare in un file locale codice HTML o CSS se vuoi utilizzarlo nei tuoi progetti.
6. Utilizzare i migliori materiali di riferimento.
Come hai visto, molte di queste risorse puntano al Software Developer Network (MDN). Questa fonte di informazioni sulla piattaforma web è eccellente e completa; Dovrebbe essere la tua prima risorsa quando hai bisogno di cercare dettagli su qualsiasi problema CSS.
avvertimento
Potresti imbatterti in un sito W3Schools Quando si cercano argomenti CSS o altri argomenti correlati al web. Il nome del sito suggerisce che sia affiliato al W3C, l'organismo che stabilisce gli standard per le tecnologie web. Ma non è così; Si tratta di una raccolta di documenti provenienti da terzi. Sebbene la sua qualità sia migliorata, è ancora lontano dalla perfezione e l'MDN è una fonte molto più affidabile.
MDN offre una vasta gamma di materiali CSS, dai tutorial ai quiz interattivi. Il sito copre tutti gli aspetti dei CSS, inclusi i selettori, il box model, i colori e il debug. Ogni proprietà CSS ha una pagina di riferimento corrispondente che fornisce quasi tutto ciò che devi sapere al riguardo.
Ogni pagina di riferimento delle proprietà include una spiegazione dei diversi valori, esempi su come utilizzarli e una tabella di compatibilità dei browser. Quest'ultima è necessaria per distinguere tra funzionalità ben supportate e funzionalità sperimentali che potrebbero funzionare solo in alcuni browser specifici.
Se cercate una buona alternativa, le risorse CSS del W3C sono affidabili. Tuttavia, fate attenzione: non è facile da usare per i principianti e dovreste consultarlo solo dopo aver esaurito le eccellenti informazioni contenute in MDN.
7. Rimani informato
Sebbene sia una tecnologia matura e stabile, CSS è ancora in evoluzione. I membri di diverse organizzazioni continuano a suggerire modifiche, correzioni e nuove funzionalità.
Come designer, la tua sfida spesso va oltre il sapere come fare qualcosa e si concentra invece su ciò che puoi effettivamente realizzare. Puoi cambiare il colore del testo, ma puoi cambiarne il contorno? Oppure puoi usare un gradiente invece di un colore?
Per rimanere aggiornati sugli ultimi sviluppi e rispondere a queste domande, dovreste cercare una buona fonte di notizie CSS, che si tratti di un podcast, un blog o un account social media dedicato.
Preparare CSS-Tricks Una delle migliori fonti di notizie CSS avanzate. Include articoli che coprono tutti gli aspetti di CSS, nonché ottimo materiale di riferimento, in particolare per quanto riguarda funzionalità come Flexbox e griglia.
Il CSS Podcast è un programma stagionale in onda da cinque anni. I relatori sono molto interattivi, il che consente loro di approfondire i dettagli dei CSS senza rendere l'argomento noioso o complicato.
? Dott.ssa Leah FerroEsperta in questo campo, pubblica regolarmente su X post riguardanti CSS e la piattaforma web. Funziona Gene Simmons Apple lo ha su Safari e pubblica su Bluesky informazioni sui problemi CSS. account Gruppo di lavoro CSS Molto formale. L'account pubblica solo occasionalmente, per promuovere aggiornamenti delle specifiche e altri articoli correlati da w3.org, ma seguirlo è un ottimo modo per rimanere aggiornati sugli ultimi sviluppi.
8. Convalida CSS
Ora che hai creato decine di fogli di stile, è opportuno assicurarti che siano privi di errori. Gli errori CSS possono essere facilmente nascosti e difficili da correggere, quindi assicurati di ottenere tutto l'aiuto possibile.
è sempre stato Verificatore W3C È il gold standard nel controllo degli errori CSS. Puoi fornire un URL, un file o una copia di testo dei tuoi modelli per la convalida.
Se i tuoi fogli di stile sono privi di errori, vedrai un amichevole messaggio di congratulazioni e un badge che potrai utilizzare sulle tue pagine web per confermarne la correttezza. Non è più necessario visualizzare questi messaggi, ma puoi farlo se vuoi mettere in mostra le tue competenze sul tuo portfolio o sul tuo sito web personale.
D'altro canto, se ci sono problemi con la formattazione, il verificatore ti mostrerà messaggi di errore dettagliati che li spiegano. Come la maggior parte degli errori, può essere difficile da comprendere se non lo si conosce, quindi è consigliabile esaminare il codice interessato per identificare il problema prima di tentare di risolverlo.
9. Verifica la compatibilità del browser
Un altro aspetto importante della validità del foglio di stile è la compatibilità tra browser. Questo problema è molto meno comune di quanto non fosse in passato, ma gli aggiornamenti CSS più recenti, comprese le funzionalità sperimentali, non sempre godono di un supporto diffuso. Fortunatamente, te lo dirà. Posso usare Esattamente con proprietà CSS che funzioneranno in ogni browser.
Le informazioni qui contenute sono dense, ma presentate in modo facilmente comprensibile. Dovrai selezionare i browser che desideri supportare, tra cui il predecessore di Edge, Internet Explorer, e la sua compatibilità con i computer. La buona notizia è che la maggior parte del codice CSS è opzionale e puoi progettare le tue pagine in modo che si adattino meglio quando vengono visualizzate su browser che non le supportano.
10. Padroneggiare la tipografia CSS
La tipografia è un elemento fondamentale di qualsiasi design e non è stata presa sul serio sul web fino all'avvento dei font CSS. I CSS sono sempre stati flessibili e supportano una famiglia di font che consente di scegliere l'ordine preferito dei font da utilizzare, a seconda di quelli disponibili. Ma i veri web font offrono un maggiore controllo sull'esperienza e consentono a tutti gli utenti di vedere il tuo font anche se non lo hanno installato.
considerato come Google Fonts Uno dei migliori fornitori di font gratuiti, la scelta è ampia: circa 2000 famiglie di font al momento in cui scrivo.
Sono disponibili numerose opzioni e configurazioni, che spaziano da diversi pesi, al supporto di più lingue e ai font delle icone. Dopo aver personalizzato il font a tuo piacimento, copia il codice incorporato e aggiungilo al tuo file HTML. Se lo desideri, puoi anche scaricare i file dei font e ospitarli localmente.
Il CSS strutturato non si limita a creare un file di codice dall'aspetto migliore, ma migliora anche le prestazioni, la velocità di sviluppo e la collaborazione tra team. Iniziare con uno stile di scrittura chiaro, usare etichette comprensibili ed evitare le ripetizioni sono tutti passaggi che faranno sì che il tuo codice funzioni per te anziché diventare un peso.
Quanto più si rispetta il principio "fai in modo che il CSS serva al tuo scopo senza complessità", tanto più facile e veloce sarà modificare ed estendere il tuo design in seguito. Inizia con questi semplici passaggi e scoprirai che CSS può essere divertente e organizzato allo stesso tempo.
