Share
Il CSS è un linguaggio usato da quasi ogni sviluppatore a un certo punto. Mentre è un linguaggio che a volte diamo per scontato, è potente e ha molte sfumature che possono aiutare (o danneggiare) i nostri progetti. Qui ci sono trenta delle migliori pratiche CSS che ti permetteranno di scrivere CSS solido ed evitare errori costosi.
Se non sei sicuro di implementare alcune di queste cose da te, puoi trovare esperti CSS su Envato Studio per aiutarti. Possono correggere gli errori o personalizzare il tuo sito per te, e sono sviluppatori esperti in modo che seguano le best practice durante il completamento del lavoro.
Esperti di CSS su Envato Studio La leggibilità del tuo CSS è incredibilmente importante, anche se la maggior parte delle persone si affaccia perché è importante. La grande leggibilità del tuo CSS lo rende molto più facile da mantenere in futuro, dato che sarai in grado di trovare gli elementi più velocemente. Inoltre, non saprai mai chi potrebbe aver bisogno di guardare il tuo codice in seguito.
.someDiv background: red; imbottitura: 2em; bordo: 1px solido nero;
.someDiv background: red; imbottitura: 2em; bordo: 1px solido nero;
Entrambe le pratiche sono perfettamente accettabili, anche se generalmente troverai che il gruppo due disprezza il gruppo uno! Ricorda solo: scegli il metodo che ti sembra migliore. Questo è tutto ciò che conta.
Oltre a mantenere leggibile il codice, è necessario assicurarsi che il CSS sia coerente. Dovresti iniziare a sviluppare la tua "sotto-lingua" di CSS che ti permette di nominare rapidamente le cose. Ci sono alcune classi che creo in quasi tutti i temi e uso sempre lo stesso nome. Ad esempio, uso ".caption-right" per rendere mobili le immagini che contengono una didascalia a destra.
Pensa a cose come se userai o meno trattini bassi o trattini nei nomi dell'ID e della classe, e in quali casi li userai. Quando inizierai a creare i tuoi standard per i CSS, diventerai molto più competente.
Alcuni puristi del design scherniscono l'idea di utilizzare una struttura CSS con ogni progetto, ma credo che se qualcun altro si è preso il tempo di mantenere uno strumento che accelera la produzione, perché reinventare la ruota? So che i framework non dovrebbero essere usati in ogni caso, ma il più delle volte possono aiutare.
Molti designer hanno il proprio framework che hanno creato nel tempo e anche questa è una grande idea. Aiuta a mantenere la coerenza all'interno dei progetti.
È meno una questione di reinventare la ruota, e più una questione di capire come funziona la ruota.
Se hai appena iniziato con i CSS, ti raccomando personalmente di stare alla larga da questi framework per almeno un anno. Altrimenti, ti confonderai solo tu. Scopri CSS ... quindi prendi scorciatoie!
La maggior parte dei framework CSS ha un reset integrato, ma se non ne userai uno allora almeno considera l'utilizzo di un reset. I ripristini eliminano essenzialmente le incoerenze del browser come altezze, dimensioni dei caratteri, margini, intestazioni, ecc. Il reset consente al layout di apparire coerente in tutti i browser.
Il MeyerWeb è un reset popolare, insieme al reset degli sviluppatori di Yahoo. Oppure puoi sempre eseguire il reset, se questo ti piace.
È sempre opportuno posizionare il foglio di stile in modo da poter trovare rapidamente parti del codice. Raccomando un formato top-down che affronta gli stili così come appaiono nel codice sorgente. Quindi, un foglio di stile di esempio potrebbe essere ordinato in questo modo:
/ ****** contenuto principale ********* / styles goes here ... / ****** footer ********* / styles go here ...
Gli elementi in un foglio di stile a volte condividono proprietà. Invece di riscrivere il codice precedente, perché non combinarli? Ad esempio, gli elementi h1, h2 e h3 potrebbero tutti condividere lo stesso carattere e colore:
h1, h2, h3 font-family: tahoma, colour: # 333
Potremmo aggiungere caratteristiche uniche a ciascuno di questi stili di intestazione se vogliamo (ad es. H1 size: 2.1em) più avanti nel foglio di stile.
Molti designer creano i loro CSS nello stesso momento in cui creano l'HTML. Sembra logico creare entrambi allo stesso tempo, ma in realtà risparmierai ancora più tempo se crei il intero Mockup HTML prima. Il ragionamento alla base di questo metodo è che conosci tutti gli elementi del layout del tuo sito, ma non sai quale CSS ti servirà nel tuo progetto. La creazione iniziale del layout HTML ti consente di visualizzare l'intera pagina nel suo complesso e ti consente di pensare al tuo CSS in modo più olistico e dall'alto verso il basso.
A volte è utile aggiungere più classi a un elemento. Diciamo che hai un
Puoi aggiungere tutte le classi che vuoi (spazio separati) a qualsiasi dichiarazione.
Se devi tornare al tuo codice HTML per modificare la presentazione (o lo stile) della pagina, stai sbagliando!
La dichiarazione doctype conta molto sul fatto che il tuo markup e CSS possano essere validati. In effetti, l'intero aspetto del tuo sito può variare notevolmente a seconda del DOCTYPE che dichiari.
Ulteriori informazioni su quale DOCTYPE utilizzare in un elenco a parte.
Uso il doctype di HTML5 per tutti i miei progetti.
"Ciò che è bello di questo nuovo DOCTYPE, in particolare, è che tutti i browser attuali (IE, FF, Opera, Safari) lo guarderanno e cambieranno il contenuto in modalità standard, anche se non implementano HTML5. inizia a scrivere le tue pagine web usando HTML5 oggi e fallo durare molto, molto, molto tempo. "
- John Resig
Puoi ridurre considerevolmente il tuo codice usando la stenografia quando realizzi il tuo CSS. Per elementi come padding, margin, font e altri, puoi combinare gli stili in una riga. Ad esempio, un div potrebbe avere questi stili:
#crayon margin-left: 5px; margin-right: 7px; margin-top: 8px;
Potresti combinare questi stili in una riga, in questo modo:
#crayon margin: 8px 7px 0px 5px; // valori in alto, a destra, in basso e a sinistra, rispettivamente.
Se hai bisogno di ulteriore aiuto, ecco una guida completa sulle proprietà stenografiche dei CSS.
Proprio come qualsiasi altra lingua, è una buona idea commentare il tuo codice in sezioni. Per aggiungere un commento, aggiungi semplicemente / * dietro il commento e * / per chiuderlo, in questo modo:
/ * Ecco come si commenta CSS * /
Gli elementi di blocco sono elementi che cancellano naturalmente ogni riga dopo che sono stati dichiarati, coprendo l'intera larghezza dello spazio disponibile. Gli elementi in linea occupano tutto lo spazio necessario e non impongono una nuova riga dopo che sono stati utilizzati.
Ecco gli elenchi di elementi che sono in linea o a blocchi:
span, a, strong, em, img, br, input, abbr, acronimo
E gli elementi di blocco:
div, h1 ... h6, p, ul, li, tabella, blockquote, pre, forma
Mentre questo è più di un consiglio frivolo, può tornare utile per la scansione rapida.
# cotton-candy color: #fff; fluttuare: a sinistra; font-weight: height: 200px; margine: 0; padding: 0; larghezza: 150 px;
I compressori CSS aiutano a ridurre le dimensioni dei file CSS rimuovendo interruzioni di riga, spazi bianchi e elementi combinati. Questa combinazione può ridurre notevolmente le dimensioni del file, accelerando il caricamento del browser. CSS Optimizer e CSS Compressor sono due eccellenti strumenti online che possono ridurre i CSS.
Va notato che il restringimento del CSS può migliorare le prestazioni, ma si perde parte della leggibilità del CSS.
Scoprirai che ci sono determinati stili che stai applicando più e più volte. Invece di aggiungere uno stile particolare a ciascun ID, puoi creare classi generiche e aggiungerle agli ID o ad altre classi CSS (usando il suggerimento # 8).
Per esempio, mi trovo a usare float: right e float: lasciato sopra un over nei miei disegni. Quindi aggiungo semplicemente le classi .left e .right al mio foglio di stile e faccio riferimento agli elementi.
.left float: left .right float: right...
In questo modo non devi aggiungere costantemente "float: left" a tutti gli elementi che devono essere floatati.
Molti principianti di CSS non riescono a capire perché non si possa semplicemente usare float: center per ottenere quell'effetto centrato su elementi a livello di blocco. Se solo fosse così facile! Sfortunatamente, dovrai usare
margine: 0 auto; // valori in alto, in basso e a sinistra, a destra, rispettivamente.
per centrare div, paragrafi o altri elementi nel layout.
All'inizio, c'è la tentazione di avvolgere un div con un ID o una classe attorno a un elemento e creare uno stile per esso.
Titolo
A volte può sembrare più semplice creare solo stili di elementi unici come nell'esempio sopra, ma inizierai a ingombrare il tuo foglio di stile. Questo avrebbe funzionato bene:
Titolo
Quindi puoi facilmente aggiungere uno stile a h1 anziché a div genitore.
Se non hai ancora scaricato Firebug, fermati e vai a farlo. Sul serio. Questo piccolo strumento è un deve avere per qualsiasi sviluppatore web. Tra le numerose funzionalità fornite in bundle con l'estensione per Firefox (debug JavaScript, ispeziona HTML, trova errori), puoi anche ispezionare visivamente, modificare e modificare i CSS in tempo reale. Puoi scoprire di più su cosa fa Firebug sul sito Web ufficiale di Firebug.
Evitare di utilizzare il minor numero di hack specifici del browser, se possibile. Vi è una tremenda pressione per assicurarsi che i disegni siano coerenti su tutti i browser, ma l'utilizzo degli hack rende i progetti ancora più difficili da mantenere in futuro. Inoltre, l'utilizzo di un file di ripristino (vedi n. 4) può eliminare quasi tutte le irregolarità di rendering tra i browser.
Il posizionamento assoluto è un utile aspetto del CSS che ti consente di definire dove Esattamente un elemento dovrebbe essere posizionato su una pagina al pixel esatto. Tuttavia, a causa del mancato rispetto del posizionamento assoluto per gli altri elementi della pagina, i layout possono diventare piuttosto pelosi se vi sono più elementi posizionati in modo assoluto attorno al layout.
La trasformazione del testo è una proprietà CSS estremamente utile che consente di "standardizzare" la formattazione del testo sul tuo sito. Ad esempio, supponi di voler creare alcune intestazioni con solo lettere minuscole. Basta aggiungere la proprietà text-transform allo stile dell'intestazione in questo modo:
trasformazione del testo: minuscolo;
Ora tutte le lettere nell'intestazione saranno minuscole per impostazione predefinita. La trasformazione del testo ti consente di modificare il testo (prima lettera maiuscola, tutte le lettere maiuscole o tutte minuscole) con una semplice proprietà.
Spesso le persone usano un'immagine per il loro testo di intestazione e quindi usano display: none o un margine negativo per far galleggiare l'h1 fuori dalla pagina. Matt Cutts, il capo del team Webspam di Google, ha dichiarato ufficialmente che questa è una cattiva idea, poiché Google potrebbe pensare che sia spam.
Come dice esplicitamente Mr. Cutts, evita di nascondere il testo del tuo logo con i CSS. Basta usare il tag alt. Mentre molti affermano che puoi ancora usare i CSS per nascondere un tag h1 fintanto che h1 è uguale al testo del logo, preferisco sbagliare sul sicuro.
Convalidare i tuoi CSS e XHTML fa più che dare un senso di orgoglio: ti aiuta a individuare rapidamente gli errori nel codice. Se stai lavorando su un progetto e per qualche motivo le cose non stanno andando bene, prova a eseguire il markup e il validatore CSS e vedi quali errori compaiono. Di solito ti accorgi di aver dimenticato di chiudere un div da qualche parte, o di perdere un punto e virgola in una proprietà CSS.
C'è sempre stato un forte dibattito sul fatto che sia meglio usare pixel (px) o ems (em) quando si definiscono le dimensioni dei caratteri. I pixel sono un modo più statico per definire le dimensioni dei caratteri e gli em sono più scalabili con diverse dimensioni del browser e dispositivi mobili. Con l'avvento di molti diversi tipi di navigazione sul Web (laptop, dispositivi mobili, ecc.), Gli sme stanno diventando sempre più l'impostazione predefinita per le misurazioni della dimensione dei caratteri poiché consentono la massima flessibilità. Puoi leggere di più sul motivo per cui dovresti usare ems per le dimensioni dei caratteri in questa discussione riflessiva sul forum. About.com ha anche un grande articolo sulle differenze tra le dimensioni di misurazione.
Le liste sono un ottimo modo per presentare i dati in un formato strutturato che è facile modificare lo stile. Grazie alla proprietà display, non devi semplicemente usare l'elenco come attributo di testo. Le liste sono anche ideali per creare menu di navigazione e cose del genere.
Molti principianti usano le div per rendere ogni elemento nella lista perché non capiscono come utilizzarle correttamente. Vale la pena fare uno sforzo per utilizzare gli elementi della lista di apprendimento per strutturare i dati in futuro.
Vedrai spesso i link di navigazione in questo modo:
Home Informazioni sui servizi Contatti
Anche se, tecnicamente, funzionerà bene dopo un po 'di CSS, è sciatto. Se stai aggiungendo un elenco di collegamenti, utilizzare un lista non ordinata, oca stupida!
È facile aggiungere inconsapevolmente selettori extra al nostro CSS che ingombra il foglio di stile. Un esempio comune di aggiunta di selettori aggiuntivi è con gli elenchi.
body #container .someclass ul li ...
In questo caso, solo il .qualche classe avrebbe funzionato bene.
.someclass li ...
L'aggiunta di selettori extra non porterà Armageddon o qualcosa del genere, ma mantengono il tuo CSS dall'essere il più semplice e pulito possibile.
Browser diversi rendono gli elementi in modo diverso. IE rende alcuni elementi in modo diverso rispetto a Firefox. IE 6 rende gli elementi in modo diverso rispetto a IE 7 e IE 8. Mentre i browser iniziano ad aderire più strettamente agli standard del W3C, non sono ancora perfetti (* cough IE cough *).
Una delle principali differenze tra le versioni dei browser è il modo in cui vengono visualizzati il padding e i margini. Se non stai già utilizzando un reset, potresti voler definire il margine e il riempimento per tutti gli elementi sulla pagina, per essere sicuri. Puoi farlo rapidamente con un reset globale, in questo modo:
* margin: 0; padding: 0;
Adesso tutti gli elementi hanno una spaziatura e un margine di 0, a meno che non sia definito da un altro stile nel foglio di stile.
La programmazione orientata agli oggetti è la separazione degli elementi nel codice in modo che sia più facile mantenere il riutilizzo. I CSS orientati agli oggetti seguono lo stesso principio di separare aspetti diversi dei fogli di stile in sezioni più logiche, rendendo il tuo CSS più modulare e riutilizzabile.
Ecco una presentazione slide di come funziona il CSS orientato agli oggetti:
Da Nicole Sullivan.Se sei nuovo al gioco CSS / XHTML, all'inizio OOCSS potrebbe essere un po 'una sfida. Ma i principi sono grandi da capire per la programmazione orientata agli oggetti in generale.
A seconda della complessità del design e delle dimensioni del sito, a volte è più semplice creare fogli di stile multipli più piccoli anziché un foglio di stile gigante. Oltre a essere più facile da gestire per il designer, più fogli di stile ti consentono di escludere i CSS su determinate pagine che non ne hanno bisogno.
Ad esempio, potrei avere un programma di polling che avrebbe un unico set di stili. Invece di includere gli stili di polling nel foglio di stile principale, potrei semplicemente creare un poll.css e il foglio di stile solo per le pagine che mostrano il sondaggio.
Se stai notando che il tuo design sembra un po 'vistoso, c'è una buona possibilità che sia perché hai interrotto la chiusura
Accentsconagua