Linee guida per la revisione del codice per CSS, JS e HTML


9

Mi è stato chiesto di creare linee guida per la revisione di CSS, JS e HTML. So che ci sono linee guida per la codifica di JS ma non ne so nulla di HTML e CSS. Per rivedere JS seguirò sicuramente queste linee guida e le menzionerò. Ma che dire di CSS e HTML? A parte errori logici e problemi di rientro, ci sono delle cose specifiche che devo controllare quando rivedo il markup e o CSS?


1
questo era solo su HN oggi, potrebbe essere un buon punto di partenza. taitems.github.com/Front-End-Development-Guidelines
agradl

Risposte:


5

Alcune cose da cercare:

  • Le informazioni strutturate vengono identificate utilizzando i tag HTML appropriati? H1- H6per titoli, UL/ OLe LIper elenchi, ecc.?
  • Sono presenti tag HTML legacy ( <b>, <i>, <center>, <font>) utilizzati?
  • Il sito utilizza il minor numero possibile di markup?
  • Le informazioni di stile sono esternalizzate ai file CSS?
  • Tutto Javascript è esternalizzato? compresi i gestori di eventi?
  • I nomi delle classi CSS si riferiscono alla funzione nella pagina ( img-caption) e non a form ( bold-red) o content ( pink-elephant)?
  • Le immagini sono nel formato appropriato (PNG o JPEG, a seconda del tipo)?
  • Sono state utilizzate versioni minimizzate delle librerie Javascript?
  • Opzionalmente, tutti i file JavaScript e CSS sviluppati localmente sono stati ridotti al minimo?
  • L'HTML / CSS convalida?
  • YSlow (o simile) è stato usato per controllare / ottimizzare le prestazioni?
  • (principalmente) [SEO] Il sito è accessibile con Javascript disattivato?
  • [SEO] Il contenuto più pertinente si trova nella parte superiore dell'HTML?

Ho appena trovato il libro di Steve Saunders su siti Web più veloci. È abbastanza utile e alcuni punti citati da te sono buoni.
Kumar,

0

Uno degli elementi importanti di un buon stile in HTML è il miglioramento progressivo . Ciò significa che il layout HTML verrà reso buono anche senza CSS o JavaScript. Quindi, una volta elaborato JS / CSS, avrà un aspetto migliore (ad esempio, il <select>menu a discesa HTML vecchio stile verrà animato).

Ciò ha anche a che fare con il markup non intrusivo. Invece di <font style="color:red;font-size:16pt">Hello</font>uno avrebbe usato <div class="red-colored-big-fond">Hello</div>.

Lo stesso con JavaScript. Invece di <button onclick="javascript:alert('a');">Clickme</button>uno, specificare una classe / ID pulsante e indirizzarlo da JavaScript. Inoltre semplifica la manutenzione del codice di markup.


0

Convalida che viene utilizzata la quantità minima di markup per eseguire l'attività. Assicurati che anche il markup sia semantico, non utilizzarlo quando un tag fa la stessa cosa esatta e fornisce maggiori informazioni. Convalida che gli span non vengano creati elementi a blocchi e viceversa.

Inoltre, alex evidenzia un ottimo punto in modo rotatorio. Assicurati che nessuno usi nomi di classe come "carattere di colore rosso", perché circa 20 secondi dopo che è stato distribuito per davvero qualcuno lo cambierà in un piccolo carattere blu. In realtà ho visto questo CSS:

.arial12pt { font-family: Verdana; font-size: 8pt; }

Tutto nel markup dovrebbe descrivere ciò che è la pagina, non come appare. Sono assolutamente d'accordo sul miglioramento progressivo, ma di nuovo in modo circolare. La pagina non ha requisiti per guardare da nessuna parte vicino allo stesso con CSS come senza di essa. Non cercare di farli sembrare uguali, perché finirai indietro in table-land e spacer.gif.


0

Per quanto riguarda l'HTML, desidero sempre avere gerarchie e rientri 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 coloro che creano layout e modelli, ma il più delle volte vedo solo HTML confuso che non ha alcuna gerarchia strutturale, rendendo difficile la lettura per un'altra persona. Immagino che provenga da un background più CS, questo è qualcosa che mi viene in mente. Lo stesso vale anche per i CSS. Diciamo che stai disegnando un div:

#whatever{
    background-image: url('blah.gif');
    color: #FFF000;
}

Il rientro rende molto più facile la lettura rapida quando sei abituato ad un'altra lingua mista come PHP / Ruby / Qualunque cosa. Ancora una volta, 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 nominare le tue classi CSS e id nomi rilevanti per il tuo layout, specialmente quando diventa peloso (molto simile alla denominazione di variabili e metodi in altre lingue). Qualcos'altro a cui prestare attenzione è il temuto "indovinare e controllare" di margini, imbottiture e altri problemi di allineamento. Qualcosa che cerco spesso di evitare è mettere numeri negativi nei miei margini e nelle mie imbottiture. Può essere fonte di confusione se non hai creato il layout da solo e se vuoi tornarci più tardi e modificarlo, potresti doverlo revisionare. Secondo me è sempre una buona idea non provare nulla di strano o "kludgy" nei CSS, anche se sembra carino; di solito c'è un modo migliore per farlo, anche se devi ristrutturare il tuo CSS!


0

Per Javascript vorrei sempre che si convalidasse con JSLint, posso pensare a così tanti bug che JSLint rileva che non usarlo è semplicemente pazzo.


0

Mi sono imbattuto in questo documento sugli standard che mi è piuttosto piaciuto. Farò anche eco a ciò che è stato detto sul miglioramento progressivo. In generale, se qualcun altro scrive l'HTML / CSS, dovresti essere in grado di guardarlo più avanti e rimanere piacevolmente sorpreso da quanto sia negativo il markup e dovresti essere in grado di apportare semplici modifiche allo stile in modo semplice ed efficiente.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.