Sviluppo di CSS efficienti e semplificati
I CSS possono essere paragonati al set di strumenti di uno scultore; come scultori al lavoro, noi designer usiamo i CSS per creare layout strutturati di siti web.
Nel corso degli anni, questo processo è diventato più organizzato; sono state introdotte regole per creare le migliori pratiche di codifica.
In questo articolo, daremo un'occhiata ad alcune idee che puoi usare quando scrivi i fogli di stile per velocizzare il tuo codice.
CSS efficiente è facile da gestire e facile da leggere e può essere una risorsa per i web designer. Organizzarsi è un grande passo, ma usare i CSS può essere un po 'più complicato di così.
Mentre leggi questo articolo, tieni a mente le tue preferenze; il miglior consiglio che puoi ottenere da qualsiasi sviluppatore è trovare il tuo modo di lavorare. Combina alcune delle tecniche qui con i tuoi metodi per ottenere il massimo beneficio.
Perché preoccuparsi di snellire i CSS?
Molti designer confondono le lingue front-end e back-end quando parlano del codice di analisi. CSS e HTML sono linguaggi di progettazione front-end utilizzati per formattare e disegnare elementi su un sito web. I file vengono scaricati e analizzati dal browser del visitatore, il che significa che il codice di front-end ha un tempo di caricamento sostanziale.
Il codice scaricato e analizzato dal browser richiede tempo per essere letto e calcolato, proprio come il codice scritto in lingue back-end (come PHP o Ruby). I CSS semplificati possono trarre grandi vantaggi da un sito Web perché possono abbreviare i tempi di caricamento e accelerare la strutturazione di elementi di pagina.
I vantaggi potrebbero non essere evidenti con le attuali connessioni ad alta velocità e sistemi operativi avanzati. Potresti voler guardare il tuo sito web su un browser mobile per confrontare i tempi di caricamento e vedere come viene caricato il sito.
Quando il codice CSS viene codificato in modo efficiente, dovresti vedere la forma e lo stile degli elementi del sito web mentre vengono elaborati. Questo può apparire diverso da browser a browser, ma succede ancora. Più testerai il codice del tuo sito web, più lo vedrai.
Mantieni il tuo codice standardizzato e semplice. Se stai aggiornando il tuo blog o il tuo sito web pochi mesi dopo lo sviluppo iniziale, sfogare gli stili CSS che conosci è più facile rispetto a quelli nuovi. Adattamento a standard stabiliti aiuta a lungo termine.
Come lavorare con codice efficiente
Per iniziare a codificare gli stili con la massima efficienza, dovrai adottare alcune nuove idee. Queste sono le tecniche CSS di base utilizzate oggi dai siti Web e dagli sviluppatori di app di alto livello.
Mantieni il tuo codice semplice
Questo può essere facilmente trascurato. Quando esegui la mappatura di un set di dati per i tuoi stili, mantienilo semplice. Crea set di dati in uno stack di colonne, se necessario.
Inizia creando un elenco di sezioni diverse su cui lavorare nei tuoi stili. Puoi includere testo, moduli, caselle di layout, intestazioni, piè di pagina e qualsiasi altra cosa di cui potresti aver bisogno. Per essere veramente organizzati, puoi suddividerlo in alcuni stili noti, come ad esempio id o class per i collegamenti di navigazione.
Questo primo passaggio aiuta a creare un modello per il tuo sito web usando parole semplici, prima di entrare in qualsiasi linguaggio di stile. Successivamente, sedersi per scrivere il codice sarà molto più semplice; avere la lista delle risorse di fronte a te ti aiuterà a versare il codice a un ritmo quasi sovrumano.
Mantenere i blocchi di codice delineati e sparsi
C'è un dibattito in corso su come dovrebbe essere scritto il codice CSS. Quando ho iniziato, ho usato la notazione dei blocchi perché era tutto ciò che avevo mai visto. Ma la notazione a linea singola è molto più veloce quando si tratta di analizzare il testo e renderlo leggibile.
Non sto cercando di ignorare i CSS in stile block. Quando hai a che fare con un elemento importante o id che contiene sei o sette proprietà principali, tenerlo in forma bloccata sarà più facile. Potrai isolare le parti importanti del tuo stile, rendendole più facili da trovare a colpo d'occhio.
La lettura di stili lunghi nella notazione di blocchi è anche più semplice perché la maggior parte degli editor di testo racchiude lunghe righe e la lettura di coppie valore-proprietà può generare confusione quando ne hai 10 o più. Essendo il web designer, devi chiamare come spaziare il codice CSS. Tieni a mente l'efficienza e usa il tuo miglior giudizio.
Lavorare con altri sviluppatori
Se sei un web designer professionista o aspiri a esserlo, è probabile che lavorerai con una squadra prima o poi. Questo può essere una benedizione o una maledizione, a seconda della squadra.
I progettisti sono spesso riluttanti a fare importanti cambiamenti nel loro lavoro. Il codice CSS è un po 'diverso perché stai cercando di creare un bel layout usando solo valori di proprietà, e i file possono diventare disordinati quando vengono passati tra poche mani. Quindi, rimani organizzato.
I commenti sono di grande aiuto. Se linee o blocchi di codice potrebbero confondere o fuorviare gli altri, i commenti faranno risparmiare ore. Spiega tutto ciò che hai inserito nel foglio di stile nel modo più elegante possibile.
Assicurarsi che nessuno stile duplicato o accodato venga sovrascritto. Immagina che il h1 a h4 le intestazioni sono disegnate in alto in un documento CSS, ma poi alcuni codici più in basso cambiano i loro font. Questo potrebbe essere immensamente confuso per qualcuno che non ha scritto il codice e ora deve passare attraverso e correggere il bug.
Anche la comunicazione è critica. Potresti scrivere il codice più efficiente in giro, ma una mancanza di comunicazione danneggerà la tua squadra. Concentrati sull'attività da svolgere e lavora con le idee creative prodotte collettivamente dal team (non solo le tue).
Tieni traccia dei documenti CSS separati
Un altro modo per mantenere il codice pulito e organizzato è quello di mantenere separati i tipi di stile. Questo funziona bene per i grandi siti Web in cui tenere tutti gli stili in un singolo documento sarebbe irrealistico.
Facebook è un buon esempio. Probabilmente ha molti stili diversi per tutte le sue varie pagine: profilo, ricerca, registrazione, foto, ecc. Se gli stili fossero tutti consolidati in un unico file, non vorrei essere il tipo che deve ordinare il codice solo per correggi un bug semplice.
Facebook ottiene molto più traffico rispetto al tuo sito web, ma i principi sono gli stessi. Se l'organizzazione è un problema, i fogli di stile separati possono fare molto. I web designer spesso organizzano il codice in base all'aspetto del documento che struttura (ad es. Layout.css , text.css , forms.css ).
Non tutti gli stili devono essere caricati su ogni pagina. E qui sta il vantaggio: il metodo consente una maggiore personalizzazione durante la creazione del tuo sito web. Ridurrai enormemente il tempo di analisi semplicemente creando viste e stili separati.
Testing Support for IE
Gli sviluppatori Web hanno sempre dipinto Internet Explorer come il cattivo, specialmente con i CSS. Fortunatamente, puoi applicare i commenti condizionali (che sembrano normali commenti alla maggior parte dei browser) al codice HTML.
È possibile utilizzarli per applicare gli stili in Internet Explorer. Controlla i commenti condizionali se non hai familiarità con loro; possono rivelarsi inestimabili quando le proprietà CSS non funzionano correttamente e hai bisogno di un'alternativa.
Con il rilascio di Internet Explorer 9 Beta , ci stiamo avvicinando un po 'a un'esperienza Internet unificata. L'unico problema è il numero di persone che eseguono ancora browser vecchi come IE6 e IE7, che hanno gravi errori di elaborazione (a causa di motori di rendering difettosi) e talvolta richiedono stili esterni. Per fortuna, il supporto è migliorato e Microsoft sembra aver cambiato le cose.
Aggiungere un sommario
Questo passaggio è facoltativo, ma trovo che faccia meraviglie per i miei fogli di stile. È possibile memorizzare la tabella al di fuori del documento CSS stesso, ma ho trovato questo in qualche modo controproducente, soprattutto perché aggiungere commenti in linea è così facile.
I motivi principali per inserire un sommario nei tuoi stili sono che facilita l'accesso e semplifica il processo di modifica. Inserisci marcatori all'inizio del documento per separare il codice in divisioni logiche.
Creare le proprie chiavi è un buon approccio. Ad esempio, se hai intenzione di dividere il tuo tavolo in base alle aree principali del documento (layout, font, intestazione, navigazione, ecc.), Puoi digitare le sezioni con caratteri univoci.
Potresti usare =!layout e =!font per delineare le sezioni di layout e font, rispettivamente. Probabilmente non ti imbatterai in quelle sequenze esatte di personaggi in qualsiasi parte del codice, quindi aggiungerli alla tua tabella e all'inizio di ogni sezione di commenti dovrebbero essere sicuri. Quindi, usa la funzione di ricerca nell'editor di testo per saltare alla sezione desiderata.
Questa è anche una buona strategia per progetti in cui molte persone guarderanno il codice. Mantiene tutto organizzato e accessibile.
Esistono molti modi per ottimizzare il codice e renderlo più efficiente, e questi suggerimenti sono un ottimo inizio. I CSS si stanno evolvendo e molte nuove idee a riguardo sono in via di formazione.
Hai bisogno di passione e dedizione per farlo nel settore del design. Se riesci a conservare la tua passione per il design digitale, non tenere il passo con le best practice CSS non dovrebbe essere difficile. Raggiungere gli altri in questa enorme comunità globale di web designer può essere di grande aiuto; gli esperti del settore sono generalmente felici di condividere le loro tecniche e innovazioni.
Questo post è stato scritto esclusivamente per il Webdesigner Depot di Jake Rocheleau , appassionato web designer e appassionato di social media. Jake ama leggere e scrivere sulle ultime tendenze digitali e di Internet e sul networking con la comunità del design. Per saperne di più sul suo lavoro, trovalo su Twitter @ jakerocheleau .
Quali sono i tuoi metodi per ottimizzare i CSS? Qualche suggerimento per gli sviluppatori di principianti CSS? Quali nuove funzionalità o supporto aggiuntivo ti piacerebbe vedere nelle prossime iterazioni di CSS?