Prea adesea mari (și mici), site-uri suferă de prea prea mare, și, de fapt, cod CSS redundante, în cazul în care puteți găsi un număr mare de elemente suplimentare, expresie prea mult timp și concretizata, o dependență mare a unor selectori de la alții, utilizarea frecventă și inadecvat! Importante și așa mai departe. Pentru a optimiza stylesheet noastre, cu siguranță, putem folosi unele fundamente de bază ale scrierea de cod CSS. Ceea ce avem cu adevărat nevoie să facem este de a face foi de stil bune structurare, și să depună eforturi pentru a îmbunătăți rezistența la sarcini mari.
Deci, abordarea noastră va fi de a două principii. În primul rând, trebuie să folosim regulile de bază ale scris curat și eficient cod CSS. În al doilea rând, trebuie să folosim diferite metode și abordări pentru organizarea codului de arhitectură bună și retragerea foaie de stilul nostru la nivelul următor.
În această lecție vom acoperi aceste subiecte, dar înainte de asta, să ne uităm la câteva exemple de cod CSS curat.
Câteva metode utile
De multe ori experiența altei persoane poate fi foarte util. Să ne uităm la câteva exemple:
Acces rapid la elementele
Este foarte important să se poată obține acces rapid la orice drept stil de pagină. Puteți utiliza o varietate de instrumente, cum ar fi Explorer Developer Bara de instrumente, Mozilla Firebug sau Chrome Instrumente de dezvoltare. Folosind aceste instrumente, putem găsi rapid ceea ce avem nevoie, și apoi să se schimbe, văzând rezultatul.
Acest fragment este prezent proprietate contur. Este utilizat pentru atribuirea simultană de culoare, stil și grosimea marginilor exterioare pe toate cele patru laturi ale elementului. Apoi am ales cuvântul pentru a defini frontierele de culoare roșie și minte tu, nu la fel ca asta. Pentru a determina culoarea finală utilizați întotdeauna codurile RGB sau HSL, și în timp - cuvinte integrale. Acest lucru vă va ajuta în viitor, pentru a găsi rapid piesele potrivite și de a rezolva problemele litigioase apărute în timpul dezvoltării. Fii atent cu utilizarea proprietăților de contur, ca aceasta nu funcționează în Internet Explorer 8.
Adăugarea de test de stiluri
O altă bună practică este de a adăuga padding la unele de testare sau proprietăți temporale.
Cu această tehnică, puteți determina imediat ce proprietățile timpului, și care nu sunt. Dacă decideți că înregistrarea poate rămâne, pur și simplu eliminați indentare.
Dezactivați stiluri
De multe ori, atunci când scrierea de cod CSS trebuie să dezactivați unele stiluri. Puțini oameni știu, dar acest lucru poate fi atribuită proprietatea prefixul „x-“:
Curățarea și optimizarea codului CSS
Acum, când ne-am întâlnit cu câteva trucuri, hai sa vorbim despre cum poți șterge codul nostru CSS. Aici vom merge de la cea mai mare la cel mai mic. În primul rând, ia în considerare modul cel mai bine pentru a scrie cod HTML, și apoi cum să scrie pentru stilul său eficient.
Macro-optimizare
Înainte de a încerca să optimizeze foi de stil, avem nevoie pentru a scrie un cod HTML si CSS bine poate fi citit.
Formarea informațiilor și definirea structurii foii de stil
În primul rând, vă recomandăm lipirea unele informații despre utilizator (nume, ...), ultima dată când se modifică fișierul. Această tehnică poate juca un rol, în cazul în care, în viitor, vor exista probleme legate de aceste date.
„=“ Sign in ultima expresie este folosit doar pentru a simplifica căutarea pentru o singură secțiune.
Adnotările și cuiburi afișarea
Adnotările și afișarea elementelor de cuibărit ajuta dezvoltator pentru a urmări începutul și sfârșitul unui bloc. Astfel, piesele individuale de cod se află rapid.
Adnotările sunt formate folosind următoarele expresii: sau pur și simplu .
Afișarea elementelor de cuiburi pot parea pas inutil, dar poate simplifica foarte mult lizibilitatea codului, pentru a face elemente vizuale clare, pentru a găsi rapid zonele cu probleme, inclusiv locurile cu care lipsesc etichete de închidere, și așa mai departe.
Diferența dintre cod structurat bine și rău, puteți vedea în exemplele de mai jos.
Micro-optimizare
Micro-optimizare are ca scop reducerea dimensiunii fișierului și de a crește viteza de încărcare a paginii.
proprietăți Sortarea în ordine alfabetică
Proprietăți CSS Sortare în ordine alfabetică - aceasta este o modalitate foarte bună de a păstra codul curat și pentru a evita problemele inutile. De ce? Deoarece pista dorită poate găsi rapid și repara.
Creșterea eficienței codului
selectoare lungi fac browser-ul trece încă o dată prin look-DOM au pentru meciuri. Mai multe selectoare din beton nume evită această problemă.
Scrieți pur și simplu și concis
Este mai mic codul este scris, este mai eficient pagina de lucru. urmați aceste linii directoare pentru a defini stiluri.
- Utilizați numele scurte ale proprietăților CSS ori de câte ori este posibil;
- Scrie valori de proprietate prescurtate;
- Evita suprapunerea proprietăților CSS.
Reducerea codul
Fiți conștienți de aceste reguli, data viitoare când veți scrie codul CSS. Pentru a simplifica munca ta poate utiliza creat special pentru acest instrument. De exemplu: CleanCSS. Utilizați tot ce putem, pentru a face codul mai bine.
un efect redus cu personaje de animație interactive.
Conceptul mic de sfaturi distracție, care sunt puse în aplicare pe SVG și anime.js. În plus față de stilul special în exemplul realizat animația și transformarea obiectelor grafice.
Experiment: animat litere SVG bazate pe anime.js bibliotecă.
afișare cool pagina web a experimentului pe care „first-person“ prin ochelari de soare.
Script-pilot drop-down de navigare.
milos
O parte din „sfaturi“ este evident. Orice expert, mai devreme sau mai târziu, vine la un astfel de sistem.
Așa că nu mă deranjează. Când am început nu a existat nici o css si html al acestor articole. Vine ca un genist - dreapta pas, pas la stânga pentru a submina, sari în sus provocare.
stas.protasevich
Există programe pentru a „optimiza“ HTML, care este comprimat, dar este dificil de a modifica ulterior. În cazul în care această sarcină este necesitatea de a utiliza două „set“ de fișiere. Dar dacă te uiți la codul de Yandex Google și alte „pentru adulți“, ei nu sunt foarte nedumeriți pe această temă. 1 2 == descărcabile care pot fi editate comprimat editat. Aș adăuga - pentru a accelera sprite folosi chiar mai bine ca fundal.
optimizare HTML prin compresie, așa cum este descris în prima întrebare - nu este o idee bună, deoarece chiar și cel mai mare fisier HTML este mult mai mică decât imaginile pregătite în mod corespunzător. Imaginați-vă situația: ai condus prin html komperssor, condus în gzip - în cele din urmă a primit 250Kb greutate scădere fișier la 25. În același timp, aveți de pe pagina este o imagine în format png24, astfel încât chiar și fără transparență, dar încă presat în jos în dimensiune cu CSS 1600 px lățime de până la 450. Astfel încât comprimarea imaginilor prin compresie în transferul de jpg fără pierderi și dimensiunile sale fizice la necesitatea de a reduce greutatea sa, de exemplu, de la 1MB la 100kb. Cred că diferența este evidentă. În plus, regula comprimat cod html - o bătaie de joc de el însuși.
Sunt de acord cu privire la imaginea complet. Acest lucru poate fi permis numai în cazul în care imaginea pe care ia de la site-ul altcuiva, iar în alte cazuri - să fie de natură să diminueze dimensiunea și muntele.
Prin obținerea de informații de la două canale (vedere si auz) eficacitatea instruirii de învățare departe superioare de cărți. O temele pentru acasă și teste on-line vă va permite să se gândească în mod constant în limba țintă și imediat verifica cunoștințele!
Dacă doriți o lungă perioadă de timp pentru a studia modul în HTML, mi-ai, pentru ai vesti bune!
Dacă ați învățat deja HTML și doresc să avanseze, următorul pas va fi de a studia tehnologia CSS.
Dacă doriți să înțeleagă conceptele de domeniu si hosting, învață cum să creeze o bază de date, încărca fișiere pe un site web prin intermediul unui server FTP, crea subdomenii, configurați cutiile poștale pentru site-ul și să monitorizeze participarea, acest curs este conceput special pentru tine!