Антон Спирин

Правильна. Так как, если делать модификатор только для элемента, другой программист может написать нечто подобное:

<a href="http://mail.ru" class="item-link item-link_first">item</a>

и сам того не желая, переопределить ваши стили.

Соглашение по именованию.

UPD: не понял вопрос. Подумал, что вы хотите использовать такую запись:

<a href="http://mail.ru" class="top-menu__item-link item-link_first">item</a>

А вы спрашивали про такой вариант?:

<a href="http://mail.ru" class="top-menu__item-link_first">item</a>

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

.row {
  margin: 0 -15px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.col {
  float: left;
  width: 33.33333%;
  padding: 0 15px;
}

<div class="row">
  <div class="col">
    <div class="your-blue-div">div1</div>
  </div>
  <div class="col">
    <div class="your-blue-div">div2</div>
  </div>
  <div class="col">
    <div class="your-blue-div">div3</div>
  </div>
</div>

где .your-blue-div - ваш блок.

В репозитории есть папка /example с простым примером.
Параметры конфигурации передаются объектом при инициализации.
Cсылка c развернутыми ответами на все вопросы.

Можно так:

const wrapperStyle = {
  position: 'fixed',
  top: 0,
  bottom: 0,
  left: 0, 
  right: 0,
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  height: '100%'
};

const Preloader = () => (
  <div style={wrapperStyle}>
    <div className="spinner" />
  </div>
);

Что могу сказать, плохо пробовали.
через маргины
через flex
через text-align
через position: relative

И есть еще целая куча способов, как это можно сделать.

Используйте flex.
Демо.

a ~ b – правые соседи: все b на том же уровне вложенности, которые идут после a.
a + b – первый правый сосед: b на том же уровне вложенности, который идёт сразу после a

В списках удобно задавать отступы между элементами комбинацией a + a:

.list-item + .list-item {
  margin-top: 10px;
}

sass версия:

.list-item {

  & + & {
    margin-top: 10px;
  }
}

это правило применит margin-top ко всем элеметнам списка кроме первого. Конечно, при условии что в списке все элементы будут иметь селектор .list-item:

<ul>
  <li class="list-item"></li>
  <li class="list-item"></li>
  <li class="list-item"></li>
  <li class="list-item"></li>
  <!--        ...         -->
  <li class="list-item"></li>
</ul>

Можно так:
https://jsfiddle.net/rockon404/fw7g810p/

.visually-hidden {

  visibility: hidden;
  position: absolute;

  /* или */

  clip: rect(0, 0, 0, 0);
  position: absolute;

  /* или */

  transform: scale(0, 0);
  position: absolute;

  /* или */

  opacity: 0;
  position: absolute;
  pointer-events: none;
  user-select: none;

  /* или */

  height: 0;
  position: absolute;
  overflow: hidden;
  padding: 0;
  border: none;
  outline: none;
  box-shadow: none;
}

UPD:

.visually-hidden {
  position: absolute;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  margin: -1px;
}

Как прятать — HTML Шорты
Inclusively Hidden
Hiding Content for Accessibility
How-to: Hide Content

Если вы хотите, чтобы его обтекал текст, то поменяйте местами элементы b-navbar__nav-cell и b-navbar__search местами. Так как плавающие элементы обтекают элементы расположенные ниже.

React + любой css in js.

Можно так:

<header>
  <div class="container">
    <!-- Header stuff -->
  </div> 
</header>
<main>
  <div class="container">
    <!-- Optional stuff -->
  </div>
  <div class="big-green-block">
    <!-- Big green block stuff -->
  </div>
  <div class="container">
    <!-- Some other stuff -->
  </div>
<main>

transition работает когда вы изменяете свойство. На примере с hover:

.class {
  color: red;
  transform: translateY(-100%);
  transition: all 1s;
}

.class:hover {
  color: blue;
  transform: translateY(-50%);
}

При наведении курсора мыши на элемент .class, в течении секунды плавно изменится цвет с красного на синий и translateY c -100% на -50%.

Так:

.hover:hover + .opacity0 {
  opacity: 0;
}

Демо: https://jsfiddle.net/rockon404/hwxfw8au/

Правильно так:

@font-face {
  font-family: 'OpenSans';
  src: url("../fonts/OpenSans/OpenSansRegular/OpenSansRegular.eot");
  ...
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'OpenSans';
  src: url("../fonts/OpenSans/OpenSansLight/OpenSansLight.eot");
  ...
  font-weight: 300;
  font-style: normal;
}

Пример использования:

html {
  font-family: 'OpenSans', sans-serif;
  font-size: 14px;
}

.example-with-regular-text {
  // nothing
}

.example-with-light-text {
  font-weight: 300;
}

Не стоит полагаться на эти события, они не всегда срабатывают.
В первую очередь надо избавиться от зазора между родительским и дочерним элементом. Меню dropdown по-хорошему должно иметь позицию top: 100%. Для имитации зазора можно использовать контейнер с padding.
А можно что-то вроде:

.user-logout {
  border-top: 5px solid transparent;
  background-clip: padding-box;
}

Путей много на самом деле.

Саму задачу проще решить через css, без лишнего пререндера компонента.