Нисте ограничени само на једну ЦСС класу по елементу.
Цасцадинг Стиле Схеетс (ЦСС) вам омогућавају да дефинишете изглед елемента тако што ћете се уклопити у атрибуте које примењујете на тај елемент. Ови атрибути могу бити и ИД или класа и, као и сви атрибути, додају корисне информације елементима на које су везани. У зависности од тога који атрибут додате елементу, можете написати ЦСС селектор да примените потребне визуелне стилове који су потребни да би се постигао изглед и осећај за тај елемент и веб локацију у целини.
Док оба ИД-а или класе раде у циљу упуштања у ЦСС правила, савремене методе веб дизајна фаворизују класе преко ИД-ова, делимично, јер су мање специфичне и лакше за рад са целокупном. Да, и даље ћете пронаћи многе странице које користе ИД-ове, али се ти атрибути примјењују умерено него у прошлости док су класе преузеле модерне веб странице.
Један или више класа у ЦСС-у?
У већини случајева доделите један атрибут поједини класи елементу, али заправо нисте ограничени на само једну класу на начин на који сте са ИД-има. Док елемент може имати само један атрибут ИД, можете апсолутно дати елемент више класа, ау неким случајевима то ће учинити вашу страницу лакшим за стил и много флексибилнијом!
Ако вам треба додијелити више класе елементу, можете додати додатне класе и једноставно их раздвојити са простором у вашем атрибуту.
На пример, овај пасус има три класе:
<п цласс = " пуллкуоте приказан лево "> Ово би био текст става
Ово поставља сљедеће три класе на ознаку пасуса:
- Пуллкуоте
- Изабран
- Лево
Обратите пажњу на размаке између сваке од ових класа вредности. Ти простори су оно што их поставља као различите, појединачне класе. Ово је такође разлог зашто имена класа не могу имати размаке у њима, јер би то тиме постављало као засебне класе.
На примјер, ако сте користили "пуллкуоте-феатуред-лефт" без размака, то би била једна класа вриједности, али примјер горе, гдје су ове три речи одвојене размаком, поставља их као појединачне вриједности. Важно је разумјети овај концепт док одлучујете о вриједностима класе које ћете користити на својим веб страницама.
Једном када имате вриједности ваше класе у ХТМЛ-у, можете их додијелити као разреде у ЦСС-у и примијенити стилове које желите додати. На пример.
.пуллкуоте {...}
.Изабран { ... }
п.лефт {...}
У овим примјерима, ЦСС декларације и вредности вриједности би се налазиле у коврџавим носачима, како би се ти стилови примијенили на одговарајући селектор.
Напомена - ако поставите класу на одређени елемент (на пример, п.лефт), и даље га можете користити као део списка класа; међутим, будите свјесни да ће то утицати само на елементе који су наведени у ЦСС-у. Другим речима, стил п.лефт ће се примењивати само на параграфе са овом класом пошто ваш селектор заправо говори да га примењује на "параграфе са вриједношћу класе" лијево ". Насупрот томе, друга два селектора у примјеру не одређују одређени елемент, тако да би се примијенили на било који елемент који користи те вриједности класе.
Предности вишеструких класа
Вишеструке класе могу олакшати додавање посебних ефеката елементима без стварања потпуно новог стила за тај елемент.
На пример, можда ћете желети да имате могућност брзо пребацивање елемената лево или десно . Можете писати две класе лево и десно само са флоат: лијево; и пливају: десно; у њима. Затим, кад год имате елемент, морате лебдјети лево, једноставно бисте додали класу "лијево" на своју класу.
Међутим, ту је и танка линија за ходање. Сетите се да веб стандарди диктирају раздвајање стила и структуре. Структура се обрађује путем ХТМЛ-а док је стил у ЦСС-у.
Ако је ваш ХТМЛ документ попуњен елементима који имају имена класа као што су "црвена" или "лева", која су имена која диктирају како елементи требају изгледати пре него што су они, прелазите ту линију између структуре и стила. Покушавам да ограничим моја несемантична имена класа што је више могуће из тог разлога.
Више класа, семантика и ЈаваСцрипт
Још једна предност коришћења више класа је то што вам пружа много више могућности за интерактивност.
Нове класе можете примијенити на постојеће елементе користећи ЈаваСцрипт без уклањања било које почетне класе. Можете користити и класе за дефинисање семантике елемента . То значи да можете додати на додатне класе да дефинишете шта тај елемент значи семантички. Овако ради микроформати.
Недостаци вишеструких класа
Највећи недостатак коришћења више класа на вашим елементима је то што их може учинити мало опрезним за гледање и управљање временом. Може постати тешко одредити који стилови утичу на елемент и ако му неки сценарији утичу на њега. Многи од доступних оквира данас, попут Боотстрап-а, често користе елементе са више класа. Тај код се може брзо извући и врло тешко радити ако нисте пажљиви.
Када користите више класа, такође ризикујете да стил за једну класу преклапа стил другог, чак иако нисте намеравали за то. Ово онда може отежати разумевање зашто се ваши стилови не примењују чак и када се чини да би требало.
Морате бити свјесни специфичности, чак и са атрибутима који се примјењују на један елемент!
Коришћењем алата као што су Вебмастер алати у Цхромеу, можете лакше видети како ваше класе утичу на ваше стилове и избјегавају овај проблем конфликтних стилова и атрибута.
Оригинални чланак Јеннифер Кринин. Уредио Јереми Гирард на 7/7/17