Какое решение более верное (задание классов для иконок)?

Question

[iBird Rose]

в общем вопрос такой. после популяризации sass частенько вижу 2 вида стилизации иконок:
первый:

<i class="icon icon-first"></i>
<i class="icon icon-second"></i>

.icon {
	display: inline-block;
	vertical-align: middle;
	width: 40px;
	height: 40px;
}
.icon-first {
	background: url('icon-url');
}
.icon-second {
	background: url('icon-url-2');
}

второй:

<i class="icon-first"></i>
<i class="icon-second"></i>

.icon {
	display: inline-block;
	vertical-align: middle;
	width: 40px;
	height: 40px;
}
.icon-first {
    @extend .icon;
	background: url('icon-url');
}
.icon-second {
    @extend .icon;
	background: url('icon-url-2');
}

ну и собственно вопрос: кто как считает какой вариант правильнее? ну и ответ обосновать.
p.s. и ответ "вон glyphicon и font awesome используют первый вариант - значит он правильный" - не подходит.

Answer 1

[_ _]

Во втором случае получится следующий css

.icon, .icon-first, .icon-second {
  display: inline-block;
  vertical-align: middle;
  width: 40px;
  height: 40px;
}
.icon-first {
  background: url('icon-url-1');
}
.icon-second {
  background: url('icon-url-2');
}

Если у вас будет 200 классов, использующих extend, то первый селектор будет включать 200 уникальных имен классов и результирующий css получится более длинным.

Comments

[Станислав]

А кстати нельзя ли во втором случае общий код оформить в виде функции, и вызывать ее? Я только с LESS опыт хороший имею, там так можно. Тогда не будет 200 классов в первом селекторе, его вообще в результирующем css не должно будет оказаться. Но тем не менее второй вариант все равно не слишком хорош, если нужна максимальная скорость загрузки сайта, с другой стороны, не факт, что прорисовка DOM в итоге будет работать быстрее в случае применения одного класса на другой, но это уже из разряда вопросов, на которые если и требуется ответ, то автор должен уметь дать его сам.

[iBird Rose]

Станислав: никак не получится сделать так чтобы в результирующем css не будет этих классов. самый минимальный вариант - тот что написан выше. другие варианты будут только массивнее.

[Станислав]

iBird Rose: Я уточню - верно ли, что в SASS нет функций, как в LESS?

[iBird Rose]

Станислав: о каких функциях идет речь? вы про миксины? напиши пример функции.

[Станислав]

iBird Rose: верно, о них. Пример? Ну например такой:

.input-styles2() {
background-color: @input-bg;
border: @input-border;
width: 100%;
border-radius: 0;
outline: none;
-webkit-appearance: none;
}

После чего используем его:

input[type='text'] {
.input-styles2();
height: @input-height;
margin: 0;
.border-radius(4px);
padding-top: 17px;
}

Миксина, соответственно, в компилируемом коде содержаться не будет.

[iBird Rose]

Станислав: ну тк это то же самое что и использование @extend результирующий css будет таким же как написал Александр Марченко . тобишь просто повторятся названия классов.

[Станислав]

iBird Rose: уверены? Я не вижу такого поведения в случае, если это LESS: https://yadi.sk/i/Gdf3VoGxzUyzh

[iBird Rose]

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

[Станислав]

iBird Rose: верно. Я к тому, что результата, который случае в обсуждаемом нами ответе на вопрос не будет, если использовать миксины.

[iBird Rose]

Станислав: .... ты логику понимаешь? как тогда по твоему стиль применится тот который в миксине содержится если результата не будет?. кароч я устал спорить - откомомпилируй свой less - и внимательно. именно внимательно прочитай получившийся css - тогда мб поймешь.

[Станислав]

iBird Rose: я в контексте первого ответа пишу, не более.

Answer 2

[dom1n1k]

Есть еще третий вариант:

[class^="icon-"],
[class*="icon-"] {
    display: inline-block;
    vertical-align: middle;
    width: 40px;
    height: 40px;
}

Но на мой вкус 1-ый вариант всё же лучший и самый однозначный.

Answer 3

[Артём]

Ответ выше говорит, что весить файл будет больше. К тому же понимать два класса лучше и правильнее, чем 1.
Правильнее был бы первый вариант.

Answer 4

[Лариса]

На LESS вот такой вариант можно использовать Посмотреть в редакторе

<i class="icon icon-first"></i>
<i class="icon icon-second"></i>

.icon {  
  display: inline-block;
  vertical-align: middle;
  width: 40px;
  height: 40px;
  
  &&-first {    
  background: url('icon-url.gif');
  }
  &&-second { 
  background: url('icon-url-2.gif');
  } 
}

Comments

[iBird Rose]

у вас ошибка. там пробел не нужен &&-first. ну а вообще разницы нет. отдельно вы для .icon-first задаете стиль или внутри .icon они все равно применятся раз у элемента оба класса стоят

[Лариса]

iBird Rose: так вопрос не в том что они применяются, а как компактнее финальную запись сделать или нет?

[iBird Rose]

Лариса: смотрите. в моем примере в первом случае мы ставим класс .icon в html, и уже в css нет необходимости его повторять. во втором же случае мы освобождаем html от лишнего класса .icon и через extend его применяем, но этим самым мы повторяем классы в css. а в вашем примере вы и в html icon используете, и в css его повторяете.