Я погружался в книгу SitePoint относительно CSS.
То, что поразило меня в примерах, было использование идентификатора в качестве селектора CSS.
Некоторые биты CSS-дизайна, которые я сделал, мне всегда было проще и универсальнее использовать Class в качестве селектора.
Возможно, это вещь .Net, поскольку мы не всегда имеем контроль над идентификатором элемента...
Как лучше использовать здесь CLASS или ID в качестве селектора?
Я думаю, они всегда используют id в примерах, потому что они менее двусмысленны. Вы знаете, что они говорят конкретно об одном элементе и его стилях.
В общем, эмпирическое правило состоит в том, что вы должны спросить себя: "существует ли более одного элемента, который требует того же стиля, сейчас или в любое время в будущем?", и ответ даже "возможно", затем сделайте его классом.
Не забывайте, что класс и идентификатор не являются взаимоисключающими. Ничто не мешает вам иметь обоих! Иногда это очень полезно, поскольку позволяет элементам наследовать общий стиль вместе с другими элементами одного и того же класса, а также дает вам точное управление этим конкретным элементом. Еще один удобный способ - применить несколько классов к одному и тому же объекту (да, 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:. Несколько селекторов классов теперь имеют почти универсальную поддержку браузера, поэтому используйте их!
Не забывайте, что вы можете ссылаться на элемент с идентификатором. Это может быть очень важным для доступности, среди других преимуществ. Это хорошая причина, почему для элементов макета, таких как заголовок, навигация, основной контент, нижний колонтитул, форма поиска и т.д., Вы всегда должны использовать идентификатор вместо класса (или вместе с классом).
Другим полезным ресурсом является спецификация W3C для каскадного заказа: селектора id даются в десять раз больше селекторов class. Это особенно важно, если вы планируете переопределять стили в зависимости от разных сценариев или изменений состояния. Чем более конкретным является начальный селектор, тем больше работы вы должны сделать, чтобы переопределить его в дополнительных объявлениях.
Практика зависит от "разрешения" того, что вы пытаетесь выбрать.
Я использую классы, когда хочу изменить целую переменную элементов. Идентификаторы дают мне намного более мелкозернистый контроль, который иногда необходим.
имеют высокую специфичность, что часто бывает в CSS. Чем жестче вы можете заставить CSS применять именно то, что ему нужно, тем меньше работа, которую должен выполнять создатель CSS при создании правил.
Создайте задачу и сделайте это с помощью OO - используйте классы, в которых объекты классифицируются, идентификаторы, в которых вы хотите нацеливать экземпляры, и обрабатывайте теги refs как что-то вроде интерфейсов (и будьте осторожны, когда вы это делаете!). Это лучшая практика, о которой я могу думать.
edit: и да MS действительно с CSS с ASP.NET спасибо ребятам!
Вы должны использовать "id", когда вы всегда говорите об одном (и всегда будете одиночным) seciton вашего сайта.
В принципе, это сводится к семантике.
div.header
Это говорит мне, что вы разрешаете несколько "заголовков" на вашем сайте. Возможно, это подзаголовки.
div#header
Это говорит мне, что вы говорите об одном разделе заголовка вашего макета сайта.
EDIT: вот полу-старая статья о чистом CSS-дизайне... если вы просто просматриваете примеры CSS, вы увидите, почему я использую ID: Как: Чистый дизайн CSS
Идентификаторы предназначены для однозначно идентифицирующих элементов. Классы предназначены для идентификации элемента как части класса элементов.
С практической точки зрения атрибуты id должны использоваться только по одному на документ, атрибуты класса могут использоваться более чем на одном элементе в документе.
Отметьте спецификацию W3C, а также CSS-Discuss по этой проблеме.
Я предпочитаю использовать Class в качестве селектора, поэтому я могу использовать его с более чем одним элементом на той же странице. Использование id в качестве селектора не позволяет этого, так как идентификатор должен быть уникальным.
Обратитесь к:
Не используйте идентификаторы в CSS: http://screwlewse.com/2010/07/dont-use-id-selectors-in-css/
Не используйте идентификаторы в селекторах CSS: http://oli.jp/2011/ids/
Используйте только классы, почти никогда не используйте идентификаторы, если вам не нужно беспокоиться о скорости или совместимости.
Использование идентификаторов плохо, подобно использованию глобальных переменных в коде Visual Basic. Причина в том, что идентификаторы должны быть уникальными, что вводит ненужную и плохую зависимость между различными независимыми частями вашего кода. Использование чего-то типа .page1.tab1 > .field1 лучше, потому что вам не нужно беспокоиться о уникальности поля1 внутри tab1 или уникальности tab1 внутри страницы1. С идентификаторами вы должны вести регистрацию своих идентификаторов, чтобы сохранить контроль и избегать конфликтов.
Используйте идентификаторы только в том случае, если вам нужно, например, href= '# name', или если вам требуется некоторая библиотека.