Лучшие практики CSS для идентификаторов и классов?
Я погрузился в книгу SitePoint, касающуюся CSS.
Что меня поразило в примерах, так это использование ID в качестве селектора CSS.
Некоторые элементы CSS-дизайна, которые я сделал, мне всегда казалось проще и универсальнее использовать Class в качестве селектора.
Может быть, это вещь .Net, потому что мы не всегда можем контролировать идентификатор элемента ...
Здесь лучше всего использовать CLASS или ID в качестве селектора?
Ответы 11
Я предпочитаю использовать класс в качестве селектора, поэтому я могу использовать его с более чем одним элементом на одной странице. Использование идентификатора в качестве селектора не позволяет этого, поскольку идентификатор должен быть уникальным.
Я думаю, они всегда используют id в примерах, потому что это менее двусмысленно. Вы знаете, что они говорят конкретно об элементе который one и его стилях.
В общем, эмпирическое правило состоит в том, что вы должны спросить себя: «Существует ли более одного элемента, для которого требуется один и тот же стиль, сейчас или в любое время в будущем?», И ответ будет даже «возможно», а затем сделать это класс.
Согласовано. Это может помочь выбрать имена идентификаторов, которые подразумевают уникальность, например «mainsection» или «navbar».
Селекторы ID обладают высокой специфичностью, что часто бывает в CSS. Чем жестче вы можете заставить CSS применять именно то, что ему нужно, тем меньше работы придется выполнять модулю визуализации CSS при установлении правил.
Разрабатывайте задачи и делайте это объектно-ориентированным способом - используйте классы, в которых объекты являются подобны классам, идентификаторы, на которые вы хотите нацелить экземпляры, и относитесь к ссылкам на теги как к чему-то вроде интерфейсов (и будьте осторожны при этом!). Это лучшая практика, о которой я могу думать.
edit: и да, MS действительно наложила CSS на ASP.NET, спасибо, ребята!
@Tim Meers - значит, у вас нет проблем с искаженными селекторами идентификаторов, интерпретацией MS апскейлинга браузера, элементами управления, нарушающими семантику (так называемые CSS-дружественные адаптеры были выпущены по какой-то причине), и продолжающейся настойчивостью в продвижении встроенного стиля? Если вас это устраивает, то вам - король, но лично для меня веб-формы были мертвы с тех пор, как был выпущен MVC.
Веб-формы были значительно улучшены после версии 4. Они больше не искажают html-код (включая интервалы), и теперь вы можете использовать статические идентификаторы и отключить состояние просмотра, состояние сеанса, и у вас может быть маршрутизация, как в MVC. Вы можете использовать некоторые из замечательных функций MVC или смешивать и сочетать :)
Практика зависит от «разрешения» того, что вы пытаетесь выбрать.
Я использую классы, когда хочу изменить целый набор элементов. Идентификаторы дают мне гораздо более детальный контроль, который иногда необходим.
Вы должны использовать «id», когда вы всегда говорите об одном (и всегда будет один) раздел вашего сайта.
В основном все сводится к семантике.
div.header
Это говорит мне о том, что вы разрешаете на своем сайте несколько «заголовков». Возможно, это подзаголовки.
div#header
Это говорит мне о том, что вы говорите об одном «разделе заголовка» в макете вашего сайта.
Обновлено: Вот полустаревшая статья о дизайне на чистом CSS ... если вы просто просканируете примеры CSS, вы увидите, почему я использую там ID: Как: чистый CSS-дизайн
Не забывайте, что класс и Я БЫ не исключают друг друга. Ничто не мешает вам иметь и то, и другое! Иногда это очень полезно, поскольку позволяет элементу наследовать общий стиль вместе с другими элементами того же класса, а также дает вам точный контроль над этим конкретным элементом. Еще один удобный метод - применить несколько классов к одному и тому же объекту (да, class = "someClass someOtherClass" вполне допустим). Например:
<style>
div.box {
float: left;
border: 1px solid blue;
padding: 1em;
}
div.wide {
width: 40em;
}
div.narrow {
width: 10em;
}
div#oddOneOut {
float: right;
}
</style>
<div class = "box wide">a wide box</div>
<div class = "box narrow">a narrow box</div>
<div class = "box wide" id = "oddOneOut">an odd box</div>
Теоретически также возможно сделать так, чтобы CSS применялся только к элементам, принадлежащим к нескольким классам, например. div.box.narrow {something: somevalue;}, но, к сожалению, он поддерживается не всеми браузерами. Обновление 2011: Множественные селекторы классов теперь имеют почти универсальную поддержку браузеров, так что продолжайте и используйте их!
Да, похоже, не многие это заметили. Позор, потому что это очень хороший способ уменьшить беспорядок и избыточность в таблицах стилей!
Это также хороший способ выкопать себе красивую и глубокую яму, если вы не будете осторожны. ;) Как правило большого пальца; классы (или идентификаторы в этом отношении) никогда не должны иметь имена, описывающие внешний вид, а скорее функции.
Есть пример того, как это приведет к «красивой и глубокой дыре»?
Просто чтобы разогреть старую ветку: селектор div в div#oddOneOut не нужен. Поскольку атрибут я бы уникален для всей страницы, селектор #oddOneOut будет достаточно точным, чтобы соответствовать этому элементу.
Правильно, имя элемента HTML в данном случае включено только для согласованности и ясности (я иногда делаю это и в производственном CSS).
Не забывайте, что вы можете ссылка на элемент с идентификатором. Помимо других преимуществ, это может быть очень важно для доступности. Это хорошая причина, почему для таких элементов макета, как заголовок, навигация, основное содержимое, нижний колонтитул, форма поиска и т. д., Вы всегда должны использовать идентификатор вместо класса (или вместе с классом).
Идентификаторы предназначены для однозначной идентификации элементов, классы предназначены для идентификации элемента как части класса элементов.
На практике атрибуты id следует использовать только по одному для каждого документа, атрибуты класса можно использовать более чем для одного элемента в документе.
Проверьте Спецификация W3C, а также страницу CSS-Обсудить по этой проблеме.
Еще один полезный ресурс - это Спецификация W3C по каскадному порядку: селекторам id присваивается десять раз вес селекторов class. Это особенно важно, если вы планируете переопределить стили в зависимости от различных сценариев или изменений состояния. Чем конкретнее исходный селектор, тем больше работы вам придется выполнить, чтобы переопределить его в дополнительных объявлениях.
Нет, не десять раз, бесконечное количество раз! Прочтите спецификацию еще раз: «Объединение трех чисел (в системе счисления с большим основанием) дает конкретность». В этом предложении «большая база» достаточно велика, только если один единственный идентификатор перекрывает любое количество классов.
Используйте только классы, почти никогда не используйте идентификаторы, если вам не нужно беспокоиться о скорости или совместимости.
Использование идентификаторов - это плохо, как и использование глобальных переменных в коде Visual Basic. Причина в том, что идентификаторы должны быть уникальными, что приводит к ненужной и плохой зависимости между различными независимыми частями вашего кода. Лучше использовать что-то вроде .page1 .tab1> .field1, потому что вам не нужно беспокоиться об уникальности field1 внутри tab1 или уникальности tab1 внутри page1. С идентификаторами вы должны вести реестр своих идентификаторов, чтобы контролировать и избегать конфликтов.
Используйте идентификаторы только в том случае, если вам нужно, например href = '# name' или если это требует какая-то библиотека.
И если вам нужно применить имя к уникальному элементу, но использовать только класс, в чем разница? За исключением того, что класс не будет отмечен как ошибка, и вы можете столкнуться с ошибкой, если используете тот же класс в другом месте.
в некоторых случаях вам придется использовать идентификаторы. Если вы ВСЕГДА используете классы, вы создаете файл css с множеством и множеством классов, которые имеют только одно приложение ... что очень неэффективно и кошмар для обслуживания!
@Adrian: как использование #name делает его менее кошмарным, чем использование .name? @Rob: верно, нет различий, но преимущество в том, что вы динамически включаете одну страницу в другую, которая имеет то же имя идентификатора, или если вы объединяете компоненты страницы вместе. Как вы можете написать повторно используемый компонент с использованием идентификаторов, если вы не дублируете имя компонента внутри каждого идентификатора? А если вы дублируете, какой смысл в дереве DOM, если вы организуете собственное дерево внутри идентификаторов?
@Adrian: использование множества локальных переменных не превращает программирование в кошмар, как же так в CSS? Создание новых имен классов на самом деле проще, чем имена идентификаторов, потому что с идентификаторами вам нужно беспокоиться о глобальной области видимости, а с именами классов вам нужно беспокоиться только об уникальности в локальной области, что дает те же преимущества, что и с локальными переменными.
Идентификаторы имеют более высокую специфичность, чем класс. Иногда вам нужно, чтобы какой-либо стиль превосходил другие стили классов родительских элементов. В большинстве случаев именно тогда элемент уникален для страницы, и поэтому идентификатор элемента очень полезен.
Кроме того, при использовании библиотеки javascript, такой как jQuery, она использует собственный метод браузера, getElementByID (), для извлечения объекта, что приводит к более быстрому выполнению сценария, чем при использовании селектора классов.
Наконец, ваша аналогия с глобальной переменной ошибочна. Уникальность - это особенность. Идентификатор уникален для документа и относится к определенному элементу. Вы говорите, что указатели тоже плохи?
@ghoppe: Я согласен с производительностью, но с точки зрения организации кода идентификаторы так же плохи, как и глобальные переменные. В современных браузерах разница в скорости меньше. Использование jQuery для адресации - это хитрость, которая в будущем будет устранена с помощью встроенных реализаций браузера. Использование идентификаторов для повышения приоритетов - тоже плохой прием, это лучше и больше свободы, если вы используете дополнительные корневые элементы, например, приоритет тела div span.class1 {} выше, чем body div span. Class1 {} выше, чем body span.class1 {} выше, чем span.class1 {}. ! important тоже полезно.
@ghoppe на указатели: да, указатели плохи, если вы жестко закодируете абсолютный адрес памяти в своем коде. Если вы используете относительное значение, тогда все в порядке. Любой HTML-идентификатор представляет собой абсолютный адрес памяти, если мы рассматриваем дерево DOM как память и сравниваем его с использованием класса относительно элементов DOM более высокого уровня.
Я действительно упускаю вашу точку зрения. Если у меня есть собака по имени Фидо, и я хочу дать ей определенную команду, я не считаю более удобным с "точки зрения организации кода" использовать .myhouse .contents .dog {position: sit}, а не #fido {позиция: сидеть}. Использование большего количества корневых элементов просто означает больше трудностей при изменении структуры страницы. Что, если я вставлю еще один div? Теперь я должен изменить свой css, чтобы учесть это, вместо того, чтобы знать, что #fido будет сидеть правильно.
Что касается ваших комментариев к дереву DOM и абсолютной памяти, иногда (часто?) Ваше представление уникального элемента не заботится об иерархии DOM. HTML-идентификатор не эквивалентен абсолютному адресу памяти, поскольку он не «ломается» при изменении DOM (пространства памяти).
Если у вас есть 2 уровня DIV в теле, предназначенных только для целей определения приоритетов, вам не нужно ничего помещать между ними и телом. Таким образом, они и тело становятся контейнером, и все содержимое всегда будет ниже body> div> div.
@Alpav Я собираюсь придерживаться ответа Никфа, который отмечен как правильный, а также отсылаю вас к ответу Олы ниже. Я действительно не могу понять ваш последний комментарий, за исключением того, что вы можете говорить о селекторах TYPE, а не о селекторах ID или CLASS ...
Это обсуждение продолжается здесь: stackoverflow.com/questions/2420809/…
Поздно к вечеринке, но использование аналогии ghoppe .myhouse .contents .dog заставит синтаксический анализатор пройти от каждой собаки, которую он найдет, обратно в корень DOM, чтобы убедиться, что она находится в содержимом дома, а затем убедиться, что содержимое находится в моем доме (пункт о добавлении div спорный, потому что это селекторы потомков, а не дочерние селекторы). Это хит производительности? Это зависит от того, сколько владельцев собак живет в вашем районе. Но, конечно, здесь мы не обращаем внимания на скорость и эффективность.
Что касается создания зависимостей с помощью идентификатора, вы также можете заявить, что вам не следует использовать первичные ключи, потому что они создают зависимость между вашим кодом и базой данных. Наконец, идентификаторы, безусловно, имеют свое место, потому что без них мне пришлось бы адресовать этот ответ парню, который заявил об использовании исключительно классов, а не более удобной метке alpav.
@Duncan: интересный момент о первичных ключах. Я предполагаю, что если данные получены из кода или данные никогда не меняются, тогда уместно жесткое кодирование первичных ключей, в противном случае - нет. Также мне интересно, предпочитаете ли вы использовать select * from users, где id = nnn, или select * from <all tables in database>, где id = guid? Я утверждаю, что первое лучше, чем второе, точно так же, как .users> ._ nnn лучше, чем ._guid Насчет того, что "вопрос о добавлении divs спорный": div div {attr: val} имеет более высокий приоритет, чем div {attr: val}, поэтому мы может контролировать приоритеты, почему это спорный?
@Duncan: Насчет alpav, сложно создать уникальное имя в глобальном пространстве имен. alpav оказался коротким и в то же время достаточно уникальным, но редко. Большинство других имен гораздо менее удобны для адресации, и изобретение множества уникальных имен неизбежно приводит к дублированию путей внутри имен. В любом случае вам придется вводить пути в запросы, но при использовании идентификаторов вы ухудшаете ситуацию, дублируя пути внутри имен вместо использования существующей древовидной структуры.
Пожалуйста, обратитесь к:
Не используйте селекторы идентификаторов в CSS: http://screwlewse.com/2010/07/dont-use-id-selectors-in-css/
Не использовать идентификаторы в селекторах CSS ?: http://oli.jp/2011/ids/
Это хорошо подытоживает мое мнение! Используйте класс и используйте идентификатор только в качестве селектора, когда это необходимо. Я покопаюсь в книге, чтобы узнать, есть ли какие-то дополнительные разъяснения по этому поводу ... если нет, я могу даже написать авторам по электронной почте