Top 10 cele mai bune practici de dezvoltare web

Explică ce div închizi

De cele mai multe ori când vizualizez sursa unui site web, văd, chiar în partea de jos a paginii, o listă aproape nesfârșită de tag-uri de închidere </div>. De fapt, mulți începători cred că trebuie doar să folosească div-uri în loc de tabele pentru a produce cod de calitate. Div-urile sunt mai curate decât tabelele, dar fără o organizare adecvată a codului, acesta poate fi la fel de dezordonat (sau chiar mai dezordonat uneori) ca și codul bazat pe tabele.

Utilizarea indentării este un bun început. Dar un sfat care cu siguranță vă poate face să economisiți mult timp este să comentați fiecare tag div pe care îl închideți, așa cum se arată în exemplul de mai jos:

<div> <div class="first left"> ... </div><!-- #sub.first.left --></div><!-- #header -->

Utilizați o resetare CSS

Dacă nu sunteți începător sau dacă ați fost în vacanță pe o insulă pustie în ultimii 6 ani, probabil că știți deja cât de utilă este o resetare CSS. Deoarece, în mod implicit, browserele nu aplică aceeași stilizare implicită elementelor HTML, o resetare CSS se va asigura că toate elementele nu au un stil anume, astfel încât să vă puteți defini propriul stil fără riscul apariției multor probleme de redare între browsere.

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;}body {line-height: 1;}ol, ul {list-style: none;}blockquote, q {quotes: none;}blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}/* remember to define focus styles! */:focus {outline: 0;}/* remember to highlight inserts somehow! */ins {text-decoration: none;}del {text-decoration: line-through;}/* tables still need 'cellspacing="0"' in the markup */table {border-collapse: collapse;border-spacing: 0;}

Sursa:

Nu folosiți @import

Arhivele CSS pot fi incluse folosind directiva @import. Acest lucru poate fi util atunci când, de exemplu, doriți să includeți o foaie de stil în alta. O altă practică obișnuită este de a include fișierul CSS în documentele html folosind următoarele:

<style type="text/css> @import url('a.css'); @import url('b.css');</style>

Deși funcționează, directiva @import este mult mai lentă decât cealaltă modalitate de a include foi de stil într-un document html:

<link rel='stylesheet' type='text/css' href='a.css'><link rel='stylesheet' type='text/css' href='proxy.css'>

Nu va face o diferență pe site-urile cu trafic redus, dar dacă aveți șansa de a deține un site popular, nu irosiți timpul vizitatorilor dvs. folosind @import.
Sursa: http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

„Smush” imaginile tale

Fiind un dezvoltator, am constatat întotdeauna că optimizarea imaginilor mele pentru web nu a fost ușoară. Am încercat vechea și buna comandă „Save for web” din Photoshop, dar, de cele mai multe ori, mă alegeam cu imagini fie prea mari, fie fără o calitate suficientă.
Ca urmare, am avut prostul obicei de a folosi imagini neoptimizate pe site-urile mele. Aceasta nu este o problemă atunci când nu trebuie să-ți pese de lățimea de bandă a site-ului tău, dar după ce am trecut recent pe serverul meu privat virtual, a trebuit să fiu atent cu dimensiunile imaginilor.

În acest moment, am găsit un instrument foarte tare numit Smush It: Introduci url-ul imaginii tale neoptimizate, iar Smush It va crea o imagine perfect optimizată pentru tine. Puteți economisi până la 70% din dimensiunea fișierului, păstrând în același timp calitatea originală. Ca exemplu, toate imaginile din lista mea de editori de coduri online au fost „smushate”.

Nu amestecați CSS cu HTML

Ca limbaj de marcare, utilizarea corectă a HTML este aceea de a organiza documentele prin definirea unui antet, a unui subsol, a unor liste, blockquote, etc. Cu ceva timp în urmă, dezvoltatorii web front-end foloseau adesea atribute HTML, acum demodate, pentru a stiliza un anumit element.
În prezent, atributul style permite dezvoltatorilor să insereze CSS direct într-un document html. Acest lucru este foarte util pentru testare sau atunci când vă grăbiți. Dar atributul style este o practică proastă, care contravine complet filozofiei CSS.

