Reduce CSS Styles

Tags: , , ,



Is there a way to make the following CSS code more compact and clean?

.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

There is no way to make that CSS more compact using pure CSS. However, you can use a framework/plugin such as SASS/SCSS or Less to do so. Frameworks/plugins are the only options, as the CSS you have currently giving different values to different elements within elements with different classes.



Source: stackoverflow