Оптимизировать CSS код

104
31 августа 2019, 17:30

Есть более 2000 тыс. строк такого кода:

body .post-12378{background-image: url("site.ru/images/gdijkn.gif")!important; background-repeat:repeat;}    
body .post-25371{background-image: url("site.ru/images/xcerui.gif")!important; background-repeat:repeat;}    
body .post-64403{background-image: url("site.ru/images/nmcdfw.gif")!important; background-repeat:repeat;} 

Хочу оптимизировать CSS и применить background-repeat:repeat; один раз, чтобы не повторять к каждому коду. Хочу заметить, что ".post-" это публикация-пост и мне приходится в ручную в CSS файле, для нужных мне публикаций прописывать background. Как правильно будет выглядеть код?

Answer 1

Если:

1) классы по определению разные И

2) селектор вида *[class^="post-"] {...} применять нельзя (например, у вас помимо нужных элементов присутствуют такие, которые трогать нельзя) И

3) x-путь для этих элементов тоже разный (т.е., задать стиль для них и только для них путем указания чего-то наподобие body .content .topic > .post-container > .post-header + div + div > div:first-child нельзя),

тогда все, что вы можете сделать, это оптимизировать конструкции для каждого поста отдельно путем объединения записи свойств background-image и background-repeat в общее свойство background. Короче будет.

Answer 2

Можно, если класс к каждой картинке добавлять не получается, но классы или ID имеют общий префикс, использовать селектор атрибутов:

body *[class^="post-"] {background-repeat:repeat;}
body *[ID^="post-"] {background-repeat:repeat;}

данная запись означает применить стиль всем элементам, чей класс|ID НАЧИНАЕТСЯ c "post-".

Для специфичности (мало ли, у вас не только нужные блоки имеют класс с таким же префиксом) можно указать более специфичным селектором, типа

body .post-content div[class^="post-"] {background-repeat:repeat;}
Answer 3

добавить класс типа bg-repeat

где

.bg-repeat {background-repeat:repeat;}
Answer 4
.post-12378 .post-25371 .post-64403 {background-repeat:repeat;}

Ты говоришь что ID разные, ID указывается через "#" Пример: #post-64403

Через "." как у тебя указывается class Пример: .post-64403

Правильнее будет трем картинкам дать один класс например .post-777

<img class="post-777" src="картинка 1">
<img class="post-777" src="картинка 2">
<img class="post-777" src="картинка 3">

и код в css будет

.post-777 {background-repeat:repeat;}

READ ALSO
Стилизация reCaptcha. Возможно ли?

Стилизация reCaptcha. Возможно ли?

Есть WPВывожу формы с помощью Contact Form7

126
Как сделать такой элемент в верстке?

Как сделать такой элемент в верстке?

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

105
Webpack 4 - Как импортировать файлы, если их много?

Webpack 4 - Как импортировать файлы, если их много?

Коллеги, есть такая простая Webpack сборка

103
Задержка между кликами JavaScript

Задержка между кликами JavaScript

Есть простой слайдер, при нажатии на кнопку next включается следующая картинкаМожно ли как-то сделать задержку между кликами чтоб новая картинка...

131