Использование идентификаторов элементов / имен классов поверх других селекторов CSS

Question

До какой степени я должен пытаться использовать другие селекторы CSS вместо идентификаторов элементов / имен классов или наоборот.

Например: body > header nav ul+ul { ... }, когда я мог бы просто сделать #socialnav { ... } для достижения того жевещь.

Пример HTML-кода (очевидно, в другом месте кода есть заголовки с дочерними навигационными элементами):

<header>
    <nav>
        <ul>...</ul>
        <ul....</ul>
    </nav>
</header>

Каков консенсус по этому вопросу?Я имею в виду, я нахожу это управляемым, используя CSS-селекторы, но есть ли недостаток?

Answer 1

Ваш первый руководящий принцип должен состоять в том, чтобы сохранить семантику разметки . Ваша разметка выше является отличным примером этого - вы используете теги header, nav и ul семантически значимым образом.

Ваш второй руководящий принцип должен поддерживать разделение интересов (например, содержание и представление). Если добавление имен классов или идентификаторов в вашу разметку семантически ничего не делает для вас, и вы можете создавать селекторы CSS без них, тогда вам следует избегать добавления дополнительного шума к разметке.

Иногда, однако, имена классов и идентификаторы очень полезны (не только в CSS, но и в JavaScript), поэтому они имеют свое место. Просто не прибегайте к ним, если они не нужны и, следовательно, добавляют ненужный беспорядок в вашу разметку.

Answer 2

Это зависит от ваших предпочтений.

Я считаю, что не стоит использовать body > header nav ul+ul, потому что небольшое изменение в структуре вашего документа, и вам придется переписать CSS-селектор.

Используйте .classselectors и #id-selectors для элементов, которые не являются невероятно важной частью основного документа, и используйте #one-special-item > ul > li > a:hover span для выбора более конкретных элементов.

Answer 3

Использование идентификаторов и классов в качестве селекторов намного быстрее, чем использование обычных селекторов CSS.Некоторые также утверждают, что вы должны использовать ТОЛЬКО классы, потому что они поддерживают многократное использование в ваших таблицах стилей.

Вот действительно хорошая статья об объектно-ориентированном CSS: http://coding.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/

Answer 4

Вы должны написать свои таблицы стилей как наборы правил для вашего сайта.

• Если вы пишете стиль, который вы хотите работать с одним конкретным фрагментом контента, то онХорошая практика - ссылаться на идентификатор этого элемента.

• Если вы пишете стиль, который является частью вашего общего внешнего вида сайта, то он должен быть написан для ссылки на тэги и / или классыкак можно больше.

Будут времена, когда фактический HTML-код таков, что будет трудно следовать этим правилам, но если вы попытаетесь придерживаться этого в целом, то вы 'все будет хорошо.Вам также может понадобиться изменить свои правила, если вам нужна поддержка старых браузеров (кашель, IE, кашель) , которые не поддерживают все функции CSS, которые вы обычно хотите использовать.

Так что да, я бы сказал, что то, как вы это сделали в вопросе, является рекомендуемым подходом.

Answer 5

Обычно я стараюсь избегать селекторов идентификаторов в CSS.

Мне гораздо легче иметь дело с классами, чем с использованием идентификаторов.

Идентификаторы могут вызвать проблемы в дальнейшем, еслиразметка используется в приложении на стороне сервера, таком как ASP.NET, где идентификаторы отображаются как нечто отличное от того, как они отображаются в разметке.

Однако селекторы идентификаторов имеют приоритет над селекторами классов:

http://jsfiddle.net/wcLrF/