Vasyl Kovbassa

@mixin font-face($font-name, $path, $weight: null, $style: null, $exts: eot woff2 woff ttf svg) {
  $src: null;

  $extmods: (
    eot: "?#iefix",
    svg: "#" + str-replace($font-name, " ", "_") //- сама функция под миксином
  );

  $formats: (
    eot: "embedded-opentype",
    otf: "opentype",
    ttf: "truetype"
  );

  @each $ext in $exts {
    $extmod: if(map-has-key($extmods, $ext), $ext + map-get($extmods, $ext), $ext);
    $format: if(map-has-key($formats, $ext), map-get($formats, $ext), $ext);
    $src: append($src, url(quote($path + "." + $extmod)) format(quote($format)), comma);
  }

  @font-face {
    font-family: quote($font-name);
    font-style: $style;
    font-weight: $weight;
    @if(map-has-key($extmods, eot)){ src: url("#{$path}.eot")}
    src: $src;
  }

    // Chrome for Windows rendering fix: http://www.adtrak.co.uk/blog/font-face-chrome-rendering//

   @media screen and (-webkit-min-device-pixel-ratio: 0) {
    @font-face {
      font-family: $font-family;
        src: url('#{$path}.svg##{$font-family}') format('svg');
    }
  }
}
//функция str-replace для поддержки svg формата

@function str-replace($string, $search, $replace: "") {
  $index: str-index($string, $search);

  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }

  @return $string;
}

<!--[if IE 9]><h1>
Уважаемый господин Динозавр, посмотри в окно там уже 21 век.
</h1>
<h2>
Установи себе браузер!
</h2><![endif]-->

.b{
//  желательно использовать для общих стилей
}
b--m{
// желательно использовать для внешнего вида.
}
.b__e{
//  желательно использовать для позиционирования.
}

<div class="block block_mod">
  <div class="block__elem block__elem_mod">

<div class="block block_mod">
  <div class="elem elem_mod block__elem">

/* HTML types */

<a class='button' href='#'>Кнопа</a>
<button class='button' href='#'>Кнопа</button>
<input class='button' type="submit" value="Кнопа">

/* bem entity */

.button{
                                 // reset
  user-select: none;
  display: inline-block;
  text-decoration: none;
  touch-action: manipulation;
  
                                 // common
  padding: 0.5em 1em;
  border-radius: 2em;
  text-align: center;
}

.hgroup {
color: red;
}