Ниже приводиться перевод статьи от Alen Grakalic : CSS do’s and dont’s Part 1: CSS Selecting

Выбор элемента и назначение ему правил и свойств является основой процесса кодинга на CSS. Если вы не укажите элемент, вы не сможете назначить ему стиль, так? Эта статья поможет вам исправить ошибки, которые вы, возможно, допускаете, а так же, мы попытаемся ответить на некоторые вопросы, связанные с правильным использованием селекторов.

Как вы знаете, существует несколько видов селекторов. Давайте обсудим подробнее практическое применение некоторых из них.

Классы (class) и идентификаторы (id)

<p class="signature">...</p>
<ul id="nav">...</ul>

Не используйте описательные названия для классов, такие как "red", "blueDot" или "roundedTop". Я избегаю даже таких названий, как "left", "right" или "large". Почему? Представьте себе, что вы верстаете 2х колоночный макет. Класс первой колонки вы назвали "left" , а второй "right". И вдруг вам необходимо поменять их местами. А ваш клиент решил, что синяя гамма его уже не устраивает, и он попросил вас ее сменить. Тут вы застрянете с названиями типа "blueSmall"…

Название класса должно обозначать назначение данного элемента, цель содержащего его контента, но не описание свойств. Т.е. вместо id="left" стоит использовать class="main" или даже class="primary".

Старайтесь использовать одно и то же название класса для нескольких элементов, в различных ситуациях. Название не должно быть привязано только лишь к одному элементу. Вы можете использовать class="first"для первого пунткта меню также, как и для первого абзаца текста.

Решая назначить элементу class или id, определите, является ли этот элемент действительно уникальным. Если да, используйте id. Если элемент не уникален используйте class. Это избавит вас от тонны элементов с идентификаторами, если id используется, лишь для назначения стиля.

Несколько классов

<button class="image submit">

Назначение элементу нескольких названий классов поможет вам оптимизировать css код и избежать сложных названий в коде документа.
Я часто использую class="image" для техники замены изображения текстом. Этот класс определяет общие правила для элементов содержащих изображения, которые необходимо заменить текстом. Добавляя еще один класс к такому элементу, я прописываю в нем уже более конкретные правила: путь к изображению, ширину и высоту и т.д.

Тип селектора

Я всегда указываю тип селектора в начале css кода, чтобы установить или обнулить его свойства по умолчанию для основных элементов. Лично я не верю в преимущества универсальных селекторов (* {…}) (если только они не используются дальше по иерархии). Если вы решили использовать "обнуление" значений по умолчанию, то советую это делать как Eric Meyer.

Селекторы потомков

Используйте их! Эта техника избавит вас от назначения каждому элементу по классу. Я всегда использую, например, #main p a, чтобы назначить ссылке новое свойство, которое отличается от глобальных свойств селектора A.

Комбинирование селекторов

#main h2.title span

Использование комбинаций разных селекторов позволит вам назначить свойство конкретному элементу документа.

Мой принцип: я стараюсь определить самый нижний в иерархии уровень, который не имеет повторяющихся элементов. Назначаю этому блоку класс и, как в примере выше, прописываю правила нужному элементу с помощью комбинирования селекторов. Если вы используете тег H2 только для заголовков класса title, и он содержит только один (или несколько индентичных) элементов span, вы напрямую можете назначить для span нужные свойства без надобности определения для него отдельного класса.

Кроссбраузерная и кроссплатформенная поддержка

Не все виды селекторов поддерживаются существующими браузерами, т.е. вам придется продумать новые решения для подобных ситуаций. Например, псевдо-класс :first-child не поддерживается в IE6. Но пользователей этого браузера еще достаточно много, поэтому нужно позаботиться, чтобы и они могли видеть ваш сайт без ошибок.

Выводы

Абсолютное "Да":

1. Придумывая имя для класса, помните, что название должно описывать назначение этого элемента, а не его свойства.
2. Используйте несколько названий классов, применяя их для разных элементов.
3. Используйте тип селектора, чтобы установить/сбросить  правила по умолчанию. Если вы решили обнулить стили, используйте технику от  Eric Meyer.
4. Используйте несколько классов для одного элемента, чтобы оптимизировать CSS код.
5. Комбинируйте селекторы, чтобы назначать свойства любым элементам в структуре.

Абсолютное "Нет":

1. Не используйте описательные названия для классов "red", "blueDot" и т.д.
2. Не используйте сложные названия для классов или id, например, как "sideIntroSecondaryContentTop".
3. Не используйте универсальные селекторы для сбрасывания свойств по умолчанию всего документа.
4. Избегайте селекторов, не поддерживаемых другими браузерами.
5. Избегайте лишних классов и id в коде.