Хорошая практика использования стимуляторов


Я видел нахальный CSS для приложения, как это рельсы:

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

Используя лучшие практики, как это можно оптимизировать?



758
5
задан 10 марта 2011 в 08:03 Источник Поделиться
Комментарии
2 ответа

Одна оптимизация, вы должны сделать в любом случае не все правила внутри HTML-код { ... } и тела { ... }, поскольку в результате CSS правила требуют визуализации без необходимости проверять каждый элемент, если это на самом деле умерший в формате HTML и тела - где они несомненно есть.

8
ответ дан 10 марта 2011 в 11:03 Источник Поделиться

К сожалению, этот код лучше быть оптимизирована путем удаления с миксинами. Они не избавляя вас печати и генерации крайне неэффективны в CSS. С помощью соответствующего фрагмента стенография бы тоже помочь.

От сплошной фон миксин:

background: none repeat scroll 0 0 $color;

против

background: $color;

Короче писать, короче при компиляции.


От границы миксин:

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

против

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


Есть экземпляр курсор: указатель без курсора: стрелка , чтобы пойти с ним (некоторые браузеры используют одно, другие используют другие)


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

против

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


Есть одинокая границы-радиус заведение, только по -МОЗ - префикс, даже номера с префиксами версии, чтобы пойти с ним.


Стили таблицы все вложенные излишне


  • стол тр

  • стол тр тд.название

  • таблица тд

TR и TD элементы не могут появиться вне столов, поэтому говорю, что это должен быть потомком таблица лишнего. Аналогично, ТД должен быть потомком тр, так что опять избыточность.

5
ответ дан 28 июня 2013 в 08:06 Источник Поделиться