Ju nuk jeni i kufizuar në një klasë të vetme CSS për element.
Cascading Style Sheets (CSS) ju lejon të përcaktoni pamjen e një elementi duke u lidhur me atributet që aplikoni në atë element. Këto atribute mund të jenë ose ID dhe një klasë dhe, si të gjitha atributet, ato u shtojnë informacione të dobishme elementëve për të cilët janë bashkangjitur. Në varësi të atributit që shtoni në një element, mund të shkruani një përzgjedhës CSS për të aplikuar stilet e nevojshme vizuale që nevojiten për të arritur pamjen dhe ndjenjën për atë element dhe faqen e internetit në tërësi.
Ndërsa ID ose klasat punojnë me qëllim të lidhjes së tyre me rregullat CSS, metodat moderne të dizajnimit të web-it favorizojnë klasat mbi ID-të, pjesërisht, sepse ato janë më pak specifike dhe më të lehta për të punuar me të përgjithshme. Po, do të gjeni ende shumë faqe që përdorin ID, por ato atribute po zbatohen më me masë se në të kaluarën, ndërkohë që klasët kanë marrë përsipër faqet moderne të internetit.
Klasë të vetme ose të shumëfishta në CSS?
Në shumicën e rasteve ju do të caktoni një atribut të vetëm të klasës në një element, por ju në fakt nuk kufizoheni vetëm në një klasë ashtu siç jeni me ID. Ndërsa një element mund të ketë vetëm një atribut të vetëm të ID-së, mund të jepni absolutisht një element të klasave të shumta dhe, në disa raste, duke bërë kështu, do ta bëjë faqen tuaj më të lehtë të stilit dhe shumë më fleksibël!
Nëse keni nevojë të caktoni klasa të shumëfishta për një element, mund të shtoni klasa shtesë dhe thjesht ndani ato me një hapësirë në atributin tuaj.
Për shembull, ky paragraf ka tre klasa:
pullquote featured left "> Ky do të ishte teksti i paragrafit
Kjo përcakton tre klasa në paragrafin e paragrafit:
- Pullquote
- Të zgjedhura
- majtas
Vëreni hapësirat midis secilës prej këtyre vlerave të klasës. Këto hapësira janë ato që i vendos ato si klasa të ndryshme, individuale. Kjo është gjithashtu arsyeja pse emrat e klasës nuk mund të kenë hapësira në to, sepse duke vepruar kështu do t'i vendosnin ato si klasa të veçanta.
Për shembull, nëse përdorni "pullquote-featured-left" pa hapësirë, do të ishte një vlerë e klasës, por shembulli i mësipërm, ku këto tre fjalë janë të ndara me hapësirë, i vendos ato si vlera individuale. Është e rëndësishme të kuptoni këtë koncept kur vendosni se cilat vlera të klasës duhet të përdoren në faqet tuaja të internetit.
Pasi të keni vlerat e klasës në HTML, mund t'i caktoni ato si klasa në CSS dhe aplikoni stilet që dëshironi të shtoni. Për shembull.
.pullquote {...}
.featured {...}
p.left {...}
Në këto shembuj, deklaratat e CSS dhe vlerat palë do të jenë brenda mbërthimit të kaçurrelës, e cila është mënyra se si këto stile do të aplikohen tek përzgjedhësi i duhur.
Shënim - nëse vendosni një klasë në një element të caktuar (për shembull, p.left), mund ta përdorni ende si pjesë të një liste klasash; megjithatë, të jetë i vetëdijshëm se ajo do të ndikojë vetëm ato elemente që janë specifikuar në CSS. Me fjalë të tjera, stili i p.left do të zbatohet vetëm për paragrafët me këtë klasë, meqë përzgjedhësi juaj është në të vërtetë duke thënë se e zbaton atë në "paragrafë me një vlerë të klasës së" majtë ". Në të kundërt, dy përzgjedhësit e tjerë në shembull nuk specifikojnë një element të caktuar, kështu që do të aplikoheshin për çdo element që përdor këto vlera klasore.
Avantazhet e klasave të shumëfishta
Klasa të shumëfishta mund ta bëjnë më të lehtë për të shtuar efekte speciale tek elementët pa pasur nevojë të krijojnë një stil krejtësisht të ri për këtë element.
Për shembull, mund të dëshironi të keni aftësinë për të notuar elemente në të majtë ose në të djathtë shpejt. Ju mund të shkruani dy klasa majtas dhe djathtas me vetëm noton: majtas; dhe noton: e drejtë; në to. Pastaj, kurdoherë që keni pasur një element që duhet të notoni majtas, thjesht do të shtoni klasën "majtas" në listën e saj të klasës.
Megjithatë, ka një vijë të shkëlqyer për të ecur këtu. Mos harroni se standardet e internetit diktojnë ndarjen e stilit dhe strukturës. Struktura trajtohet nëpërmjet HTML ndërsa stili është në CSS.
Nëse dokumenti juaj HTML është i mbushur me elementë që të gjithë kanë emrat e klasës si "e kuqe" ose "e majta", që janë emra që diktojnë se si elementët duhet të duken më tepër sesa ato që janë, ju po kaloni atë vijë midis strukturës dhe stilit. Unë përpiqem të kufizoj emrat e klasës jo-semantike për aq sa është e mundur për këtë arsye.
Klasa të shumëfishta, semantikë dhe JavaScript
Një avantazh tjetër për të përdorur klasa të shumëfishta është se ajo ju jep mundësi shumë më tepër interaktive.
Ju mund të aplikoni klasa të reja në elementet ekzistuese duke përdorur JavaScript pa hequr asnjë nga klasat fillestare. Ju gjithashtu mund të përdorni klasa për të përcaktuar semantikën e një elementi . Kjo do të thotë që ju mund të shtoni në klasa shtesë për të përcaktuar se çfarë do të thotë ky element në mënyrë semantike. Kështu funksionon Microformats.
Disavantazhet e klasave të shumëfishta
Disavantazhi më i madh për përdorimin e klasave të shumta në elementet tuaja është se kjo mund t'i bëjë ata pak të vështirë për t'u parë dhe menaxhuar me kalimin e kohës. Mund të bëhet e vështirë të përcaktohet se cilat stile ndikojnë në një element dhe nëse ndonjë skriptë po ndikon në të. Shumë nga kornizat që janë në dispozicion sot, si Bootstrap, përdorin shumë elementë me klasa të shumëfishta. Ky kod mund të dalë nga dora dhe e vështirë për të punuar me shumë shpejt nëse nuk jeni të kujdesshëm.
Kur përdorni klasa të shumëfishta, gjithashtu rrezikoni të keni stilin për një klasë të mbivendosni stilin e tjetrit edhe nëse nuk keni ndërmend për këtë. Kjo pastaj mund të bëjë të vështirë të kuptoj pse stilet tuaja nuk janë duke u zbatuar edhe kur duket se ata duhet.
Duhet të jeni të vetëdijshëm për specifikat, madje edhe me atributet e aplikuara për atë element!
Duke përdorur një vegël si mjete të Webmasterit në Chrome, mund të shihni më lehtë se si klasa juaj po ndikon në stilet tuaja dhe për të shmangur këtë problem të stileve dhe atributeve në konflikt.
Artikulli origjinal nga Jennifer Krynin. Redaktuar nga Jeremy Girard më 17-08-07