Îndepărtați-vă pentru a impresiona; Verificați site-urile dvs. fără CSS

HTML este în centrul paginii web. Uneori, în căutarea de a face lucrurile să pară frumoase folosind CSS, uităm asta. Dacă ați folosit vreodată Sass (sau un compilator CSS în general), probabil că ați văzut pauzele stilurilor site-ului dvs. din cauza unei erori de compilare. Dar înainte de a vă grăbi să remediați eroarea pe care tocmai ați introdus-o, luați-o ca pe o oportunitate de a analiza și de a îmbunătăți nucleul site-ului dvs.: codul HTML.

"Eșecul este pur și simplu ocazia de a începe din nou, de data aceasta mai inteligent" - Henry Ford

În mod normal nu sunt unul pentru clișeele motivaționale. Cu toate acestea, transformarea eșecului într-o oportunitate de succes poate fi adevărată atunci când lucrați cu Sass (sau orice compilator CSS). Urcați cu mine și vă voi explica.

Să începem cu o eroare

Dacă ați scris CSS utilizând Sass, ați văzut fără îndoială o eroare de compilare. În linia de comandă, arată cam așa:

Eroare de sintaxă: CSS nevalid după ".module": așteptat "", was ""

Uneori este posibil să nu vă prindeți această eroare în linia de comandă. Cu toate acestea, veți evita, fără îndoială, eroarea atunci când comutați la browser, deoarece totul pare a fi rupt!

Prima ta reacție ar fi să comutați instantaneu înapoi la editorul dvs. de text, să remediați eroarea de sintaxă pe care tocmai ați introdus-o și să urmăriți totul înapoi la normal. Dar țineți o secundă! Aceasta ar putea fi una dintre momentele "transforma eșecul într-o oportunitate".

Sass de rupere poate fi o mare oportunitate pentru a vedea site-ul dvs. în nud, complet dezbrăcat. Nici un stil, doar pur, HTML neatinse, esența web-ului la baza lui. Vedeți, atunci când browserul face o cerere, acesta primește în general un singur .html fișier iptertext pur - și asta este. Toate celelalte (adică CSS și Javascript) reprezintă o îmbunătățire. După cum afirmă Jeremy Keith,  

"Fiecare linie de CSS pe care o scrieți este o sugestie. Nu dictați modul în care HTML ar trebui să fie redat; vă sugerăm modul în care HTML ar trebui să fie redat. Consider că aceasta este o idee foarte eliberatoare și împuternicită. " 

Regulile de stil CSS sunt unele dintre primele îmbunătățiri pe care le aplicați unui document HTML și acționează ca sugestii, nu comenzi, pentru modul în care ar trebui să arate pagina. Vaderea acestor pauze de stiluri poate fi o oportunitate de a opri și de a analiza nucleul paginii dvs. Web - HTML-și de a-l îmbunătăți, dacă este necesar. HTML este un format pe termen lung care a fost în jur de ceva timp. Nu numai că primul site web funcționează, ci și în mod eficient! 

Așa cum spunea Ian Yates, 

"Toate site-urile web sunt receptive în mod implicit, până când începem să adăugăm stiluri și să le rupem".

Când vă uitați la codul HTML al paginii dvs., întrebați-vă întrebări precum: 

  1. Structura HTML a site-ului meu are sens, adică este ușor de citit și de înțeles, fără nici un CSS (sau JavaScript)? 
  2. Îmi mărturisesc corect conținutul, adică.
      pentru listele neordonate de elemente, dar a
      atunci când definiți relațiile dintre elemente? 
    • Sunt variante bogate în semantic în text utilizând etichete ca și după caz, mai degrabă decât etichetele generice cum ar fi ?

Am o idee: cum să încerci asta pe propria pagină de internet existentă acum? Accesați site-ul dvs., deschideți instrumentele pentru dezvoltatori, găsiți .css fișierul dvs. utilizează site-ul dvs. și elimină toate regulile de stil.

Bacsis: Alternativ, extensiile, cum ar fi pluginul Web Developer for Chrome, vă vor permite să schimbați cu ușurință stilurile CSS.

Uită-te la asta! Pe site-ul meu am găsit loc de îmbunătățire. Există câteva elemente HTML care nu sunt esențiale fără JavaScript. Ar trebui să le eliminăm astfel încât să nu fie inițial prezente în DOM și să le adăugați ulterior cu JavaScript ca îmbunătățiri. În plus, unele componente ale listei ar putea fi modificate și unificate în semantică. Dar nu e vorba despre mine, să ne întoarcem să vorbim ta website.

Site-ul tau

Navigați în jos pe pagina "goală" și încercați să citiți conținutul. Are sens? Sunt lucrurile care ar trebui să fie pozițiile marcate ca titluri? Sunt lucruri care ar trebui să fie liste de liste? Dacă nu, reevaluați marcajul. HTML este ceea ce constituie site-ul dvs. la nivelul său cel mai de bază. Justin Jackson are un exemplu foarte bun. Odată ce aveți un HTML semantic solid pentru a începe cu dvs. puteți fi siguri că, chiar dacă nimic altceva de pe pagina dvs. nu încarcă decât HTML, utilizatorii pot citi și înțelege încă mesajul dvs. (și motoarele de căutare). 

a11y

Conținutul universal accesibil este un chiriaș de bază al web-ului și este întotdeauna un loc minunat pentru a începe. Vorbind în 2004 despre această abordare accesibilă, semantică a designului web, a spus Jeffery Veen, 

"Eu livrez soluții pentru clienții mei, care sunt mult mai puțin complexe de implementat, sunt mult mai ușor de întreținut, costă exponențial mai puțin pentru a servi, lucrează pe mai multe browsere și dispozitive, fac mult mai bine în loteria motorului de căutare și, bineînțeles, sunt accesibile tuturor ... tuturor ... folosind astăzi Web-ul. Și încercați să argumentați cu valoarea comercială a acestui lucru. Și de aceea nu-mi pasă de accesibilitate. Pentru că atunci când designul web este practicat ca o meserie, și nu o consolare, accesibilitatea vine gratuit. "

Concluzie

Deci, data viitoare când modificați CSS-ul site-ului dvs. cu Sass și faceți o greșeală de compilare, luați-o ca o ocazie pentru a examina conținutul și structura reală a site-ului dvs.: HTML. Ar putea fi unul dintre acele momente în care un eșec se sfârșește prin a se împrumuta unei adevărate oportunități de îmbogățire care altfel ar fi fost ratată.