I've been working on a website and Rails and am fairly proud of my HTML semantics. However, my CSS code has become enormous in size, which is largely unnecessary for such a small website.How could I shorten my code, make it easier to understand, and remove redundancy? I would prefer to have an automated process for this. If it helps at all, I do my editing in Vim, so I am happy with solutions that use that.Here is my SCSS:@font-face {    font-family: 'baskerville_old_faceregular';    src: url('baskvill-webfont.eot');    src: url('baskvill-webfont.eot?#iefix') format('embedded-opentype'),         url('baskvill-webfont.woff') format('woff'),         url('baskvill-webfont.ttf') format('truetype'),         url('baskvill-webfont.svg#baskerville_old_faceregular') format('svg');    font-weight: normal;    font-style: normal;}@font-face {    font-family: 'copperplate_gothic_boldRg';    src: url('coprgtb-webfont.eot');    src: url('coprgtb-webfont.eot?#iefix') format('embedded-opentype'),         url('coprgtb-webfont.woff') format('woff'),         url('coprgtb-webfont.ttf') format('truetype'),         url('coprgtb-webfont.svg#copperplate_gothic_boldRg') format('svg');    font-weight: normal;    font-style: normal;}@font-face {    font-family: 'copperplate_gothic_lightRg';    src: url('coprgtl-webfont.eot');    src: url('coprgtl-webfont.eot?#iefix') format('embedded-opentype'),         url('coprgtl-webfont.woff') format('woff'),         url('coprgtl-webfont.ttf') format('truetype'),         url('coprgtl-webfont.svg#copperplate_gothic_lightRg') format('svg');    font-weight: normal;    font-style: normal;}@media screen and (min-width: 1024px) {    @media screen and (min-width: 1366px) {        .sign {            position: absolute;        }        #post {            position: absolute;            top: 0px;            left: 3.55%;            width: 1.5%;            height: 960px;        }        #holder {            position: absolute;            top: 0px;            left: 2.2%;            width: 44.3%;            z-index: 1;        }        #board {            position: absolute;            left: 7%;            top: 17.7%;            width: 36.9%;        }        #logo {            position: absolute;            left: 9.25%;            top: 24%;            width: 30.55%;        }    }    @media screen and (min-width: 1200px) and (max-width: 1300px) {        .sign {            position: absolute;        }        #post {            position: absolute;            top: 0px;            left: 3.55%;            width: 1.5%;            height: 990px;        }        #holder {            position: absolute;            top: 0px;            left: 2.2%;            width: 44.3%;            z-index: 1;        }        #board {            position: absolute;            left: 7%;            top: 10.7%;            width: 36.9%;        }        #logo {            position: absolute;            left: 9.25%;            top: 15.5%;            width: 30.55%;        }    }    @media screen and (min-width: 1024px) and (max-width: 1199px) {        .sign {            position: absolute;        }        #post {            position: absolute;            top: 0px;            left: 3.55%;            width: 1.5%;            height: 865px;        }        #holder {            position: absolute;            top: 0px;            left: 2.2%;            width: 44.3%;            z-index: 1;        }        #board {            position: absolute;            left: 7%;            top: 9.2%;            width: 36.9%;        }        #logo {            position: absolute;            left: 9.25%;            top: 14%;            width: 30.55%;        }    }    .home {        background: url(/assets/PaperBackground.png) no-repeat center center fixed;        background-size: cover;    }    .find_me {        background: url(/assets/Mill.png) no-repeat center center fixed;        background-size: cover;    }    .wholesale {        background: url(/assets/KraftPaper.png) no-repeat center center fixed;        background-size: cover;    }    #topnav {        list-style: none;        float: right;        margin-right: 4.5%;        margin-top: 5.2%;    }    #topnav li {        display: inline-block;        padding: 0 0.5em;        font-family: copperplate_gothic_boldRg;        font-size: 18px;    }    #topnav li a {        text-decoration: none;        color: black;    }    #topnav li a:hover {        text-decoration: underline;    }    #info {        padding-right: 8%;        padding-left: 650px;        padding-top: 60px;        float: right;        width: 500px;        font-family: baskerville_old_faceregular;        font-size: 23px;        font-weight: 600;        text-align: center;    }    @media screen and (min-width: 1200px) and (max-width: 1365px) {        #sidenav {            position: absolute;            top: 55%;            list-style: none;        }    }    @media screen and (min-width: 1024px) and (max-width: 1199px) {        #sidenav {            position: absolute;            top: 42%;            list-style: none;        }    }    @media screen and (min-width: 1366px) {        #sidenav {            position: absolute;            top: 67.5%;            list-style: none;        }    }    #sidenav {        left: 7%;    }    #sidenav li {        padding-bottom: 9%;        font-family: copperplate_gothic_boldRg;        font-size: 18px;    }    #sidenav li a {        color: black;        text-decoration: none;    }    #sidenav li a:hover {        text-decoration: underline;    }    @media screen and (min-width: 1200px) {        #examples {            float: right;            margin-right: 7.5%;             margin-top: 10.5%;            text-align: center;        }        #examples img {            width: 150px;        }        #examples td {            padding-left: 70px;            padding-right: 70px;        }    }    @media screen and (max-width: 1199px) {        #examples {            float: right;            margin-right: 7.5%;             margin-top: 10.5%;            text-align: center;        }        #examples img {            width: 150px;        }        #examples td {            padding-left: 25px;            padding-right: 25px;        }    }    #examples img {        box-shadow: 6px 6px 20px 0;    }    #examples p {        font-family: baskerville_old_faceregular;        font-size: 20px;        font-weight: 700;    }    #footer {        text-align: center;    }    #footer #footer_links {        list-style: none;        margin-bottom: 0;    }    #footer #footer_links li {        display: inline-block;        font-family: copperplate_gothic_boldRg;        font-size: 20px;    }    #footer #footer_links li a {        margin-left: 30px;        margin-right: 30px;        color: black;        text-decoration: none;    }    #footer #footer_links li p {        margin-left: 30px;        margin-right: 30px;    }    #footer #footer_links li a:hover {        text-decoration: underline;    }    #footer #footer_links li img {        width: 25px;        margin-right: 2px;    }    #footer #footer-contact {        font-family: baskerville_old_faceregular;        font-size: 18px;        margin-top: 0;        font-weight: 700;    }    @media screen and (min-width: 1200px) {        .home #footer {            position: relative;            margin-top: -5px;            height: 18px;            clear: both;            right: 200px;            float: right;        }    }    @media screen and (max-width: 1199px) {        .home #footer {            position: relative;            margin-top: 20px;            height: 18px;            clear: both;            right: 100px;            float: right;        }    }    .find_me #footer {        position: absolute;        top: 860px;        right: 150px;    }    @media screen and (min-width: 1200px) {        .wholesale #footer {            position: absolute;            top: 860px;            right: 300px;        }    }    @media screen and (max-width: 1199px) {        .wholesale #footer {            position: absolute;            top: 860px;            right: 160px;        }    }    #contact {        position: absolute;        right: 15%;        top: 180px;        width: 300px;    font-family: baskerville_old_faceregular;    }    #contact ol {        list-style: none;        text-align: center;    }  #contact ol li h3 {    font-size: 26px;  }  #contact ol li h4 {    font-size: 24px;  }  #contact ol li p {    font-size: 22px;  }  #map {    position: absolute;    left: 400px;    top: 500px;  }    #in_the_shop {        position: absolute;        left: 60%;        top: 100px;    }    #shop_images {        position: absolute;        right: 5%;        top: 450px;    }    @media screen and (min-width: 1200px) {        #shop_images img {            width: 170px;        }    }    @media screen and (max-width: 1199px) {        #shop_images img {            width: 130px;        }    }    #shop_images tr td {        padding-left: 17px;        padding-right: 17px;    }    #contact_header, #mobile_nav, #leaf_1, #leaf_2, #find_me, #mobile_find_me_footer, #mobile_map, #mobile_wholesale, #wholesale_mobile_catalog {        display: none;    }}@media screen and (min-width: 768px) and (max-width: 1023px) {    .sign {        position: absolute;    }    #post {        position: absolute;        top: 0px;        left: 3.55%;        width: 1.5%;        height: 1000px;    }    #holder {        position: absolute;        top: 0px;        left: 2.2%;        width: 44.3%;        z-index: 1;    }    #board {        position: absolute;        left: 7%;        top: 8%;        width: 36.9%;    }    #logo {        position: absolute;        left: 9.25%;        top: 11%;        width: 30.55%;    }    #topnav {        list-style: none;        float: right;        margin-right: 4.5%;        margin-top: 5.2%;    }    #topnav li {        display: inline-block;        padding: 0 0.5em;    }    #sidenav {        position: absolute;        left: 10.37%;        top: 30%;        list-style: none;    }    #sidenav li {        padding-bottom: 19%;    }    #examples {        float: right;        margin-right: 7.5%;         margin-top: 25%;        text-align: center;    }    #examples img {        width: 150px;    }    #examples td {        padding-left: 25px;        padding-right: 25px;    }    #contact_header, #mobile_nav, #leaf_1, #leaf_2, #find_me, #mobile_find_me_footer, #mobile_map, #mobile_wholesale, #wholesale_mobile_catalog {        display: none;    }    #info {        padding-right: 5%;        padding-left: 600px;        padding-top: 60px;        float: right;        width: 400px;    }    #footer #footer_links {        list-style: none;    }    #footer #footer_links li {        display: inline-block    }    .home #footer {        position: relative;        margin-top: 20px;        height: 18px;        clear: both;        right: 130px;        float: right;    }}
Quickly fixing unmaintainable SCSS code in Rails
optimization;ruby on rails;sass
You may want to look at Compass for generating your font-face information.Your media queries are a bit excessive here.  Other than your font-face block, there's not a spec of code that exists outside of a media query.The absence of support for media queries is in fact the rst media query.Source: http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibuOn top of that, you're failing to make use of cascade.  Compare:@media screen and (min-width: 1200px) and (max-width: 1365px) {    #sidenav {        position: absolute;        top: 55%;        list-style: none;    }}@media screen and (min-width: 1024px) and (max-width: 1199px) {    #sidenav {        position: absolute;        top: 42%;        list-style: none;    }}@media screen and (min-width: 1366px) {    #sidenav {        position: absolute;        top: 67.5%;        list-style: none;    }}To:@media screen and (min-width: 1024px) {    #sidenav {        position: absolute;        list-style: none;        top: 42%;    }}@media screen and (min-width: 1200px) {    #sidenav {        top: 55%;    }}@media screen and (min-width: 1366px) {    #sidenav {        top: 67.5%;    }}Using values like 1024px and 1200px in your media queries indicates to me that you're designing for specific devices, rather than your content.  Consider the following code:$breakpoint-medium: 45em;$breakpoint-two-column: 60em;header {    // use the small logo}@media (min-width: $breakpoint-medium) {    header {        // use the bigger logo    }}@media (min-width: $breakpoint-two-column) {    // code to make a 2-column layout}There's quite a bit of code smell regarding your constant adjustments to things like positioning/margins, especially since you're using percentages (42% -> 55% -> 67.5%).  It smells like the fixed-width designs of yesteryear.  I can't comment any further here without seeing the impact it has on the layout.You have quite a few overqualified selectors (eg. #footer #footer_links li img vs #footer_links img).  Always choose the shortest possible selector to get the job done.