Как сократить описания классов?

Question

[Алексей]

Часто сталкиваюсь с ситуацией, когда нужно описать несколько классов примерно с одними параметрами и применить для них один стиль. Например:

.movie:hover, .voyti:hover, .registraciya:hover {background: #CCC}

Может есть какой-то способ написать несколько классов и для них всех указать псевдокласс, что-то вроде:

(.movie, .voyti, .registraciya):hover {background: #CCC}

В примере это не имеет особого смысла, но на практике бывает получаются огромные строки с перечислением классов.

Comments

[Котик Антон]

Названия классов транслитом (voyti, registraciya) -is very very h*jovo

[Алексей]

27cm: Какая разница какое имя класса?

[Lynn «Кофеман»]

Для этого придумали препроцессоры. Stylus, Sass, Less и т.п.

Answer 1

[Максим Е]

а что вам мешает просто для всех нужных элементов добавить еще один класс, в котором опишите общее оформление CSS?
и получится что-то типа

.class1 {
background: #CCC; }

у элементов html так:

<div class="class1 movie">
<!--содержимое блока-->
</div>

Answer 2

[GoodProject]

Нельзя называть классы транслитом, это упоминается при изучении CSS - это плохой тон, вот и всё, вы можете как хотите называть классы, но верстальщики вас не будут уважать, и будут ломать себе лицо фейспалмами, это просто совет, делайте как хотите.

Если нужно указать 1 значение нескольким классам то это нужно делать через запятую, например нужно указать цвет для тега a и span:

a,
span {
color:red;
}

Answer 3

[Виталий Инчин ☢]

Я выношу подобный шлак в отдельные классы. Именую их типа .__cs_name.

.__cs_colCCC:hover{
  background: #CCC;
}

/* Ну или */

.__cs_gray{
   background: #CCC;
}

Но не всегда можно так вот сгруппировать, вся фишка в приоритете селекторов, в том, в какой последовательности они стоят в коде.

Comments

[Максим Е]

Повторил ответ))))

[Виталий Инчин ☢]

Максим Креативный: лайкнул же :)