Buletin informativ Smashing

În fiecare săptămână, trimitem tehnici utile front-end și UX. Abonați-vă și obțineți Liste de verificare pentru designul interfeței inteligente PDF livrat în căsuța de e-mail.

pentru

HTML frumos și curat este fundamentul unui site frumos. Când îi învăț pe oameni despre CSS, încep întotdeauna prin a le spune că CSS bun poate exista doar cu un markup HTML la fel de bun. O casă este la fel de puternică ca fundația ei, nu? Avantajele HTML semantice curate sunt multe, totuși atât de multe site-uri web suferă de markup slab scris.

Să aruncăm o privire la un HTML slab scris, să discutăm problemele acestuia și apoi să-l transformăm în formă! Rețineți că nu adoptăm nicio judecată asupra conținutului sau designului acestei pagini, ci doar asupra marcajului care o construiește. Dacă sunteți interesat, aruncați o privire asupra codului rău și a codului bun înainte de a începe, astfel încât să puteți vedea imaginea de ansamblu. Acum să începem chiar în partea de sus.

Lecturi suplimentare pe SmashingMag:

1. DOCTIP tip strict

Dacă vom face acest lucru, să o facem bine. Nu este nevoie de o discuție cu privire la utilizarea HTML 4.01 sau XHTML 1.0: ambele oferă o versiune strictă care ne va menține drăguți și cinstiți în timp ce scriem codul nostru.

Codul nostru nu folosește oricum tabele pentru aspect (oricum!), Deci nu este nevoie de un DOCTYPE de tranziție.

Resurse:

2. Set de caractere și caractere de codificare

În secțiunea noastră, primul lucru ar trebui să fie declarația setului nostru de caractere. Folosim aici UTF-8, care este umflat, dar este listat după al nostru. Să mergem mai departe și să-l mutăm în sus, astfel încât browserul să știe cu ce set de caractere se ocupă înainte de a începe să citească orice conținut.

În timp ce vorbim despre personaje, să mergem mai departe și să ne asigurăm că toate personajele amuzante pe care le folosim sunt codificate corect. În titlul nostru avem un șir. Pentru a evita orice posibilă interpretare greșită a acestuia, îl vom converti în & în schimb.

Resurse:

3. Indentare adecvată

Bine, suntem în jur de trei rânduri și sunt deja enervat de lipsa de indentare. Indentarea nu are nicio influență asupra modului în care pagina este redată, dar are un efect imens asupra lizibilității codului. Procedura standard este de a indenta o filă (sau câteva spații) atunci când începeți un element nou care este un element secundar al etichetei de deasupra acestuia. Apoi deplasați-vă înapoi într-o filă când închideți acel element.

Regulile de indentare sunt departe de a fi stabilite în piatră; nu ezitați să vă inventați propriul sistem. Dar vă recomand să fiți în concordanță cu orice alegeți. Marcajul frumos indentat ajută la înfrumusețarea codului și la ușurarea citirii și a accesului.

Resurse:

4. Păstrați CSS și JavaScript extern

Avem câteva CSS care s-au strecurat în secțiunea noastră. Acesta este un fault grav, deoarece nu numai că ne încurcă marcajul, dar se poate aplica numai acestei singure pagini HTML. Păstrarea fișierelor CSS separate înseamnă că paginile viitoare se pot conecta la ele și pot utiliza același cod, astfel încât schimbarea designului pe mai multe pagini devine ușoară.

Este posibil ca acest lucru să se fi întâmplat la un moment dat ca o „soluție rapidă”, ceea ce este de înțeles și se întâmplă tuturor, dar să o mutăm într-un loc mai potrivit într-un fișier extern. Nu există JavaScript în secțiunea noastră principală, dar același lucru este valabil și pentru asta.

5. Cuibărește corect etichetele tale

Titlul site-ului nostru, „Site-ul meu pentru pisici”, este corect în interior

6. Eliminați divs-urile inutile

Nu știu cine a inventat-o ​​prima dată, dar ador termenul „divitis”, care se referă la utilizarea excesivă a div-urilor în marcarea HTML. Uneori, în timpul etapelor de învățare ale proiectării web, oamenii învață cum să împacheteze elemente într-o div, astfel încât să le poată viza cu CSS și să aplice stilul. Acest lucru duce la o proliferare a elementului div și la utilizarea lor mult prea liberală în locuri inutile.

