Работа с повторяющимися селекторами: размещение элементов вместе или использование классов?

Question

Допустим, я должен повторить синий цвет на своей веб-странице, какой самый эффективный, экономящий время и разумный способ сделать это?

Примеры:

1. Этот пример может немного испортить мой файл css.

#header, #content, #footer {
  color: blue;
}

#header {
  (other properties)
  (other properties)
  (other properties)
}
#content {
  (other properties)
  (other properties)
}
#footer {
  (other properties)
  (other properties)
  (other properties)
}

2. В этом примере я в конечном итоге буду чаще изменять мой HTML-файл.

CSS:

.default-color { 
  color: blue

}

#header {
  (other properties)
  (other properties)
  (other properties)
}
#content {
  (other properties)
  (other properties)
}
#footer {
  (other properties)
  (other properties)
  (other properties)
}

html:

<div id="header" class="default-color">
  (content here)
</div>

<div id="content" class="default-color">
  (content here)
</div>

<div id="footer" class="default-color">
  (content here)
</div>

Answer 1

Я бы предпочел первую форму.Добавление класса «default-color» начинает переходить на территорию добавления стиля в вашу разметку, и, как правило, более гибко держать их как можно более разделенными.С другой стороны, если у вас есть семантическое имя класса, которое вы можете добавить ко всем, что имеет смысл, тогда это может сработать.

В противном случае, если вы действительно просто хотите "default "color, вы можете указать его для элементов html или div в вашем css и просто переопределить его с более конкретными классами, где вы не хотите, чтобы элементы отображались в качестве цвета по умолчанию.

Answer 2

Один из способов сделать это для стандартных совместимых браузеров - использовать !important.

Пример:

div
{
   color: blue !important;
}

Answer 3

Подумайте над созданием таблиц стилей, используя SASS .Это позволит вам управлять дублированием несколькими способами:

Самое простое - определить переменную для вашего синего цвета и не беспокоиться о необходимости многократного обновления:

$color-corporate-base: #009
#header  { color: $color-corporate-base; }
#content { color: $color-corporate-base; }

Этоскомпилируется с обычным CSS, помещая значения цвета в том месте, на которое они ссылаются в вашем документе:

#header  { color: #009; }
#content { color: #009; }

Вы можете использовать «mixins» для включения правил в различные селекторы:

@mixin bold-color {
  color: blue;
  font-weight: bold;
}

#header {
  @include bold-color;
  background: black;
}
#content {
  @include bold-color;
  background: white;
}

Это скомпилируется в обычный CSS с двумя включенными правилами стиля в каждом селекторе.Конечно, это создает дублирование:

#header {
  color: blue;
  font-weight: bold;
  background: black;
}
#content {
  color: blue;
  font-weight: bold;
  background: white;
}

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

Есть классная новая функция Sass, которая решает эту проблему.Это называется "наследование селектора".Проверьте это:

.bold-color {
  color: blue;
  font-weight: bold;
}

#header {
  @extend .bold-color;
  background: black;
}
#content {
  @extend .bold-color;
  background: white;
}

На первый взгляд, это похоже на миксины, но посмотрите на вывод CSS:

.bold-color, #header, #content {
  color: blue;
  font-weight: bold;
}
#header { background: black; }
#content { background: white; }

Это позволяет вам организовать ваши селекторы в таблице стилей Sassесли хотите, и , вы получите оптимизированный выход, который хотите!

Answer 4

Я бы тоже предпочел первую версию.Но помните, что вы также можете использовать несколько классов в одном элементе.Так что вы могли бы вы что-то вроде:

.blue {
    color: #00F;
}

.bold {
    font-weight: bold;
}

<div class="blue bold">Text</div>