{
  nameKz: string;
  messageKaz: string;
}

Интересно почему и откуда такое пошло?

Использование правильное

И выглядит хорошо: site.kz/kk
А пользователи и не заметят.
В коде так:

{
  nameKk: string;
  messageKk: string;
}

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

Подробнее почитать у mdo (github).

Смотрите на сайте гитхаба или вконтакте.

₸

С августа 2009 в юникод появился символ (U+20B8) [1]. В HTML используйте код ₸

Но в 2016 не все используют этот символ. Не понятно о чём думают люди, которые используют “тг.”,  “тнг” или гениальное “т”, а лучше всё это смешать:

магазин Белый Ветер, главная страница, ноябрь 2016

Символ рубля (₽) официально был принят Нацбанком России 11 декабря 2013 (!) года, т.е. через 6 лет после символа тенге, но по распространение тенге на том же уровне что и рубль.

А почему вы до сих пор не используете символ тенге ?

Чем хорош БЭМ

Что важно для меня:

• поддержка кода;
• рефакторинг;
• переиспользование;
• самодокументированный код;

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

Структура стилей

Структура (как я писал ранее) для сайтов:

src
+ css
++ blocks
+++ page.styl
+++ header.styl
+++ ... etc
++ common.blocks
+++ hr.styl
+++ modal.styl
+++ ... etc
++ lib
+++ box-sizing.styl
+++ typo.styl
+++ ... etc
++ config.styl
++ main.styl

Здесь всё просто: настройки (config.styl: цвета, шрифты, размеры), blocks (блоки данного проекта: 1 блок = 1 файл), common.blocks (общие блоки, кочуют из проекта в проект), lib (миксины, полезности).

Файл конфига (переменные тоже по #b_):

/*
* Styles configuration
*
* 1rem = 10px
* Naming by BEM.
*/

// $font
$font__size          = 1.6rem
$font__family        = 'Roboto', sans-serif
$font__family--aux   = 'PT Serif', sans-serif

// $color
$color__brand          = #313e4b
$color__brand--aux     = #e96438
$color__error          = #ec5840

$color__link           = #fff
$color__link--hover    = #ccc
$color__link--active   = #fff

// media queries
$mobile = '(max-width: 640px)'
$fablet = '(max-width: 767px)'
$tablet = '(max-width: 960px)'

Сам main.styl выглядит так:

// level to upload files

// for the first config project
@import 'config'

// use mixins
@import 'lib/*'

// use common.blocks
@import 'common.blocks/**/*'

// import all blocks in site
@import 'blocks/**/*'

Префиксы

Я использую классы-хэлперы или префиксы.

У меня прижились только: is– (работа с визуальной частью, например, is–hidden), js– (работа с JS, js–toggleModal).

Что БЭМ не даёт

или почему БЭМ не так уж и хорош:

• методология (никто не запретит вам сломать и нарушать);
• изоляция присутствует, если придерживаться правил (но вы работаете с людьми, а они ошибаются; легко сломать);
• WYSIWYG, работа с текстом (скорее всего ваш WYSIWYG надо будет настраивать или используйте каскад);

Альтернатива: CSS Modules. Остальные методологии – это БЭМ под другим углом.

Вместо заключения

Я использую каскад для модификатора блока. Пример:

.course
  &--darken
    .course
      &__info
        background-color: #a8a4a0
        color #fff

      &__title
        font-size: 3rem

Пишу названия блока вверху один раз, следом элементы, а потом модификаторы. Используем прелести препроцессоров:

.course
  // elements
  &__info
    border: 1px solid #ccc

  // modificators
  &--darken
    background-color: #000
    color: #fff

Пишу типографику каскадом:

.course
  &__text
    font-size: 1.8rem

    ul
     list-style: none

    h3
      font-size: 2.4rem

Пишу анимацию и media queries в одном файле блока:

.course
  &__title
    font-size: 3rem

    @media $mobile
      font-size: 2.4rem

Использую классы типа: .block__el-el (не путать с .block__el__el).

Объединяю модификаторы: в 1 модификаторе (и размер шрифта, цвет и фон).

Не использую bem-tools.

Не использую модификаторы типа key_value.

Миксую (.course.content__section).

Использую box-sizing и normalize.css.

Нарушаю правила и нормально себя чувствую

А как вы пишите свой CSS? Используете методологию?

Что необходимо:

– grunt/gulp для автоматизации;

– svg иконки.

Мы будем собирать из иконок svg спрайт, который необходимо добавить на страницу, а в нужных местах будем использовать для вставки иконки. Подробнее о способе читайте тут.

Почему svg лучше иконочных шрифтов читайте предыдущую статью.

Для создания спрайта используем плагин «svgstore».

Вот настройки для grunt:

svgstore: {
  options: {
    prefix: 'svg-', // добавляем префикс к id = префикс + название файла / <g id="svg-myicon">
    svg: {
      style: 'display: none;' // по умолчанию скрываем наш спрайт
    }
  },
  default: {
    files: {
      '/here/our/sprite-svg.svg': ['app/images/svg-icon/*.svg'] // название спрайта и путь к нему : [путь откуда брать svg иконки для спрайта]
    }
  }
}

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

Далее необходимо добавить спрайт на страницу.

В ангуляре это можно сделать так:

<div ng-include src="'/path/to/our/sprite-svg.svg'"></div>

Что использовать иконку необходимо писать конструкцию типа:

<svg class="svg-icon svg-icon--myicon">
  <use xlink:href="#svg-myicon"></use>
</svg>

Но благодаря директивам в ангуляре мы можем это писать удобнее и проще:

<icon label="myicon" width="20px" height="20px"></icon>

Вот пример как это можно реализовать через директиву:

/**
 * Directive for using svg icons
 *
 * @param {number} width (default: 20px) use own width, example: <icon label="bin" width="50px"></icon>
 * @param {number} height (default: 20px) use own height, example: <icon label="bin" height="50px"></icon>
 * @param {String} label (required) name for icon (name of svg file in folder 'images/svg-icon/')
 * @param {String} fill (default: currentColor) icon's color
 *
 */
(function() {
  angular
    .module('myApp')
    .directive('wxIcon', wxIcon);

  function wxIcon() {
    var directive = {
      restrict: 'E',
      replace: true,
      scope: {
        label: '@',
        width: '@',
        height: '@',
        fill: '@'
      },
      link: IconLink,
      template: '<svg class="svg-icon svg-icon--{{ label }}"><use ng-attr-width="{{ iconWidth }}" ng-attr-fill="{{ iconFill }}" ng-attr-height="{{ iconHeight }}" xlink:href="{{ link }}" /></svg>'
    };

    function IconLink(scope) {
      var SIZE = '20px';
      var COLOR = 'currentColor';

      scope.link = '#svg-' + scope.label;
      scope.iconWidth = (scope.width) ? scope.width : SIZE;
      scope.iconHeight = (scope.height) ? scope.height : SIZE;
      scope.iconFill = (scope.fill) ? scope.fill : COLOR;
    }

    return directive;
  }
})();

И используем на странице.

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

Не забудьте стили добавить:

.svg-icon {
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  color: currentColor;
}

.svg-icon--myicon {
  // здесь стили для конкретной иконки
}

Вот так не сложно можно добавить вектора на свой сайт. Думаю пользователи скажут вам спасибо.

Нагенерировать себе бесплатных иконок можно на http://icomoon.io/

Надеюсь полезно было. Если есть варианты улучшить пишите в комментариях .