LESS.JS Избыточность в CSS, использование Mixins вместо наследования селекторов? - PullRequest
Новая
       34

LESS.JS Избыточность в CSS, использование Mixins вместо наследования селекторов?

11 голосов
/ 26 сентября 2011

Я использую less.js с регулярным использованием миксинов. Например. У меня есть базовый класс градиентный черный, как этот. 

.gradientBlack {
    background: #333333;
    background: -moz-linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5a5a5a), color-stop(60%, #333333), color-stop(100%, #000000));
    background: -webkit-linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
    background: -o-linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
    background: -ms-linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5a5a5a', endColorstr='#000000', GradientType=0 );
    background: linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
}

Затем я повторно использую этот класс в нескольких определениях, например 

h3 {
    .gradientBlack;
    ...
}
.darkBox {
    .gradientBlack;
    ...
}

Недостатком этого подхода является то, что он раздут CSS с избыточными определениями. Например. вычисленный CSS может выглядеть примерно так: 

h3 {
    background: #333333;
    background: -moz-linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5a5a5a), color-stop(60%, #333333), color-stop(100%, #000000));
    //... and maybe some more (redundant) definitions

}

.darkBox {
    background: #333333;
    background: -moz-linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5a5a5a), color-stop(60%, #333333), color-stop(100%, #000000));
    //... and maybe some more (redundant) definitions
}

Для таких, как я, которые используют много градиентов, круглых углов и т. Д., Это быстро складывается.

Вопрос (отредактированный)

Я обнаружил, что известное имя для этой темы селекторное наследование (см. Sass ) и, как кажется, сейчас не реализовано. Использование и преимущества обсуждаются здесь . Вычисленный CSS этого синтаксиса может выглядеть следующим образом. 

h3,
.darkBox,
.gradientBlack {
    background: #333333;
    background: -moz-linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
    ...
}

Тем не менее, я был бы признателен за любые предложения, когда беспокоиться, а когда нет, а также за любые другие намеки на то, как действовать, если наследование селектора не является вариантом.

Ответы [ 5 ]

3 голосов
/ 07 октября 2011

Я думаю, что есть несколько вопросов для рассмотрения:

  • Размер таблицы стилей
  • Эффективность выполнения таблицы стилей (насколько быстро работает браузер)
  • Ремонтопригодность таблицы стилей
  • Поддерживаемость разметки (html)

Подход, который пропагандирует Марк Геммилл (в / 3), на самом деле Объектно-ориентированная CSS Николь Салливан . Я использовал этот шаблон перед переключением на Sass и все еще нахожу его полезным, но я думаю, что способ Sass / Less приводит к более поддерживаемому CSS и более удобной разметке - нет необходимости разбрасывать презентационные классы по всей разметке.

Я думаю, @extend (наследование селектора) является одним из основных преимуществ Sass по сравнению с Less и снижает избыточность в скомпилированной таблице стилей.

Для меня преимущества более удобного в обслуживании CSS и разметки перевешивают любые недостатки немного большей таблицы стилей. Я думаю, вы обнаружите, что если вы сохраните свои селекторы эффективными (не вкладывайте в Less / Sass больше, чем нужно) и комбинируете и минимизируете производительность, снижение производительности будет меньше, чем вы можете себе представить .

1 голос
/ 07 октября 2011

Как насчет этого? 

h3, .darkBox, td.dark {
    .gradientBlack;
}
h3, {
    /*other styles here*/
}
.darkBox {
    /*other styles here*/
}
td.dark {
    /*other styles here*/
}

В качестве альтернативы вы можете рассмотреть возможность использования минификатора CSS и посмотреть, дает ли он приемлемый размер без ущерба для чистоты вашего файла LESS.

1 голос
/ 07 октября 2011

Я недавно начал использовать less css , и этот точный вопрос также пришел в голову.Мой ответ был:

1 / Фактически сгенерированный css является чем-то вроде того, поскольку вы вряд ли будете на него смотреть (за исключением, возможно, отладки своего меньшего кода), поэтому, если есть некоторая избыточность вВывод - это компромисс, который вы получаете с тем, что я считаю синтаксисом, который гораздо лучше понимать и поддерживать.

2 / Недостаток, как вы описали, если вы передаете эти меньшеCSS стиль класса вокруг как mixin вы раздутый размер вашего вывода CSS.Если вы используете less css на внешнем интерфейсе, и он генерирует CSS в браузере, это не беспокоит.Однако, если вы предварительно генерируете свой CSS, тогда возникает вопрос о том, как это раздувание влияет на время загрузки.Если ваш css-файл не станет огромным в результате, и / или ваш сайт не будет очень громоздким, я не буду беспокоиться об этом.

3 / Альтернатива передаче стиля класса как mixin(или использование наследования селектора) в вашем less css означает просто использовать class inheritance в вашем html, вместо этого в вашем файле less: 

.gradientBlack {
    ...
}

h3 {
    .gradientBlack;
    ...
}
.darkBox {
    .gradientBlack;
    ...
}
td.dark {
    .gradientBlack;
    ...
}

Вы просто определяете .gradientBlack в вашей таблице стилей, а затем сослаться на класс прямо в html: 

<h3 class="gradientBlack"></h3>
<div class="darkBox gradientBlack></div>
<td class="dark gradientBlack"></td>

Я думаю, в конце, кроме вопроса о времени загрузки, суть в том, что делает ваш код легче для понимания иподдерживать в вашей ситуации.Скорее всего, в моем сгенерированном css будет еще 100 строк, если это сделает мой меньше css более легким для понимания.

1 голос
/ 26 сентября 2011

Вы можете определить свой миксин, а затем передать переменные, которые вы хотите переопределить при вызове.

Это пример с меньшего веб-сайта: 

.box-shadow (@x: 0, @y: 0, @blur: 1px, @alpha) {
  @val: @x @y @blur rgba(0, 0, 0, @alpha);

  box-shadow:         @val;
  -webkit-box-shadow: @val;
  -moz-box-shadow:    @val;
}

Так что, когда вы звоните, вы можете сделать что-то вроде 

div.header {
  .box-shadow(5px,5px,2px,.5);
}

Таким образом, вы можете иметь 1 mixin, но каждый раз, когда вы вызываете его, вы можете передавать ему различные атрибуты.

Надеюсь, это поможет.

0 голосов
/ 16 мая 2012

Я использую lessphp (который может отличаться от less.js в этом примере), но я заметил, что если я объявлю mixin так, как будто у него пустой список параметров, он никогда не сгенерирует блок стиля.

Так измените это: 

.gradientBlack {
    background: #333333;
    background: -moz-linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5a5a5a), color-stop(60%, #333333), color-stop(100%, #000000));
    background: -webkit-linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
    background: -o-linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
    background: -ms-linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5a5a5a', endColorstr='#000000', GradientType=0 );
    background: linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
}

На это: 

.gradientBlack() {
    background: #333333;
    background: -moz-linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5a5a5a), color-stop(60%, #333333), color-stop(100%, #000000));
    background: -webkit-linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
    background: -o-linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
    background: -ms-linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5a5a5a', endColorstr='#000000', GradientType=0 );
    background: linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
}

и используйте его так: 

h3 {
    .gradientBlack();
    ...
}
.darkBox {
    .gradientBlack();
    ...
}

, и он не будет генерироватьсянеиспользованный блок.

...