Mi è stato chiesto di creare linee guida per rivedere CSS, JS e HTML. So che ci sono linee guida per la codifica di JS, ma non ne so nulla su HTML e CSS. Per rivedere JS, seguirò certamente queste linee guida e le menzionerò. Ma che dire di CSS e HTML? Oltre agli errori logici e ai problemi di indentazione, ci sono delle cose specifiche che devo controllare quando rileggo markup e / o CSS?
Alcune cose da cercare:
H1 - H6 per le intestazioni, UL / OL e LI per le liste, ecc? <b> , <i> , <center> , <font> )? img-caption ), e non alla forma ( bold-red ) o al contenuto ( pink-elephant )? Uno degli elementi importanti di uno stile buono in HTML è miglioramento progressivo . Ciò significa che il layout HTML sarà valido anche senza CSS o JavaScript. Quindi, una volta elaborati JS / CSS, apparirà migliore (ad esempio, il vecchio elenco HTML <select> verrà animato).
Questo ha anche a che fare con il markup non intrusivo. Invece di <font style="color:red;font-size:16pt">Hello</font> si usa <div class="red-colored-big-fond">Hello</div> .
Lo stesso con JavaScript. Invece di <button onclick="javascript:alert('a');">Clickme</button> si dovrebbe specificare una classe / ID pulsante e indirizzarla da JavaScript. Rende anche più semplice il mantenimento del codice di markup.
Convalidare che viene utilizzata la minor quantità di markup per eseguire l'attività. Assicurati che il markup sia anche semantico, non usare quando un tag fa la stessa identica cosa e dà più informazioni. Convalida che gli span non vengono creati come elementi di blocco e viceversa.
Inoltre, alex mostra un grande punto in maniera indiretta. Assicurati che nessuno usi nomi di classe come "caratteri di colore rosso", perché circa 20 secondi dopo che è stato distribuito per davvero qualcuno lo cambierà in un piccolo carattere blu. Ho visto questo CSS:
.arial12pt { font-family: Verdana; font-size: 8pt; }
Tutto nel tuo markup dovrebbe descrivere cos'è la pagina, non come appare. Sono assolutamente d'accordo sul miglioramento progressivo, ma di nuovo in modo indiretto. La pagina non ha requisiti per guardare ovunque vicino allo stesso con i CSS come senza di esso. Non cercare di renderli uguali, perché tornerai indietro in table-land e spacer.gif.
Per quanto riguarda l'HTML, cerco sempre di avere gerarchie e rientranze nei miei file. Ad esempio, se ho un sacco di div:
<div id="content">
<div id="post">
<div class="title">
Blah Blah Title
</div>
</div>
</div>
Suppongo che sia abbastanza ovvio per la maggior parte di chi crea layout e modelli, ma molto spesso vedo solo HTML ingarbugliato che non ha gerarchia strutturale, rendendo difficile la lettura per un'altra persona. Immagino che provenga da uno sfondo più CS, questo è qualcosa che mi rimane nella mente. Lo stesso vale per i CSS. Diciamo che stai progettando un div:
#whatever{
background-image: url('blah.gif');
color: #FFF000;
}
La rientranza rende molto più facile leggere velocemente quando sei abituato a un'altra lingua mista come PHP / Ruby / Whatever. Di nuovo, dipende da come lavori meglio, ma quando gli altri leggono il mio HTML, mi piace renderlo davvero organizzato:).
Inoltre, come detto sopra, è sempre una buona idea dare un nome alle tue classi CSS e id al tuo layout, specialmente quando diventa peloso (proprio come le variabili e i metodi di denominazione in altre lingue). Qualcos'altro da tenere d'occhio è la temuta "congettura e controllo" dei margini, dei paddings e di altri problemi di allineamento. Qualcosa che cerco spesso di evitare è mettere numeri negativi nei margini e nei paddings. Può creare confusione se non hai creato il layout da solo e se vuoi tornare in seguito e modificarlo, potresti doverlo revisionare. Secondo me è sempre una buona idea non provare nulla di hokey o "kludgy" nei CSS, anche se sembra carino; di solito c'è un modo migliore per farlo, anche se devi ristrutturare il tuo CSS!
Per Javascript vorrei sempre che si convalidasse con JSLint, posso pensare a così tanti bug che JSLint capta che non usarlo è semplicemente pazzesco.
Mi sono imbattuto in questo documento standard che mi è piaciuto. Farò anche eco a ciò che è stato detto sul miglioramento progressivo. In generale, se qualcun altro scrive HTML / CSS, dovresti essere in grado di guardarlo più tardi e di essere piacevolmente sorpreso di quanto non sia male il markup e dovrebbe essere in grado di apportare semplici modifiche di stile in modo semplice ed efficiente.
Leggi altre domande sui tag html code-reviews javascript css