Care este stilul dvs. CSS? - manechine

Unul dintre aspectele cele mai confuze de lucru cu CSS (Cascading Style Sheets) este că puteți scrie stiluri în multe feluri. Similar cu scrierea de proză, doar pentru că înțelegeți regulile de bază ale gramaticii și ortografiei nu înseamnă că ați învățat să scrieți proză concisă.

Designerii CSS cu experiență petrec timp considerabil, făcând CSS clar, clar și ușor de editat și actualizat. Dar cei care sunt noi în CSS sunt predispuși să scrie mai multe stiluri decât sunt necesare și să creeze stiluri redundante.

Nu numai că codul redundant durează mai mult pentru a fi descărcat într-un browser web, este mult mai greu de editat sau revizuit mai târziu. Și, cu cât codul este mai redundant, cu atât este mai probabil să fugi în conflicte de stil.

Iată cinci sfaturi pentru scrierea unor stiluri curate și eficiente:

• Nu creați niciodată două stiluri atunci când este suficient. De exemplu, puteți crea un stil utilizând selectorul de taguri pentru toate etichetele

  care modifică familia de fonturi a titlurilor dvs. și apoi creați un al doilea stil folosind un selector de clasă pe care îl puteți aplica în titlurile dvs. pentru a schimba culoare.

  Dar ar fi mai eficient să definiți atât culoarea, cât și familia de fonturi în același stil. Rețineți că puteți întotdeauna să vă întoarceți și să modificați un stil pentru a adăuga o altă regulă dacă doriți să modificați formatarea stilului.

• Abrevierea codurilor de culoare hexazecimale. Puteți defini culorile în CSS prin includerea întregului cod de culoare hexazecimal. Cu toate acestea, atunci când utilizați coduri de culoare care sunt repetitive, trebuie să includeți numai primele trei caractere. De exemplu, #ffffff este același ca #fff; ambele vor crea culoarea albă.

• Utilizați foi de stil externe. Puteți defini stiluri într-o foaie de stil internă în partea de sus a fiecărei pagini Web sau puteți salva stilurile într-un fișier extern cu. css și atașați această foaie de stil la toate paginile dvs. web. Formatele de stil externe sunt în mod inerent mai eficiente deoarece vă permit să utilizați același stil pe oricare sau pe toate paginile site-ului dvs.

  De exemplu, dacă definiți un stil care face ca toate titlurile principale bold, albastru și mare, salvând acel stil într-o foaie de stil externă, puteți să utilizați același stil pentru fiecare titlu. Apoi, dacă decideți mai târziu că doriți să vă schimbați titlurile în verde, puteți schimba stilul într-o foaie de stil externă și puteți schimba toate titlurile simultan.

  Dacă ați salvat stilurile într-o foaie de stil internă, va trebui să editați stilul titlului în fiecare fișier.

• Dezvoltați o convenție de numire pentru stilurile dvs. Deși poți numi stiluri create cu selectorul de clasă sau ID, orice ar fi preferat, este mai bine să alegi stiluri care au înțeles în afară de formatare.De exemplu, dacă creați un stil numit. redHeadlines și apoi decideți mai târziu că doriți toate dvs.. RedHeadlines pentru a fi albastru, fie că veți sfârși cu un stil albastru al titlului numit. redHeadlines sau va trebui să redenumiți stilul.

  Și redenumirea stilului include revenirea și reaplicarea acelui stil oriunde aveți un titlu roșu pe care doriți să-l transformați în albastru, care anulează puterea stilurilor pentru a face actualizări globale. Pentru a evita această problemă, creați nume de stil care se referă la poziția sau importanța elementelor, cum ar fi. mainHeadlines sau. sidebarHeadlines.

• * Testați și validați codul. Chiar și designerii CSS experimentați fac greșeli, motiv pentru care Dreamweaver include atât de multe instrumente excelente pentru testarea și validarea codului în paginile dvs. Web. Asigurați-vă că vă testați CSS-ul pentru greșelile obișnuite.

  Următoarele sunt două servicii de testare online pe care le puteți utiliza pentru a verifica erorile din codul dvs. CSS. Introduceți pur și simplu adresa URL a oricărei pagini web pe Internet în câmpul de adresă din oricare dintre aceste site-uri și faceți clic pe butonul Trimite pentru a primi un raport care prezintă erori în codul dvs.:

  • Serviciul de validare W3C CSS

  • XHTML-CSS : Fiți valabili sau învățați morți