Lucrul cu foi de stil în cascadă (CSS) poate fi dificil pentru începători. Folosind CSS, puteți structura, actualiza și menține aspectul aplicației dvs. Dar limbajul necesită abilități de manipulare a paginilor HTML pentru a obține aspectul dorit.
Iată câteva greșeli de evitat atunci când lucrați cu CSS. Vă vor economisi timp și vă vor ușura procesul de dezvoltare.
1. Utilizarea px pentru Dimensiunile fontului
Unitatea „px” reprezintă pixeli. Îl puteți folosi pentru a exprima diferite lungimi pe o pagină web, de la lățimea și înălțimea unui element până la dimensiunea fontului.
Cu toate acestea, px vă blochează designul la o dimensiune fixă pentru toate ecranele. O imagine în pixeli poate ocupa toată lățimea unui ecran și doar o mică parte a altuia. Dacă doriți un element mai proporțional, utilizați măsurători relative cum ar fi rem, sau procente (%).
Cea mai bună măsură relativă de utilizat este rem. Această unitate se referă la dimensiunea fontului elementului rădăcină pe care un cititor o poate seta adesea în setările browserului. Puteți vedea impactul px și rem asupra unui element în următorul exemplu:
html>
<HTML>
<cap>cap>
<corp>
<h1>Acesta este titlul 1h1>
<h2>Aceasta este rubrica 2h2>
<p>Acesta este un paragraf.p>
<p>Acesta este un alt paragraf.p>
corp>
html>Puteți stila dimensiunile fonturilor din acest document folosind unități px cu următorul CSS:
h1 {
marimea fontului: 50px;
}h2 {
marimea fontului: 30px;
}
p {
marimea fontului: 15px;
}
Pagina rezultată pare acceptabilă atunci când o vizualizați pe un ecran mare:
Dar nu pare prezentabil pe un ecran mai mic, ca pe un telefon:
Apoi, aplicați rem pe același conținut. Specificați o dimensiune de bază a fontului pe elementul html și măriți alte elemente folosind rems, așa cum este ilustrat mai jos:
html {
marimea fontului: 16px;
}h1 {
marimea fontului: 3rem;
}h2 {
marimea fontului: 2rem;
}
p {
marimea fontului: 1rem;
}
Observați diferența dintre ecranele mari și cele mici. Cu rem, conținutul se scalează mai bine indiferent de dimensiunea ecranului. Elementele nu vor depăși niciodată dimensiunea setată a ecranului. De aceea este mai bine să folosiți lungimi relative decât pixeli.
Pe un ecran de desktop:
Pe un ecran mic, textul în unități rem este încă lizibil:
2. Puneți toate stilurile într-un singur fișier
Utilizarea unui fișier CSS pentru un proiect mare poate crea o mizerie. Veți avea un fișier cu linii lungi de cod care va fi confuz la actualizare. Încercați să utilizați fișiere diferite pentru foile de stil CSS pentru diferite componente.
De exemplu, puteți avea fișiere diferite pentru navigare, antet și subsol. Și alta pentru secțiuni de pe corp. Separarea fișierelor CSS vă ajută să vă structurați aplicația și să vă încurajeze utilizarea codului.
3. Folosind inadecvat CSS inline
În vanilla CSS puteți scrie stiluri pe paginile HTML la fel ca pe Cadre CSS precum Bootstrap și TailwindCSS. CSS inline vă permite să aplicați un stil unic unui element HTML. Utilizează atributul de stil al elementului HTML.
Următorul cod este un exemplu de CSS inline.
<h2stil="culoare: verde;">Acesta este un titlu verdeh2>
<pstil="culoarea rosie;">Acesta este un paragraf roșu.p>
Textul va apărea astfel:
Cu toate acestea, HTML numai cu CSS inline poate fi dezordonat. Deoarece nu există altă locație pentru CSS, toate CSS-urile există în același fișier ca și HTML. Va părea aglomerat. Editarea unui astfel de fișier este dificilă, mai ales dacă nu este codul tău.
De asemenea, cu CSS inline, trebuie să scrieți cod pentru fiecare element. Acest lucru crește repetarea și reduce reutilizarea codului. Utilizați întotdeauna o combinație de foi de stil externe și CSS inline pentru a vă stila paginile web.
4. Suprautilizarea !important
În CSS, !important regula adaugă mai multă importanță unei proprietăți/valorii. Ea anulează alte reguli de stil pentru acea proprietate pe acel element.
Ar trebui să ai doar câteva !important regulile din codul dvs. Folosiți-l numai atunci când este necesar. Nu are rost să scrieți cod și apoi să îl suprascrieți. Codul dvs. va arăta dezordonat și va cauza probleme atunci când este rulat pe unele dispozitive.
html>
<html>
<cap>cap>
<corp>
<p> Sunt portocaliu p>
<pclasă="clasa mea"> eu sunt verde p>
<pid="ID-ul meu"> eu sunt albastru. p>
corp>
html>CSS:
#ID-ul meu {
culoare de fundal: albastru;
}.clasa mea {
culoare de fundal: verde;
}
p {
culoare de fundal: portocale !important;
}
Rezultatul este cam asa:
5. Nerespectarea convențiilor de denumire
CSS are convenții de denumire care ghidează dezvoltatorii despre cum să scrie cod standard. Acest lucru este esențial dacă ajungeți depanarea fișierului CSS la o dată viitoare.
Unul dintre aceste standarde include utilizarea cratimelor pentru a separa cuvintele grupate. Un altul este denumirea unui selector în funcție de ceea ce face. Deci oricine se uită la ea nu va trebui să ghicească. De asemenea, facilitează citirea, întreținerea și partajarea codului. De exemplu:
In loc de asta:
.imagine1 { margine-stânga: 3%; }Scrieți așa:
.băiat-imagine { margine-stânga: 3%; }Când vă uitați la foaia de stil, veți ști exact pentru ce imagine este codul. Ghidul de stil HTML/CSS Google enumeră mai multe convenții pe care fiecare dezvoltator ar trebui să le cunoască.
Scrierea de comentarii este cea mai subevaluată abilitate în programare. Mulți oameni uită să scrie comentarii pentru a-și explica codul. Dar economisește timp. Comentariile sunt esențiale pentru citirea și menținerea codului.
Deoarece CSS este slab structurat și oricine își poate dezvolta propriile convenții, comentariile sunt vitale. Folosirea comentariilor bine structurate pentru a explica foaia de stil este o bună practică. Puteți scrie comentarii care explică secțiuni ale codului și ce fac acestea.
/* elementele video au nevoie de spațiu pentru a respira */
.video {
margine-top: 2ei;
}
/* stilizarea secțiunii eroi */
.salut {
margine-top: 1ei;
}
7. Eșecul de a proiecta în prealabil
Mulți oameni o fac, dar este o greșeală gravă să începeți să codificați fără un plan. CSS determină cum arată structura front-end-ului tău. Designul spune multe despre abilitățile tale de programare.
Un design pentru site-ul dvs. vă clarifică viziunea și resursele necesare pentru a ajunge acolo. Aveți o imagine mentală a proiectului dvs. Apoi proiectează-l pe hârtie sau folosește-l un set de instrumente de proiectare precum Canva pentru a vizualiza ceea ce vrei.
Când aveți o imagine completă a proiectului, asamblați-vă toate resursele și începeți să codificați. Vă va economisi timp și redundanță.
De ce ar trebui să luați în considerare aceste recomandări
Dacă dezvoltați aplicații pe web, veți folosi CSS. Lucrul bine cu CSS necesită practică și respectarea convențiilor standard. Convențiile nu numai că vă fac codul ușor de citit, ci și de întreținut.
Scrierea unui cod standardizat vă va economisi timp și efort. Timpul pe care l-ați fi petrecut formatând front-end-ul îl puteți petrece pe funcții mai complexe. De asemenea, vă asigură că puteți reutiliza codul și îl puteți partaja altora. Scrieți un cod mai bun respectând convențiile stabilite și deveniți un dezvoltator mai bun.