Respectați cele mai bune practici CSS: evitați stilurile CSS Inline

Foi de stil în cascadă a devenit modalitatea standard de stilizare și aspectare a site-urilor web. Utilizează designerii foi de stil pentru a spune unui browser cum ar trebui afișat un site web din punct de vedere al aspectului, care acoperă factori precum culoarea, spațiul, fonturile și multe altele.

Stilurile CSS se desfășoară în două moduri:

  • Inline - în cadrul codificării paginii web în sine, pe bază individuală, element cu element
  • Într-un document CSS independent, la care este legat site-ul web
Exemplu de CSS
CSS.Jeremy Girard

Cele mai bune practici pentru CSS

„Cele mai bune practici” sunt metodele de proiectare și construire a site-urilor web care s-au dovedit a fi cele mai eficiente și care oferă cea mai mare rentabilitate pentru munca implicată. Urmărindu-i CSS în web design ajută site-urile web să arate și să funcționeze cât mai bine posibil. Au evoluat de-a lungul anilor împreună cu alte limbaje și tehnologii web, iar foaia de stil CSS independentă a devenit metoda preferată de utilizare.

Urmarea celor mai bune practici pentru CSS vă poate îmbunătăți site-ul în mai multe moduri:

instagram viewer
  • Separa conținutul de design: Unul dintre principalele obiective ale CSS este de a elimina elementele de design din HTML și de a le plasa într-o altă locație pe care designerul să le întrețină. Această practică servește, de asemenea, pentru a separa proiectanții de dezvoltatori, astfel încât fiecare să se poată concentra pe domeniile sale de expertiză. Un designer nu trebuie să fie dezvoltator pentru a menține aspectul unui site web.
  • Facilitează întreținerea: Unul dintre cele mai ignorate elemente de design web este întreținerea. Spre deosebire de materialele tipărite, un site web nu este niciodată „unul și făcut”. Conținutul, designul și funcția pot și ar trebui să evolueze în timp. Având CSS într-un loc central, mai degrabă decât presărat pe tot site-ul, face lucrurile mult mai ușor de întreținut.
  • Vă menține site-ul accesibil: Folosirea stilurilor CSS ajută motoarele de căutare și persoanele cu dizabilități să interacționeze cu site-ul dvs.
  • Menține site-ul actual mai mult timp: Prin utilizarea celor mai bune practici cu CSS, respectați standardele care s-au dovedit stabile, dar suficient de flexibile pentru a se potrivi schimbărilor din mediul de proiectare web.

Stilele în linie nu sunt cele mai bune practici

Stilurile în linie, deși au un scop, nu sunt în general cel mai bun mod de a vă întreține site-ul web. Merg împotriva tuturor celor mai bune practici:

  • Stilurile în linie nu separă conținutul de design: Stilurile în linie sunt exact aceleași cu fonturile încorporate și alte etichete de design ciudate, pe care dezvoltatorii moderni le împotrivesc. Stilele afectează numai elementele particulare, individuale la care sunt aplicate; în timp ce această abordare ar putea să vă ofere un control mai granular, aceasta face și alte aspecte ale proiectării și dezvoltării - cum ar fi consistența - mai dificile.
  • Stilurile în linie provoacă dureri de cap de întreținere: Când lucrați cu foi de stil, să aflați unde este setat un stil poate fi dificil. Când ai de-a face cu un amestec de stiluri inline, încorporate și externe, aveți multe locații de verificat. Dacă lucrați într-o echipă de design web sau trebuie să reproiectați sau să întrețineți un site construit de altcineva, atunci veți avea și mai multe probleme. După ce găsiți stilul și îl schimbați, va trebui să faceți acest lucru pe fiecare element de pe fiecare pagină în care a fost plasat. Acest lucru mărește astronomic bugetele de timp și de muncă.
  • Stilurile în linie nu sunt la fel de accesibile: În timp ce un cititor de ecran modern sau un alt dispozitiv de asistență poate gestiona atribute inline și etichetează în mod eficient, unele dispozitive mai vechi nu pot, ceea ce poate duce la o afișare ciudată a web-ului pagini. Caracterele și textul suplimentare pot afecta modul în care pagina dvs. este vizualizată de un robot de motor de căutare, astfel încât pagina dvs. nu funcționează la fel de bine în ceea ce privește optimizarea motorului de căutare.
  • Stilurile în linie măresc paginile dvs.: Dacă doriți ca fiecare paragraf de pe site-ul dvs. să apară într-un anumit fel, îl puteți face o dată cu șase rânduri de cod într-o foaie de stil externă. Cu toate acestea, dacă o faceți cu stiluri în linie, trebuie să adăugați aceste stiluri la fiecare paragraf al site-ului dvs. Dacă aveți cinci linii de CSS, acestea sunt cinci rânduri înmulțite cu fiecare paragraf de pe site-ul dvs. Lățimea de bandă și timpul de încărcare se pot adăuga în grabă.

Alternativa la stilurile în linie sunt foi de stil externe

În loc să utilizați stiluri în linie, utilizați foi de stil externe. Acestea vă oferă toate avantajele celor mai bune practici CSS și sunt ușor de utilizat. Folosite în acest mod, toate stilurile utilizate pe site-ul dvs. aparțin într-un document separat, care este apoi legat de un document web cu o singură linie de cod. Foi de stil externe afectează orice document la care sunt atașate. Dacă aveți un site web de 20 de pagini în care fiecare pagină folosește aceeași foaie de stil - care este de obicei modul în care este gata - puteți efectua o modificare a fiecăreia dintre aceste pagini pur și simplu editând acele stiluri o dată, într-una loc. Schimbarea stilurilor într-un singur loc este mai convenabilă decât căutarea codificării respective pe fiecare pagină a site-ului dvs. web. Această flexibilitate facilitează mult gestionarea site-ului pe termen lung.

instagram story viewer