Повторное использование классов в CSS на основе идентификатора

Question

У меня есть CSS-файл на основе идентификатора, где я заметил, что в основном повторяется. Что я хотел бы сделать, это указать, что элемент с идентификатором следует определенному классу + некоторые другие правила. Например: я бы хотел, чтобы для идентификатора id1 были применены все свойства класса LinkButton, а также значение back-color: green. Есть ли способ сделать это в файле CSS? Есть ли лучший способ сделать то, на что я смотрю?

Answer 1

Вы можете указать несколько селекторов для данного набора свойств, например:

.LinkButton , #id1 { color: red; border: solid 1px blue; } /* Both get these */
#id1 { back-color: green; } /* Adding rules */

Он также может переопределить любое из свойств, если вам нужно:

.LinkButton , #id1 { color: red; back-color: red; } /* Both get these */
#id1 { back-color: green; } /* Changing rules */

Или вы даете элементу класс и идентификатор:

<div id="id1" class="LinkButton ">

Answer 2

Нет необходимости работать с таблицами стилей на основе идентификаторов. Избегать повторения - это точно для чего существуют классы. Почему бы не использовать классы вместо идентификаторов? Они гораздо более гибкие и ничего не убирают. (Вы по-прежнему можете выбирать целевые элементы.)

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

<span class="info extrabig highlight"> Important hint </span>

если у вас есть конкретный элемент, которому нужны действительно особые правила, тогда присвойте ему класс, названный в честь его идентификатора:

 <span id="really_special" class="id_really_special info extrabig highlight">

и определите уникальные свойства элемента в классе .id_really_special.

Идентификаторы для доступа к элементам через DOM IMO. Стиль действительно должен быть оставлен на уроки.