I CSS possono essere un linguaggio di marcatura estremamente potente per i progettisti.
Tuttavia, il codice CSS che viene prodotto è buono solo come i principi che vengono seguiti dal progettista che crea il codice.
Mentre si può pensare che chiunque possa sfornare i CSS, c'è una grande differenza tra scrivere CSS e produrre CSS di prima qualità.
Per assicurarti di essere sulla strada giusta, ecco otto principi CSS che ogni web designer dovrebbe seguire.
Se hai intenzione di investire tempo nella codifica dei CSS, ha senso solo prendersela comoda convalidare il codice che hai creato. Tuttavia, non smette mai di stupirmi quanti designer ignorano questo passaggio fondamentale. La convalida del codice ti consente di eliminare qualsiasi problema e assicurarti che funzionerà bene per i tuoi visitatori.
Oltre a convalidare il tuo file CSS, devi anche convalidare i tuoi file HTML o XHTML. Prima di convalidare questi file, assicurati di aver trovato il tempo necessario per dichiarare l'HTML o XHTML DOCTYPE corretto. Dichiarare il tuo DOCTYPE può sembrare un dettaglio banale, ma non posso contare quante discussioni ho avuto con i designer frustrati che hanno continuato ad avere problemi con un disegno, solo per scoprire che era perché avevano dichiarato un DOCTYPE obsoleto (o non aveva affatto dichiarato un DOCTYPE).
Sia che tu stia lavorando a un progetto da solo o con un team di designer, è importante documentare il lavoro che crei. Probabilmente puoi capire perché questo sarebbe importante nel contesto di un team di progettazione, ma ti starai chiedendo perché sarebbe importante se stai lavorando a un progetto solista. Bene, c'è sempre la possibilità che il tuo progetto solista si evolva in un progetto di gruppo, e se questo accade, è molto più facile avere la documentazione a portata di mano che provare a tornare indietro e crearlo. Tuttavia, anche nel caso in cui il tuo progetto rimanga un one man show, potresti essere sorpreso di quanto sia utile la documentazione quando decidi di rivisitare un progetto dopo averlo guardato per un anno.
Quando si tratta di creare documentazione per il codice CSS, l'impulso naturale della maggior parte dei progettisti è di aggiungerlo direttamente al proprio codice ponendolo tra / * e * /. Come molti dei principi in questa lista, non c'è nulla di tecnicamente scorretto nell'adottare questo approccio. Tuttavia, l'aggiunta di commenti direttamente al codice CSS aumenterà la dimensione del file, che a sua volta può aumentare i tempi di caricamento e rallentare le prestazioni generali di un sito Web. Se sei seriamente intenzionato a scrivere codice CSS di prima qualità, dovresti documentare il tuo codice, ma in un file separato.
Anche se credo onestamente che sia più efficace documentare in un file separato, so che ci sono molti file che semplicemente non sono d'accordo con questa pratica. Se ti rifiuti di documentare in un file separato, la cosa migliore che puoi fare è usare un compressore CSS (infatti, anche se scegli di utilizzare un file separato per la documentazione, puoi comunque trarne vantaggio utilizzando un compressore CSS). Puoi usare questo Compressore CSS da CSS Drive Gallery, o semplicemente cerca su Google per trovare un compressore CSS alternativo.
Sebbene gli hack siano diventati una pratica accettabile per molti all'interno della comunità CSS, ciò non significa che "l'hacking CSS" sia un principio da seguire. Il problema con questo approccio alla progettazione è che significa che stai cercando intenzionalmente una soluzione complicata ai problemi. Anche se potresti pensare che uno o due hack di tanto in tanto non feriranno nessuno, entrare nella mentalità di "hackingare" qualsiasi problema che incontri può avere un impatto negativo sulla tua mentalità generale del design.
Evitare gli hack è un consiglio che gli esperti hanno dispensato per un po 'di tempo. Puoi tornare indietro fino al 2003 e vederlo Peter-Paul Koch (che è un esperto sviluppatore e autore) ha avvertito i progettisti delle implicazioni degli hack CSS per qualche tempo: "Il mostro della complessità è riapparso, proprio nel centro del moderno sviluppo del Web. Al giorno d'oggi non si manifesta come un tavolo incessantemente annidato, ma come un hack infinitamente complicato. "
Poiché le div offrono un alto livello di flessibilità, può essere facile abusarne. In effetti, questo problema è diventato così comune tra i progettisti che la comunità CSS ha creato un termine per etichettare questo problema: divitus. Per evitare di cadere vittima di questa condizione, prima di utilizzare automaticamente un tag div, è necessario chiedersi sempre se esiste un tag HTML effettivo che farà il lavoro per te. Ad esempio, invece di creare più div di intestazione, perché non usi i tag di intestazione HTML che sono già disponibili, come H1 e H2?
Dopo aver iniziato a prendere in considerazione il problema delle div, vedrai rapidamente i vantaggi dell'uso del tag HTML appropriato invece di creare automaticamente un nuovo div. Non solo può ridurre la quantità di codice che devi creare (il che ti farà risparmiare tempo, insieme a ridurre il tempo di caricamento del tuo sito web), ma fornirà al tuo codice una struttura più logica.
Se chiedi a un designer nuovo o inesperto di decidere come nominare le loro classi, potrebbero dire che non ha molta importanza. Mentre questo è tecnicamente vero, questa è una vista molto miope di nominare le classi CSS. Sebbene ci siano designer che rientrano nella categoria di non interesse per i nomi delle classi CSS, ci sono anche designer che pensano ai loro nomi di classe, ma in realtà adottano l'approccio sbagliato.
Dato che non voglio semplicemente batterti in testa con esempi teorici, lascia che ti spieghi in termini concreti. Diciamo che stai creando una classe per controllare una delle caselle sulla tua pagina. Il riquadro si troverà nella parte inferiore della pagina, conterrà i commenti dei lettori e userete i CSS per dargli uno sfondo marrone chiaro e controllare il padding. Invece di nominare questo .tan-box (che è ciò che farebbero molti progettisti ben intenzionati), chiamatelo. Com-box. La ragione per cui .comment-box è un nome di classe migliore di .tan-box è perché se si decide di cambiare il colore di sfondo in blu lungo la strada (o decidere di spostare la casella dalla parte inferiore della pagina in un'area diversa) , non confonderà te o nessun altro designer che sta guardando il CSS per quel sito web.
Mentre la stenografia può confondere i designer che stanno appena iniziando a scrivere il proprio codice CSS, una volta abituati allo stile della stenografia, diventa una delle pratiche più efficaci che puoi seguire come designer .
Ci sono molti vantaggi nell'uso della stenografia. Per uno, riduce la dimensione dei file, che ridurrà il tempo di caricamento del tuo sito web. Inoltre, non solo facilita l'organizzazione del codice, ma rende anche più semplice la modifica del codice in futuro. Quando inizi ad adattarti alla stenografia, dovresti anche imparare a scrivere il tuo codice su una riga (invece di distribuire le dichiarazioni su più righe).
Come designer, sei molto più incline alla tecnologia di chiunque altro nella popolazione mainstream. Poiché fai parte di una minoranza che vive e respira tecnologia, ci sono molte abitudini che la maggior parte delle persone non ha mai pensato. Ad esempio, probabilmente ti sei sforzato di eliminare la maggior parte delle "scartoffie" possibili nella tua vita. Tuttavia, è importante ricordare che la maggior parte della popolazione continua a stampare regolarmente. Mentre probabilmente tagghi un elemento con del.icio.us quando vuoi salvarlo per riferimento futuro, l'utente medio di Internet stamperà quella stessa pagina.
Poiché le persone continuano a stampare informazioni da Internet, è importante utilizzare i CSS per rendere la stampante dei contenuti più adatta . I visitatori apprezzeranno tutto il lavoro che hai svolto per creare un bellissimo layout per il sito web che stanno visitando, ma quando decideranno di stampare una pagina da quel sito Web, apprezzeranno ancora di più quando si renderanno conto che la loro stampa contiene solo il testo che vogliono (e nessuna delle fantastiche grafiche che hanno un bell'aspetto sul loro computer ma che sprecherebbero una tonnellata di inchiostro dalla loro stampante). Dato che i CSS rendono abbastanza semplice garantire che il contenuto sia formattato correttamente quando stampato, non c'è alcuna scusa per un vero progettista di trascurare questo passaggio del processo di progettazione.
Potresti pensare che questo principio finale suoni cliché, ma è probabilmente il più importante dell'intera lista. Se ti stai dedicando a diventare il miglior designer possibile, devi assicurarti di lavorare sempre per espandere la tua conoscenza dei CSS . Fortunatamente, questo è facile da fare se hai il desiderio e la volontà di impegnarti a continuare la tua educazione CSS. Mentre la formazione continua può essere un compito difficile per le persone in molti settori di natura non tecnica, perché Internet è letteralmente la base per i CSS, la quantità di risorse gratuite da cui si può imparare è letteralmente infinita. Se pensi che stia esagerando, digita "CSS" su Google e vedrai che ci sono 483.000.000 risultati da consultare.
Oltre a imparare dalle risorse online (e stampare le risorse se preferisci), puoi imparare molto dagli altri designer CSS. Sia che tu analizzi il loro lavoro, che ascolti i consigli che stanno dando online o che parli loro in situazioni faccia a faccia, puoi ottenere molto valore interagendo e potenzialmente collaborando con altri designer che si impegnano a seguire i principi di di prim'ordine Progettazione CSS e produzione di straordinari pezzi di lavoro.