Насколько детально необходимо группировать идентичные свойства?

Question

[blindtownblues]

Например, 1 свойство примененено для 20 селекторов. Какой Вариант выбрать:
1.

blockquote, cite, h1, h2, #feedback, #feedback p, #news, #digest, #events, #footer, .player-text, .slider-caption, .questions, .answers, .about, .email, .twitter, .comments, .menu, .sidebar {
    text-align: center;
}

2. Лучше это одно свойство прописать во всех селекторах по отдельности?
Если правдив первый вариант, то где такие групповые селекторы лучше размещать - в начале кода, в конце или другое расположение? Существуют ли правила группировки групповых селекторов и их размещения? Если да, то чно можно прочесть по теме? Спасибо.

Comments

[Сергей delphinpro]

Группировать нужно не по селекторам, а по смыслу.
Компьютеру пофиг, как написан код.
А разработчику, который будет этот код потом читать — очень даже не пофиг.

Как вообще в голове рождаются такие странные вопросы?..

[blindtownblues]

Сергей, группировать по смыслу - это значит только те селекторы, которые относятся к одому элементу, блоку или явно визуально идентичны? Объясните, пожалуйста, что Вы имели в виду. Спасибо.

P.S. А вопрос родился после чтения статьи о группировке. Вот и задался, насколько "хардкорно" нужно эти самые селекторы группировать)

[Сергей delphinpro]

blindtownblues, по смыслу, значит по смыслу.
Например общие стили для заголовков.
Общий типографический отступ для элементов разметки текста.
Клирфиксы
Общие стили для разных кнопок
Ну и т.д.

Вообще ваш вариант №1 я допускаю только в двух (трёх) случаях:
1. сброс/нормализация стилей
2. инструкция @extend препроцессора

%clearfix { clear: both; ... }
%btn { font-size: 20px; padding: 0.5em; }

.news-container { @extend %clearfix; }
.feedback-container { @extend %clearfix; }

.btn { @extend %btn; }
.btn-success {
  @extend %btn;
  background: green;
}
.btn-warn {
  @extend %btn;
  background: red;
}

Так мы вообще убиваем двух зайцев. Код структурирован, описание блока не разбросано по разным концам файла. Вместе с тем на выходе в css получим объединенный селектор, что, возможно, даст выигрыш в размере готового файла стилей.

Третий случай — частный, группировка общих свойств псевдо- элементов/классов.

Answer 1

[kulaeff]

Зачем писать для всех селекторов какое-то правило, если его можно написать один раз? Разумеется первый вариант лучше. Размещать можно где угодно, зависит от ваших целей и задач, но обычно такие длинные записи пишут в начале или вообще в отдельном файле, типа normalize.css.

Comments

[Милок Мурлыка]

Вы СЕРЬЕЗНО??
Вам правда удобно читать такую кашу селекторов?

[Сергей delphinpro]

Не порите чушь

[kulaeff]

Хм, вроде еще не пятница, а уже туплю. На самом деле я прочитал вопрос частично, увидел, что там blockquote, cite, h1, h2, не увидел там других селекторов и подумал, что это что-то типа normalize.css, где прописывается, например, всем элементам box-sizing: border-box. Подумал, что имеется ввиду что-то подобное, потому и дал такой ответ. В общем мой ответ справедлив, но не для ситуации ТС. Для ТС правильным будет вариант 2. Пардон за недоразумение.