5
votes
\$\begingroup\$

I saw a sassy CSS for a rails app like this:

$std-margin: 30px;

@mixin solid-bg($color: #EEEEEE) {
  background: none repeat scroll 0 0 $color;
}

@mixin solid-border($direction, $width: 1px, $color: black) {
  @if $direction == "" {
    border: {
      color: $color ;
      width: $width;
      style: solid;
    }
  } @else {
    border-#{$direction}: {
      color: $color ;
      width: $width;
      style: solid;
    }
  }
}

html {
  font: 90%/1.3 arial,sans-serif;
  body {
    margin: $std-margin;
    .top-nav {
      text-align: center;
      width: 100%;
      .login {
        float: right;
        padding-right: 63px;
        clear: both;
      }
      a {
        text-decoration: none;
      }
    }
    .content {
      @include solid-border("");
      clear: both;
      padding: 15px;
    }
    h2 {
      margin: $std-margin;
      margin-left: 0px;
    }
    h3, .detail {
      margin: $std-margin;
    }
    #header {
      ul {
        list-style: none outside none;
        padding: 0;
        li {
          float: left;
          a {
            @include solid-bg();
            color: #0000CC;
            display: block;
            padding: 0.24em 1em;
            text-decoration: none;
          }
        }
      }
      #selected a {
        @include solid-bg(white);
        color: black;
        font-weight: bold;
        position: relative;
        top: 1px;
        @include solid-border("");
        @include solid-border('bottom', 0px);
      }
    }
    label {
      float: left;
      margin-right: 1em;
      text-align: right;
      width: 10em;
    }
    input {
      @include solid-bg(#FAFAFA);
      -moz-border-radius: 0.4em 0.4em 0.4em 0.4em;
      @include solid-border("", 1px, #DDDDDD);
      font: bold 0.95em arial,sans-serif;
      padding: 0.15em;
      width: 10em;
    }
    .field {
      padding: 5px;
      clear: both;
      input {
        width:12em;
        @include solid-border("", 1px, #006);
        @include solid-bg(#ffc);
        &:hover {
          @include solid-border("");
          @include solid-bg(#ff6);
        }
      }
      .fieldWithErrors {
        float: left;
        padding: 3px;
        input {
        @extend .field.input;
        @include solid-border("", 2px, red);
        }
      }
      .create {
        width:5em;
      }
      .submit {
        @include solid-bg(#D0DAFD);
        border: 0 none;
        cursor: pointer !important;
        display: block;
        height: 26px;
        margin: 1em;
        overflow: hidden;
        width: 69px;
      }
    }

    table {
      border-collapse: collapse;
      margin: 20px;
      text-align: left;
      width: 480px;
      font {
       family: "Lucida Sans Unicode","Lucida Grande",Sans-Serif;
       size: 12px;
      }
      th {
        @include solid-bg(#B9C9FE);
        @include solid-border('bottom', 1px, #FFFFFF);
        @include solid-border('top', 4px, #AABCFE);
        color: #003399;
        font-size: 13px;
        font-weight: normal;
        padding: 8px;
      }
      tr {
        @include solid-bg(#E8EDFF);
        &:hover td {
          @include solid-bg(#D0DAFD);
          color: #333399;
        }
        td.title {
         color: #333399;
        }
      }
      td {
        @include solid-border('bottom', 1px, #FFFFFF);
        @include solid-border('top', 1px, transparent);
        color: #666699;
        padding: 8px;
      }
    }
    .activities {
      padding: 10px;
      a{
        margin: 10px;
      }
    }
    .flash {
      font-family:'Trebuchet MS';
      color:#FF0000;
      font-size:14px;
    }
    .calendar_date_select table {
      width: 78px;
      td {
        padding: 5px;
      }
    }
    .main-content {
      clear: both;
      float: left;
      width: 100%;
    }
    .clear {
      clear: both;
    }
    #errorExplanation {
      @include solid-bg();
      margin: 10px;
      padding: 5px 0 5px 20px;
    }
  }
}

Using best practice how this can be optimized?

\$\endgroup\$
  • 1
    \$\begingroup\$ Optimization usually depends on the HTML. Can you provide it with use cases for all the rules? Also could you point out the advantages you see in your mixins over just using background-color and border directly? \$\endgroup\$ – RoToRa Mar 10 '11 at 11:39
  • \$\begingroup\$ @RoToRa: I am learning about sassy css and I saw this for some rails application. I don't know why those hav been used. As far as i understand mixins are used to replace a set of common style, and they might have used mixin for background as all the background differs only in color and have same value for the properties position, repeat and scroll. I am not sure why they have used. Its purely my guess. \$\endgroup\$ – ssri Mar 14 '11 at 6:09
  • 4
    \$\begingroup\$ This question appears to be off-topic because it is not code written by you \$\endgroup\$ – Simon Forsberg Feb 2 '14 at 19:49
8
votes
\$\begingroup\$

One optimization you should do in any case is not to have all rules inside html { ... } and body { ... }, because the resulting CSS rules all require the renderer to unnecessarily check every single element if it is actually a decedent of html and body - which they undoubtedly are.

\$\endgroup\$
5
votes
\$\begingroup\$

Sadly, that code would best be optimized by removing the mixins. They're not saving you any typing and generating highly inefficient CSS. Using proper CSS shorthand would help too.

From the solid background mixin:

background: none repeat scroll 0 0 $color;

vs

background: $color;

Shorter to write, shorter when compiled.


From the border mixin:

border: {
  color: $color ;
  width: $width;
  style: solid;
}

vs

border: $width solid $color;
// or just `$width solid` if the border will be the same color as your text

There's an instance of cursor: pointer without cursor: hand to go with it (some browsers use one, others use the other)


  font {
   family: "Lucida Sans Unicode","Lucida Grande",Sans-Serif;
   size: 12px;
  }

vs

font: 12px "Lucida Sans Unicode","Lucida Grande",Sans-Serif;

There's a lonely border-radius property with only the -moz- prefix, not even the non-prefixed version to go with it.


The table styles are all nested unnecessarily

  • table tr
  • table tr td.title
  • table td

The tr and td elements cannot appear outside of tables, so saying it must be a descendant of a table is superfluous. Similarly, td must be a descendant of tr, so again redundancy.

\$\endgroup\$

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