Уменьшить стили CSS

Question

Есть ли способ сделать следующий код CSS более компактным и чистым?

.offset-0 p.artist   {  padding-top: 165px; }   
.offset-25 img {    margin-top: -25px;      }
.offset-25 p.artist   { padding-top: 140px; }   
.offset-50 img {    margin-top: -50px;      }
.offset-50 p.artist   { padding-top: 115px; }   
.offset-75 img {    margin-top: -75px;      }
.offset-75 p.artist   { padding-top: 90px;  }   
.offset-100 img {   margin-top: -100px;     }
.offset-100 p.artist   {    padding-top: 65px;  }   
.offset-125 img {   margin-top: -125px;     }
.offset-125 p.artist   {    padding-top: 40px;  }   
.offset-150 img {   margin-top: -150px;     }
.offset-150 p.artist   {    padding-top: 15px;  }   
.offset-175 img {   margin-top: -175px;     }
.offset-175 p.artist   {    padding-top: -10px; }   
.offset-200 img {   margin-top: -200px;     }
.offset-200 p.artist   {    padding-top: -35px; }   

Answer 1

Использование CSS-переменных

.offset-0   { --pt: 165px;               }
.offset-25  { --pt: 140px; --mt: -25px;  }
.offset-50  { --pt: 115px; --mt: -50px;  }
.offset-75  { --pt:  90px; --mt: -75px;  }
.offset-100 { --pt:  65px; --mt: -100px; }
.offset-125 { --pt:  40px; --mt: -125px; }
.offset-150 { --pt:  15px; --mt: -150px; }
.offset-175 {              --mt: -175px; }
.offset-200 {              --mt: -200px; }

[class|="offset"] p.artist { padding-top: var(--pt); }
[class|="offset"] img { margin-top: var(--mt); }

Answer 2

Нет способа сделать этот CSS более компактным, используя чистый CSS.Однако вы можете использовать для этого фреймворк / плагин, такой как SASS / SCSS или Less .Фреймворки / плагины являются единственными опциями, так как в настоящее время CSS у вас есть различные значения для разных элементов в элементах с разными классами.