Simplu ghid CSS 2
Noroc cu Napster, mi-am amintit ca incepusem o traducere dupa un simpatic ghid CSS scris de Dave Shea acum mai bine de un an.
Continuarea pentru Ghidul CSS de bune practici:
- Divide et Impera: un principiu vechi aplicabil in CSS - transforma bucati mari de CSS in comentarii.
- Principiu aplicabil in cazul fisierelor mari cu continut mai putin cunoscut. Imparti CSS-ul in doua bucati, comentezi prima jumatate (/* la inceput si */ la sfarsit). Daca problema cu care te confrunti inca apare inseamna ca este in jumatatea celalta de CSS. O imparti la randu-i in alte doua bucati - din care una comentata. Repeti procesul pana ajungi sa reduci cautarea la un bloc mic de css, in care e simplu de investigat ce e rau.
- Linkurile si principiul “LoVe/HAte”.
- Expresia “LoVe/HAte” a fost inventata pentru a retine mai usor pseudo-clasele linkurilor in ordinea utila pentru folosire: Link, Visited, Hover, Active. Daca nu sunt definite in aceasta ordine, nu o sa functioneze cum trebuie. De asemenea, nu trebuie sa uitam de :focus inainte de hover - util uneori. Propun LVHFA de retinut in genul "Liga Visatorilor Harnici Face Afaceri" :)
- Tine minte principiul care “TRansforma BLocuri”.
- Scurtatoruile pentru borduri (borders), margini si paddinguri trebuie tinute minte in in sensul acelor de ceasornic. Top Right Bottom Left. O linie de genul - margin:0 1px 2px 3px inseamna: fara margine sus, 1px margine dreapta, 2 px margine jos, etc. "TRansofrma BLocuri" cred ca ajuta…
- Scrie si unitatile de masura pentru valori.
- CSS-ul cere ca toate valorile diferite de zero sa aiba si unitate de masura (pentru marini, padding, marimea fontului, etc). 0 e 0, indiferent ca e vorba de pixeli, pt sau em, in rest - margin:0 2px; nu e tot una cu margin:0 2pt; si nici cu margin:0 2; Nu trebuie lasata la latitudinea browserului interpretarea valorilor de marime.
- Testeaza diverse marimi de fonturi.
- Browserele avansate - Firefox si Opera, Internet Explorer 7 - permit utilizatorilor sa dea resize la fonturi (iar mai nou si la imagini). Fonturile prea mari pot distruge layoutul gandit, deci e bine sa fie testata functionalitatea layoutului si in conditiile extreme la care l-ar putea supune si un user (care nu vede bine, sa zicem).
- Testeaza embedded - foloseste importul.
- Folosind CSS embedded in HTML cu <style> </style> in sectiunea <head> a documentelor se elimina probleme de caching ale CSSului din unele browsere, dar e indicat ca varianta finala a unui site sa aibe CSS extern. Importat prin <link> de preferinta.
- Adauga borduri pentru a rezolva probleme de layout.
- O regula universala de genul div {border: solid 1px #f00;} poate face multe in rezolvarea problemelor de layout. Toate divurile vor avea delimitari clare si va fi usor de identificat unde raman spatii goale ori unde se suprapun elementele. (Trebuie luati in calcul si cei 2 pixeli adaugati in plus prin borduri la stabilirea latimii elementelor)
- Numeste clasele si IDurile util/logic, nu bazat pe cum arata.
- Daca initial creezi o clasa in genul .mic_rosu iar mai tarziu vrei ca elementul sa devina mare si albastru nu o sa mai fie evident ce naiba face clasa respectiva. Foloseste in schimb clase de genul .credit .copyright etc.
Taguri:CSS
Poti sa mai citesti...
Idee de promovare » « Timisoreana Club XXI. Restaurant de multe stele*
Loading ...
Cum comentezi?