Каскадные таблицы стилей (CSS) позволяют определять внешний вид элемента, подключая атрибуты, которые вы применяете к этому элементу. Этими атрибутами могут быть как ID, так и класс, и, как и все атрибуты, они добавляют полезную информацию к элементам, к которым они привязаны.
В зависимости от того, какой атрибут вы добавляете к элементу, вы можете написать селектор CSS, чтобы применить необходимые визуальные стили, необходимые для достижения внешнего вида этого элемента и веб-сайта в целом.
Хотя идентификаторы или классы работают с целью привязки к ним с помощью правил CSS, современные методы веб-дизайна предпочитают классы по идентификаторам, отчасти потому, что они менее конкретны и легче работать в целом. Да, вы все равно найдете много сайтов, которые используют идентификаторы, но эти атрибуты применяются более экономно, чем в прошлом, в то время как классы занимают современные веб-страницы.
Один или несколько классов в CSS?
В большинстве случаев вы должны назначить один атрибут класса для элемента, но на самом деле вы не ограничиваетесь только одним классом, как и с идентификаторами. В то время как элемент может иметь только один атрибут идентификатора, вы можете абсолютно дать элемент несколько классов, и в некоторых случаях это сделает вашу страницу более легкой в стиле и гораздо более гибкой!
Если вам нужно назначить несколько классов для элемента, вы можете добавить дополнительные классы и просто отделить их пробелом в своем атрибуте.
Например, этот параграф имеет три класса:
Это будет текст пункта
Это устанавливает следующие три класса в теге абзаца:
- Pullquote
- Рекомендуемые
- Оставил
Обратите внимание на пробелы между каждым из этих значений класса. Эти пространства - это то, что устанавливает их как разные индивидуальные классы. Это также объясняет, почему имена классов не могут иметь пробелов в них, потому что это делает их отдельными классами. Например, если вы использовали «pullquote-featured-left» без пробела, это было бы одно значение класса, но пример выше, где эти три слова разделены пробелом, устанавливает их как отдельные значения. Важно понимать эту концепцию, когда вы решаете, какие значения классов использовать на своих веб-страницах.
После того, как у вас есть значения класса в HTML, вы можете назначить их как классы в своем CSS и применить стили, которые вы хотите добавить. Например.
.pullquote {…}.featured {…}p.left {…}
В этих примерах пары объявлений и значений CSS будут находиться внутри фигурных скобок, и именно эти стили будут применены к соответствующему селектору.
Если вы установите класс для определенного элемента (например,p.left), вы все равно можете использовать его как часть списка классов; однако имейте в виду, что это затронет только те элементы, которые указаны в CSS. Другими словами, p.left стиль будет применяться только к параграфам этого класса, так как ваш селектор фактически говорит, чтобы применить его к «абзацам с классом« слева ». Напротив, другие два селектора в примере не указывают определенный элемент, поэтому они будут применяться к любому элементу, который использует эти значения класса.
Преимущества нескольких классов
Несколько классов могут облегчить добавление специальных эффектов к элементам без необходимости создания совершенно нового стиля для этого элемента.
Например, вы можете захотеть быстро перемещать элементы влево или вправо. Вы можете написать два класса
оставил а также
право с просто
плыть налево; а также
плавать: право; в них. Затем, всякий раз, когда у вас есть элемент, вам нужно плавать влево, вы просто добавите класс «left» в его список классов.
Тем не менее, здесь есть тонкая линия. Помните, что веб-стандарты диктуют разделение стиля и структуры. Структура обрабатывается через HTML, а стиль - в CSS. Если ваш HTML-документ заполнен элементами, у которых есть имена классов, такие как «красный» или «левый», которые являются именами, которые определяют, как должны выглядеть элементы, а не то, что они есть, вы пересекаете эту линию между структурой и стилем. По этой причине я стараюсь ограничить имена не семантических классов.
Несколько классов, семантика и JavaScript
Еще одно преимущество использования нескольких классов заключается в том, что он дает вам больше возможностей интерактивности.
Вы можете применять новые классы к существующим элементам с помощью JavaScript, не удаляя ни один из начальных классов. Вы также можете использовать классы для определения семантики элемента. Это означает, что вы можете добавить дополнительные классы, чтобы определить, что этот элемент означает семантически. Так работают микроформаты.
Недостатки нескольких классов
Самый большой недостаток использования нескольких классов в ваших элементах заключается в том, что он может сделать их немного громоздкими, чтобы смотреть и управлять с течением времени. Может быть трудно определить, какие стили влияют на элемент, и если какие-либо скрипты влияют на него. Многие из доступных сегодня фреймворков, таких как Bootstrap, сильно используют элементы с несколькими классами. Этот код может выйти из-под контроля и работать очень быстро, если вы не будете осторожны.
Когда вы используете несколько классов, вы также рискуете, что стиль для одного класса переопределяет стиль другого, даже если вы этого не сделали. Это может затруднить понимание того, почему ваши стили не применяются, даже если кажется, что они должны. Вы должны знать специфику, даже с атрибутами, применяемыми к этому одному элементу!
Используя такой инструмент, как инструменты для веб-мастеров в Google Chrome, вы можете более легко увидеть, как ваши классы влияют на ваши стили и избегают этой проблемы конфликтующих стилей и атрибутов.
