Не се ограничавате до един клас CSS на елемент.
Каскадните стилови листове (CSS) Ви позволяват да дефинирате външния вид на елемента, като вмъкнете в атрибутите, които прилагате към този елемент. Тези атрибути могат да бъдат или ID или класове и като всички атрибути те добавят полезна информация към елементите, към които са прикрепени. В зависимост от това кой атрибут добавяте към даден елемент, можете да напишете CSS селектор, за да приложите необходимите визуални стилове, които са необходими, за да постигнете усещането за този елемент и уебсайта като цяло.
Докато и двата ID или класове работят с цел да се вмъкнат в тях с CSS правила, модерните методи за уеб дизайн предпочитат класовете по IDs, отчасти защото те са по-малко специфични и по-лесни за работа с цялостната. Да, пак ще намерите много сайтове, които използват идентификационни номера, но тези атрибути се прилагат по-пестеливо, отколкото в миналото, докато класовете са придобили модерни уеб страници.
Единични или няколко класа в CSS?
В повечето случаи бихте присвоили атрибут на един клас на елемент, но всъщност не сте ограничени само до един клас, по който сте с идентификатори. Докато даден елемент може да има само един идентификационен номер, можете абсолютно да дадете елемент на няколко класа и в някои случаи това ще направи страницата ви по-лесна за стил и много по-гъвкава!
Ако трябва да присвоите няколко класа на елемент, можете да добавите допълнителните класове и просто да ги разделите с интервал във вашия атрибут.
Например този параграф има три класа:
pullquote черта ляво "> Това ще бъде текстът на параграфа
Това поставя следните три класа в маркера за параграф:
- Pullquote
- Препоръчани
- Наляво
Обърнете внимание на интервалите между всяка от тези класови стойности. Тези пространства ги определят като различни, индивидуални класове. Ето защо имената на класове не могат да имат интервали в тях, защото това би ги определило като отделни класове.
Например, ако сте използвали "pullquote-featured-left" без пространство, това би било една класова стойност, но горният пример, където тези три думи са разделени с интервал, ги определя като индивидуални стойности. Важно е да разберете тази концепция, когато решите кои класови стойности да използвате на уеб страниците си.
След като имате стойностите на класа в HTML, можете да ги присвоите като класове в CSS и да приложите стиловете, които искате да добавите. Например.
.pullquote {...}
.featured {...}
p.left {...}
В тези примери CSS декларациите и двойките стойности ще бъдат в рамките на къдравите скоби, което е начинът, по който тези стилове ще бъдат приложени към подходящия селектор.
Забележка - ако зададете класа на конкретен елемент (например p.left), можете да го използвате като част от списък с класове; Трябва обаче да сте наясно, че това ще повлияе само върху елементите, които са посочени в CSS. С други думи, стилът p.left ще се прилага само за параграфи с този клас, тъй като вашият селектор всъщност казва, че го прилага към "параграфи с класова стойност на" лявата "". За разлика от другите два селектора в примера не се посочва определен елемент, така че те биха се отнасяли за всеки елемент, който използва тези класови стойности.
Предимства на няколко класа
Няколко класа могат да улеснят добавянето на специални ефекти към елементите, без да се налага да създавате съвсем нов стил за този елемент.
Например, може да искате да имате възможност бързо да плувате елементи наляво или надясно . Може да напишете два класа наляво и надясно само с плувка: вляво; и плува: правилно; в тях. След това, когато имате елемент, който трябва да плавате наляво, бихте добавили класа "ляво" към списъка с класове.
Тук обаче има хубава линия. Не забравяйте, че уеб стандартите диктуват разделението на стила и структурата. Структурата се обработва чрез HTML, докато стилът е в CSS.
Ако вашият HTML документ е изпълнен с елементи, които имат имена на класове като "червено" или "ляво", които са имена, които диктуват как трябва да изглеждат елементите, а не какви са те, вие пресичате тази линия между структура и стил. Опитвам се да огранича възможно най-много моите не-семантични имена на класове по тази причина.
Няколко класове, семантика и JavaScript
Друго предимство при използването на няколко класа е, че ви дава много повече възможности за интерактивност.
Можете да прилагате нови класове към съществуващи елементи, като използвате JavaScript, без да премахвате някой от първоначалните класове. Можете също да използвате класове, за да дефинирате семантиката на даден елемент . Това означава, че можете да добавите допълнителни класове, за да определите кой елемент означава семантично. Ето как работи Microformats.
Недостатъци на няколко класа
Най-големият недостатък на използването на няколко класа на вашите елементи е, че може да ги направи малко трудно да се гледат и да се управляват с течение на времето. Може да стане трудно да се определи кои стилове засягат даден елемент и дали някакви скриптове влияят върху него. Много от съществуващите днес рамки, като Bootstrap, използват много от елементи с множество класове. Този код може да се измъкне от ръцете и трудно да се работи много бързо, ако не сте внимателни.
Когато използвате няколко класа, рискувате също да имате стил за един клас да замени стилът на друг, дори ако не сте възнамерявали за това. Това след това може да затрудни разбирането защо стиловете ви не се прилагат, дори когато изглежда, че трябва.
Трябва да сте наясно със спецификата, дори и с атрибутите, приложени към този един елемент!
С помощта на инструмент като инструментите за уеб администратори в Chrome можете по-лесно да видите как класовете ви влияят върху стиловете ви и да избегнете този проблем с конфликтни стилове и атрибути.
Оригинална статия на Дженифър Кринин. Редактиран от Jeremy Girard на 8/7/17