Optimize CSS code

Question

There are more than 2000 thousand lines of such code:

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;}

I want to optimize CSS and apply background-repeat: repeat; once so as not to repeat to each code. I want to note that " .post- " is a publication-post and I have to manually set the background for the publications I need in the CSS file. How would the code look right?

Inquisitor Inquisitor 1,551 1 golden mark 2 silver marks 11 bronze marks · Accepted Answer · 2019-01-28T09:54:32

If a:

1) classes by definition are different AND

2) a selector of the form *[class^="post-"] {...} cannot be used (for example, you have, besides the necessary elements, some that cannot be touched) And

3) The x-path for these elements is also different (i.e., set the style for them and only for them by specifying something like body .content .topic > .post-container > .post-header + div + div > div:first-child not allowed)

then all you can do is optimize the constructions for each post separately by combining the background-image and background-repeat properties to the common background property. In short it will be.

Inquisitor Inquisitor 1,551 1 golden mark 2 silver marks 11 bronze marks · Answer 2 · 2019-01-25T13:18:53

It is possible, if the class cannot be added to each picture, but the classes or IDs have a common prefix, use the attribute selector:

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

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

For specificity (you never know, you have not only the necessary blocks have a class with the same prefix), you can specify a more specific selector, such as

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

@ The Inquisitor has corrected the question, and then something is not the answers you need.

Andrey Ivasko Andrey Ivasko 314 1 silver mark 8 bronze marks · Answer 3 · 2019-01-25T12:09:22

add class like bg-repeat

Where

 .bg-repeat {background-repeat:repeat;}

Keeplod keeplod 134 10 bronze marks · Answer 4 · 2019-01-25T12:10:00

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

You say that ID is different, ID is indicated by "#" Example: # post-64403

Through "." as your class indicates Example: .post-64403

It would be more correct for three pictures to give one class for example .post-777

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

and the code in the css will be

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

@ Keeplod Rightly, these are classes (in reality, these are post posts) -> .post-12378 .post-25371 .post-64403 {background-repeat:repeat;} .

Optimize CSS code

4 answers 4

More articles: