Which solution is more correct (exercise classes for icons)?

in General the question is. after the popularization of sass often see 2 types of stylization icons:
first:
<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');
}


second:
<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');
}


well and actually a question: who believes what option is correct? well, the answer to justify.
p.s. and the answer is "there glyphicon and font awesome use the first option, then it is correct" - not suitable.
July 2nd 19 at 14:08
4 answers
July 2nd 19 at 14:10
Solution
In the second case you will get the following 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');
}

If you have 200 classes using extend, the first selector will consist of 200 unique names of classes and the resulting css will be more long.
And by the way can we in the second case the common code to execute in a function and call it? I have only LESS experience is good to have there so can you. Then there will be 200 classes in the first selector, it is generally in the resulting css will not need to be. Nevertheless, the second option is still not too good, if you need maximum download speed, on the other hand, not the fact that rendering the DOM in the end will run faster in the case of one class into another, but this is one of those questions that if you want the answer, the author should be able to give it myself. - marietta.Jones commented on July 2nd 19 at 14:13
: there's no way to make so that in the resulting css will not have these classes. the most basic version - the one that is written above. other options will only more massive. - Rosendo_Hess commented on July 2nd 19 at 14:16
: I will clarify - is it correct that SASS no functions in LESS? - marietta.Jones commented on July 2nd 19 at 14:19
of the functions in question? you mean mixins? write an example function. - Rosendo_Hess commented on July 2nd 19 at 14:22
it's true that about them. Example? Well, for example like this:

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

Then use it:

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

A mixin, respectively, the compiled code will not be contained. - marietta.Jones commented on July 2nd 19 at 14:25
: well, maybe it's the same as using the @extend, the resulting css will be the same as written . tobish just repeat the class name. - Rosendo_Hess commented on July 2nd 19 at 14:28
: sure? I don't see this behavior in the case that it is LESS: https://yadi.sk/i/Gdf3VoGxzUyzh - marietta.Jones commented on July 2nd 19 at 14:31
: well, of course he's your mixin in there copy-paste will not. he will be compiling the result of this mixin does. tobish the output will be what is described above - Rosendo_Hess commented on July 2nd 19 at 14:34
: right. What I mean is that the result in the case before us the answer to the question is not if you use mixins. - marietta.Jones commented on July 2nd 19 at 14:37
: .... do you understand logic? as then your style will apply the one that is in the mixin contains if the result will be?. êàî I'm tired of arguing - ottomanelli your less - and carefully. it carefully read the resulting css then MB will understand. - Rosendo_Hess commented on July 2nd 19 at 14:40
: I in the context of the first answer you write, not more. - marietta.Jones commented on July 2nd 19 at 14:43
July 2nd 19 at 14:12
Solution
There is a third option:
[class^="icon-"],
[class*="icon-"] {
 display: inline-block;
 vertical-align: middle;
 width: 40px;
 height: 40px;
}

But for my taste the 1st option is still the best and most unique.
July 2nd 19 at 14:14
The answer above says that the file will weigh more. Moreover, to understand the two classes better and more correct than 1.
More correct would be the first option.
July 2nd 19 at 14:16
On LESS this option can be used to Look in the editor
<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');
 } 
}
you have an error. there is no space needed &&-first. but in General there is no difference. separately for you .icon-first set the style of the .icon they will still apply once the element has both classes are - marietta.Jones commented on July 2nd 19 at 14:19
so the question is not that they are used, and how compact the final recording to do or not? - Rosendo_Hess commented on July 2nd 19 at 14:22
: see. in my example in the first case, we put the class .icon in html, and in css there is no need to repeat it. in the second case, we loose the html from unnecessary classes .icon and using the extend it used, but in doing so we repeat the classes in css. but in your example you use icon html, and css to repeat it. - marietta.Jones commented on July 2nd 19 at 14:25

Find more questions by tags CSS