Dacă ai doar o pagină HTML, ca în cazul tău, probabil e optim să fie tot în ea. Însă dacă ai mai multe (sau o aplicație măricică server side), devine foarte complicat să faci mentenanță pe părțile comune (dacă te hotărăști sa schimbi ceva în CSS sau JS, va trebui să intri în toate fișierele HTML care conțin respectivul cod).
Oricum, teoretic js-urile și css-urile se trag doar o dată, cât să ajungă în cache-ul browserului. Pe lânga asta există și minify, ca să “cântărească” cât mai puțin, mai sunt chestii și pe serverul web care ajută la compresie… într-adevăr, e o altă discuție, la care mă pricep mai puțin, mai ales dacă implică serverul.
Atributul class de pe un tag HTML permite să enumeri în el mai multe clase, așa că pentru eleganță și optimizare ai putea să faci o clasă separată:
.my-width {
width: 697px;
}
și apoi în HTML scrii:
<img class=“my-width xpandr-full”>
<img class=“my-width xpandr-small”>
Clasele din enumerare au proprietățile din clasele anterioare și pot să facă și override, adică de exemplu daca ai enumerarea “my-width xpandr-full” și în clasa .xpandr-full pui un alt width, atunci width-ul din .my-width nu mai are efect.
Tot ca optimizare, nu mai e nevoie să pui width-ul în clasele cu hover, pentru că deja au tot ce e în clasa de bază. Pui numai ce trebuie să se schimbe la mouse over. Deci, în .xpandr-small:hover, width și border-image-width sunt redundante, poți lăsa acolo numai height, că numai el se modifică.
Inheritance e ceva diferit, anume e ceva ce se moștenește de la proprietățile CSS ale nodurilor de deasupra. Nu toate proprietățile CSS au inheritance. Font-size are, deci dacă pui un font-size pe un tag, toate tagurile copil ale lui îl vor avea, dacă nu se specifică altfel. În ce privește width, acesta nu are inheritance. Poți vedea ușor pe net care atribute au inheritance si care nu, de exemplu pe w3schools.
http://www.w3schools.com/cssref/pr_font_font-size.asp (Inherited: yes)
Tot acolo mai vezi ceva important, default value. Uneori ai nevoie de ea, ca să pui la valoarea default o proprietate pe care ai specificat-o. De exemplu, dacă ai pe un tag position: absolute și vrei la un moment dat să nu mai fie așa, nu ai cum să îi zici “elimină proprietatea position”, ci o resetezi la valoarea default pe care o afli de acolo, anume position: static. Toate astea o să le înveți în timp.
Mai ziceai de specificat parametrul de width. Există posibilitatea asta, să ai variabile, dar nu cu CSS scris de mână ci cu chestii gen LESS (http://lesscss.org/) sau SASS (http://sass-lang.com/). În astea ai deja un adevărat limbaj de programare, din câte am înțeles, iar CSS-urile finale se generează cu niște executabile. N-am folosit deocamdată și nici nu îți recomand să îți bați acum capul, doar să știi că există, poate vreodată o să fii interesat.
E ok cu imaginea și span-ul într-un singur div, ideal e să grupezi pe cât se poate elementele similare în div-uri. Oricum, până la urmă nu e o rețetă infailibilă, în funcție de caz poți face și tag-uri separate. Contează să funcționeze, chiar tu ai observat că în celălalt caz făcea urât la hover, așa că ai căutat altă cale.
Întreabă-mă când mai ai neclarități sau dacă nu îți iese ceva, aici sau în PM.
Spor!
bun la casa omului pt bibilit un pixel în sus sau în jos.