De când am folosit extensiv CSS timp de 2 ani, mi-am amintit mai multe tehnici care fac CSS un instrument mai eficient și rezolvă probleme specifice. Aș dori să împărtășesc tehnicile CSS preferate și să explic câteva dintre cele mai frecvente greșeli pe care le fac noii începători. Dacă aveți experiență cu CSS, atunci cel mai probabil pe drumul vostru ați îndeplinit deja aceste sfaturi și trucuri, dar cine știe, dintr-o dată vor fi câteva noi.
De la început, sa planificat să scriu totul într-un articol, dar au existat mai multe consilii și, prin urmare, am împărțit totul în două părți pentru o mai bună stăpânire a acestui material.
Dacă valoarea nu este 0, specificați întotdeauna unitatea de măsură
Nu specificați o unitate de măsură pentru valoarea de lungime - destul de o greșeală obișnuită în rândul începătorilor de a învăța CSS. Puteți evita acest lucru în HTML, dar în CSS toate valorile lungimii trebuie să aibă o unitate de măsură. Există două excepții: înălțimea liniei și 0 (zero). Rețineți că după ce valoarea trebuie să urmeze neapărat o unitate de măsură - nu este nevoie să introduceți un spațiu gol (spațiu) între ele.
Nu este necesar să specificați o unitate de măsură pentru 0 (zero). Un zero de pixeli este zero centimetri sau orice altă unitate de măsură. În ciuda acestui lucru, foarte des există ceva de genul umplutură: 0px, când puteți scrie padding: 0 și efectul va fi același.
Nu este nimic în neregulă cu adăugarea unei unități de măsură la zero, este doar un volum suplimentar și, în ceea ce mă privește, nu arată prea bine.
Amintiți-vă de sensibilitatea la registru
Când se utilizează CSS cu XHTML, numele elementelor și selectorii sunt sensibile la minuscule. Pentru a evita problemele asociate, vă recomandăm să utilizați întotdeauna câmpurile mici pentru selectori de elemente CSS în selectorii CSS.
Valorile atributelor de clasă și id sunt sensibile la minuscule în HTML și XHTML, pentru a evita cazul mixt în numele atributelor de clasă și id. Dacă pentru vreun motiv folosiți un registru mixt, verificați din nou identitatea înregistrării în CSS.
Specificați culorile
Acest sfat este în articolul menționat anterior, dar am atât de des folosi ca va repeta aici: atunci când culoarea în CSS este specificată în hexazecimal (notație de culoare hexazecimal), iar atunci când culoarea este format din trei perechi de numere hexazecimale, atunci puteți specifica mai multe culori în mod eficient, prin ștergerea fiecărui al doilea număr: # 000 este identic cu # 000000, # 369 este identic cu # 336699.
Și țineți minte semnul numărului - simbolul "#" înainte de codul de culoare.
Un alt sfat de culoare - puteți specifica culori în condiții de siguranță World Wide Web, folosind numere care sunt multiplicate cu 3 pentru valorile roșu, verde și albastru de 0, 3, 6, 9, C și F. # 99c este o culoare în condiții de siguranță, # 98c nu este.
Excludeți tipurile de elemente pentru selectorii de clasă și id
Când selectorii de scriere care indică un element la anumite valori și id-ul de clasă, atunci puteți elimina elementul înainte de tipul de punct (selectorul de clasă) sau # (id-selector).
Deci, în loc de a scrie:
puteți scrie:
și salvați câteva octeți pentru fiecare dintre selectori.
Acest lucru este util în mod special pentru selectorii de id, deoarece acestea trebuie să fie unice în document, ceea ce reduce riscul unor reguli CSS conflictuale între ele. Numele de clase, pe de altă parte, pot fi utilizate în document ori de câte ori și pot fi atribuite diferite tipuri de elemente pentru același nume de clasă (sau mai multe nume). Pentru a diferenția tipurile de elemente cu același nume de clasă, va trebui să specificați tipul elementului din selector.
Știți că regulile CSS de mai sus nu sunt identice. Dacă o regulă este specificată fără tipul elementului din selector și celălalt cu tipul de element din selector, atunci regula care folosește tipul de element va avea specificări mai importante.
Valorile implicite
/
De multe ori, nu este necesar să specificați o valoare a proprietății, pe baza valorii implicite a acestei proprietăți. Acest lucru este deosebit de important atunci când utilizați proprietăți abreviate, deoarece la orice proprietate nespecificată este atribuită o valoare implicită corespunzătoare acestei proprietăți.
Unele dintre valorile implicite comune sunt 0 pentru umplutura (există câteva excepții) și transparente pentru culoarea de fundal.
Bazat pe faptul că, în diferite browsere există diferențe între valorile implicite, unii oameni preferă să utilizeze la începutul CSS-fișier resetare globală a spațiului gol prin reducerea la zero proprietăți în marjă și padding pentru toate elementele.
Nu re-desemnați valorile moștenite
Valorile multor proprietăți sunt moștenite de orice descendent al elementului pentru care proprietatea este specificată. Proprietățile similare ale culorilor și fontului reprezintă exemplul cel mai frapant al acestor proprietăți.
Aflați că unele proprietăți pot fi suprascrise de anumite stiluri de cascadă ale agenților utilizator (browsere) ai browserelor, de exemplu valorile implicite ale browserului. Prin urmare, folosind următoarea regulă, nu puteți face toate titlurile cu conținut scăzut de grăsimi:
Normele browserului predefinite sunt mai specifice datorită cascadei, care este descrisă mai jos.
Profitați de cascadă
Cascada vă permite să utilizați mai multe reguli pentru proprietățile unui element. Puteți să înlocuiți aceeași proprietate sau să definiți proprietăți suplimentare. Să presupunem că aveți următorul cod de pagină:
Actualizare: Setul Lorem ipsum dolor
În CSS, puteți utiliza reguli diferite pentru a specifica proprietățile potrivite pentru toate elementele p și cele care sunt specifice elementelor p cu clasa de actualizare:
Ambele reguli vor fi combinate pentru elementele p cu clasa de actualizare. Clasa selector este mai importantă decât tipul selector, astfel încât atunci când apare un conflict, vor fi utilizate proprietățile definite în a doua regulă. În acest caz, culoare.
Mai multe informații despre modul în care se calculează regulile CSS pot fi găsite în Calcularea specifică a selectorului din specificația CSS 2.1.
Mai multe nume de clase
Orice imagine cu o clasă specială va avea în jurul ei un spațiu de 2 pixeli și un fundal de galben. Fotografiile cu clasa royaltyfree vor avea o margine de 2 pixeli, iar imaginile cu ambele clase vor avea o margine, un spatiu si un fundal galben.
Nu vă puteți opri aici - este doar un exemplu. Încercați să utilizați nume de clase semantic corecte care descriu ceea ce face elementul, nu cum arată acesta.
Utilizați selectori pentru copii
Nu folosiți selectori pentru copii - acesta este unul dintre cele mai frecvente exemple de utilizare ineficientă a CSS, pe care o văd de la începători. Selectorii de copii te pot ajuta să faci fără multe atribute ale clasei și să îți faci selectorii CSS mai eficienți. De exemplu, putem lua următoarea structură a codului:
Acest cod poate fi urmat de următorul CSS:
div subnav ul li.subnavitem a.subnavitem
div # subnav ul li.subnavitemselected
div # subnav ul li.subnavitemselected a.subnavitemselected
Puteți înlocui exemplele de mai sus cu următorul cod: