2
\$\begingroup\$

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;
    }
}
\$\endgroup\$
3
  • 2
    \$\begingroup\$ I don't see anything Sass specific here, is this just the compiled CSS? \$\endgroup\$ – cimmanon Jan 23 '14 at 18:36
  • \$\begingroup\$ It's SCSS, so it is handled slightly differently than normal CSS. \$\endgroup\$ – Dillmo Jan 23 '14 at 19:44
  • \$\begingroup\$ This is css? its not written in scss at all. scss would look like this for example: #footer #footer_links { list-style: none; li { display: inline-block;}} \$\endgroup\$ – aaronmallen Jun 27 '14 at 19:42
1
\$\begingroup\$

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 first media query.

Source: http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu

On 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.

\$\endgroup\$
2
  • \$\begingroup\$ Thanks for the answer. I'm relatively new to responsive design, so your suggestions are a great help. \$\endgroup\$ – Dillmo Jan 23 '14 at 19:43
  • \$\begingroup\$ This site has a great summary on various aspects of responsive design: bradfrostweb.com/blog/post/… \$\endgroup\$ – cimmanon Jan 23 '14 at 19:57
2
\$\begingroup\$

You can DRY your use of @font-face using this mixin see on codepen but you'll get better results using compassor bourbon, etc...

// Use variables instead names (name that vars as you wish, because I don't know which of them are the most used)
$primary-font: baskerville_old_faceregular;
$secondary-font: copperplate_gothic_boldRg;
$tertiary-font: copperplate_gothic_lightRg;

// -------------------------------------
//   Mixins
// -------------------------------------

@mixin font-face($font-name, $font-family-name) {
  font-family: $font-family-name;
  src: url('#{$font-name}-webfont.eot');
  src: url('#{$font-name}-webfont.eot?#iefix') format('embedded-opentype'),
       url('#{$font-name}-webfont.woff') format('woff'),
       url('#{$font-name}-webfont.ttf') format('truetype'),
       url('#{$font-name}-webfont.svg##{$font-name}') format('svg');
  font-weight: normal;
  font-style: normal;
}

@include font-face(baskvill, $primary-font );
@include font-face(coprgtb, $secondary-font );
@include font-face(coprgtl, $tertiary-font );

Output result for first mixin:

@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#sample-font") format("svg");
  font-weight: normal;
  font-style: normal;
}

As @font-face you can mixin other things in your code like this:

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

Turning it into this: (With the same output)

@mixin background-image($image-name, $image-file-format) {
  background: url(/assets/#{$image-name}.#{$image-file-format}) no-repeat center center fixed;
  background-size: cover;
}

.home {
  @include background-image(PaperBackground, png)
}

.find_me {
  @include background-image(Mill, png)
}

.wholesale {
  @include background-image(KraftPaper, png)
}

Other things you may want to change for best results.

Use rem or em instead px

Search info about this for some properties

Use variables for colors

Instead of repeating your primary color 9999999 times use something like this:

$black: black;
$navy-blue: #000080;
$mexican-red: #9b3d3d;

$primary-color: $navy-blue;
$secondary-color: $mexican-red;

Create some variables to identify primary, and secondary color (and if later you decide to change the primary color of whole website, it will be so easy as change navy-blue with the color you want)

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.