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

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

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

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

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

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

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

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

11
задан Cœur 8 March 2018 в 17:09
поделиться