Exemplul următor ilustrează cât de murdar și greu de citit poate deveni o simplă linie de cod, cu atributul style:

<a href="https://catswhocode.com" style="background:#069;padding:3px;font-weight:bold;color:#fff;">Cats Who Code</a>

Nu amestecați Javascript cu HTML

La fel cum amestecarea codului html cu css este o practică proastă, nu ar trebui să folosiți nici Javascript în documentele html. Următoarea practică proastă ilustrează un eveniment onclick:

<a href="https://catswhocode.com" onclick="alert('I love this site!');">Cats Who Code</a>

Același rezultat poate fi obținut folosind Javascript neobstrucționat. În acest exemplu, folosesc popularul framework jQuery:

$(document).ready(function() { $('#cwc').click(function() { alert('I love this website'); });});

Acesta poate părea un pic mai greu la început, mai ales pentru începători; dar cu siguranță nu este, și vă va păstra documentul html curat.

Știți, IE este nașpa, iar unii clienți sunt și mai nașpa prin faptul că vă cer să creați pagini web compatibile cu acest browser învechit. Pentru a viza anumite versiuni specifice de IE, puteți folosi binecunoscutele hack-uri IE, așa cum se arată mai jos:

height: 200px; /* normal browsers */_height: 300px; /* IE6 */.height: 250px; /* IE7 */*height: 350px; /* All IEs */

Aceste hack-uri sunt extrem de utile uneori, dar nu sunt cea mai bună modalitate de a viza o anumită versiune de IE, iar aceasta va face ca validarea CSS să eșueze.

În schimb, ar trebui să folosiți comentariul condițional arătat mai jos pentru a ținti IE6.

<link href="style.css" rel="stylesheet" type="text/css" /><!--> <link href="ie.css" rel="stylesheet" type="text/css" /><!-->

Placeți fișierul Javascript în partea de jos

O practică populară de la sfârșitul anilor ’90/începutul anilor 2000 a fost de a plasa fișierele Javascript în cadrul tag-urilor <head> și </head>. Problema este că fișierele Javascript vor fi încărcate primele și, în consecință, conținutul dvs. va fi încărcat după.

Prin plasarea fișierelor Javascript în partea de jos a documentelor dvs. vă veți asigura că fișierele JS vor fi încărcate numai după ce conținutul a fost afișat corespunzător.

 ... <script type='text/javascript' src='jquery.js?ver=1.3.2'></script> </body></html>

Utilizați HTML semantic

HTML nu este un limbaj de programare. Este un limbaj de marcare, folosit pentru a crea documente structurate prin denotarea unei semantici structurale pentru text, cum ar fi titlurile, paragrafele, listele și altele.
Dacă ați început să creați site-uri web în bunii ani ’90 sau la începutul secolului, știți cât de murdară era marcarea la vremea respectivă. Dar, din fericire, a evoluat.
Printre altele, este important să folosiți elementul html în mod semantic. De exemplu, un meniu de navigare ar trebui să fie întotdeauna o listă neordonată:

<ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Blog</a></li></ul>

Testați ÎN TIMP ce construiți pentru a evita problemele cross-browser

Una dintre cele mai mari greșeli pe care le-am făcut vreodată când am dezvoltat html, CSS și javascript, a fost să nu-mi testez paginile pe mai multe browsere în timp ce le scriam. În schimb, obișnuiam să-mi scriu tot codul și doar să vizualizez în Firefox pentru a vedea cum este redat.
În teorie, acest lucru ar trebui să fie bun. Dar, după cum știți, problemele cross-browser sunt o problemă majoră pentru dezvoltatorii front-end, în special din cauza IE. Dacă vă testați documentele pe Firefox/IE/Chrome în timp ce le scrieți, problemele de redare cross-browser vor fi mult mai ușor de rezolvat. Am pierdut ore întregi dacă nu am făcut acest lucru, așa că sper că acest ultim sfat vă va ajuta să vă economisiți timpul prețios. Codare fericită 😉

.

Lasă un răspuns

Adresa ta de email nu va fi publicată.