În exemplul nostru, avem un div („topNav”) care înfășoară o listă neordonată („bigBarNavigation”). Atât divs, cât și listele neordonate sunt elemente la nivel de bloc. Nu este cu adevărat nevoie de niciun fel de

    a fi înfășurat într-o div; orice poți face cu divul acela poți face cu
      .

    Resurse:

    7. Folosiți convenții de denumire mai bune

    Acesta este un moment bun pentru a aduce în discuție convențiile de numire, deoarece tocmai am vorbit despre acea listă neordonată cu un id de „bigBarNavigation”. Partea „Navigare” are sens, deoarece descrie conținutul pe care îl conține lista, dar „mare” și „Bară” descriu designul, nu conținutul. Ar putea avea sens chiar acum, deoarece meniul este o bară mare, dar dacă schimbați designul site-ului web (și, să zicem, modificați navigarea site-ului într-un stil vertical), acel nume de identificare va fi confuz și irelevant.

    Numele bune de clasă și id sunt lucruri precum „mainNav”, „subNav”, „bara laterală”, „subsol”, „metaDate”, lucruri care descriu conținutul pe care îl conțin. Denumirile de clasă și de identificare necorespunzătoare sunt lucruri care descriu designul, cum ar fi „bigBoldHeader”, „leftSidebar” și „roundedBox”.

    8. Lăsați tipografia CSS

    Designul meniului nostru necesită text cu majuscule. Noi doar săpăm cum arată asta și mai multă putere pentru noi. Am realizat acest lucru punând textul în majuscule, care desigur funcționează; dar pentru o mai bună extensibilitate viitoare, ar trebui să abstractizăm opțiunile tipografice ca aceasta în CSS. Putem viza cu ușurință acest text și îl putem transforma în majuscule cu. Acest lucru înseamnă că, pe drum, dacă aspectul cu majuscule își pierde farmecul, putem face o mică schimbare în CSS pentru a-l schimba în text cu litere mici.

    9. Clasa/id

    Prin „clasifica corpul”, vreau să spun literal aplică o clasă corpului, cum ar fi. De ce? Pot vedea două lucruri care se întâmplă în acest cod care mă fac să cred că această pagină are un aspect diferit de celelalte pagini de pe site. În primul rând, div conținutul principal este „mainContent-500”. Se pare că cineva a avut un „mainContent” div la un moment dat și apoi a trebuit să-și modifice dimensiunea ulterior și, pentru a face acest lucru, a creat un ID nou. Bănuiesc că a fost să-l mărească, deoarece mai departe în cod vedem aplicat pe bara laterală și putem deduce că a fost adăugat pentru a reduce bara laterală de la dimensiunea sa normală.

    Aceasta nu este o soluție foarte bună pe termen lung pentru aspectele alternative. În schimb, ar trebui să aplicăm un nume de clasă corpului așa cum este sugerat mai sus. Acest lucru ne va permite să vizăm atât divs-urile „mainContent”, cât și „sidebar” fără a fi nevoie de nume noi fanteziste sau de adăugări de clase.

    A avea nume unice de clasă și identificare pentru corp este foarte puternic și are multe mai multe utilizări decât doar pentru aspectele alternative. Deoarece fiecare conținut de pagină se află în eticheta „corp”, puteți viza în mod unic orice pe orice pagină cu acel cârlig; deosebit de util pentru lucruri precum navigarea și indicarea navigare curentă, deoarece veți ști exact pe ce pagină vă aflați cu acea clasă de corp unică.

    Resurse:

    10. Validați

    Este de la sine înțeles, dar ar trebui să rulați codul prin mașina de validare a ol ’pentru a înregistra mici greșeli. Uneori greșelile nu vor avea nicio influență asupra modului în care pagina este redată, dar unele greșeli vor avea cu siguranță. Codul validat va supraviețui cu siguranță codului nevalidat.

    Dacă nu din alt motiv, văzând textul verde de pe instrumentul de validare W3C te face să te simți bine în interior.

    Resurse:

    11. Ordonare logică

    Dacă este posibil, păstrarea secțiunilor site-ului dvs. într-o ordine logică este cea mai bună. Observați cum secțiunea de subsol se află deasupra barei laterale din codul nostru. Acest lucru se poate datora faptului că funcționează cel mai bine pentru proiectarea site-ului web pentru a păstra aceste informații imediat după conținutul principal și în afara barei laterale. Înțeles, dar dacă există vreo modalitate de a reduce marcajul subsolului pentru a fi ultimul lucru de pe pagină și apoi utilizați un fel de aspect sau tehnică de poziționare pentru a-l pune vizual acolo unde aveți nevoie, este mai bine.

    12. Fă doar ce poți

    Am acoperit multe aici și acesta este un început minunat pentru a scrie HTML curat, dar există multe altele. Când începeți de la zero, toate acestea par mult mai ușoare. Când încercați să remediați codul existent, se simte mult mai dificil. Puteți să vă lăsați împotmolit într-un CMS care vă impune o marcare proastă. Sau, ar putea exista atât de multe pagini pe site-ul dvs. încât este greu să vă gândiți chiar și de unde să începeți. Asta e ok! Important este că tu învăța cum se scrie HTML bun și că tu rămâneți cu el.

    Data viitoare când scrieți HTML, fie că este o mică parte dintr-un site imens sau începutul unui nou proiect nou, fă doar ce poți pentru a o corecta.