Проектирование компонентов в изоляции

Это подход основывается на применении компонентно-ориентированного программирования. Проще говоря, это разработка, основанная на компонентах, объединённых друг с другом посредством композиции, которая формирует модульное приложение. Каждый компонент мы верстаем в отдельном файле, а затем собираем как из конструктора нужный интерфейс и именно в стилях интерфейса задаём нужные отступы и отношения между компонентами. Таким образом именно среда упорядочивает компоненты. Мы понимаем, что один и тот же компонент может находиться в разных средах, поэтому используем этот подход для правильной организации стилей и избегаем повторения кода на странице.

В данном примере мы рассматриваем особый принцип верстки простого компонента chip в изоляции.

Пример

Для начала создаем кнопку.

<div class=”button”></div>

CSS код у этой кнопки выглядит так.

.button {
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background-color: #d7ffff;
  background-image: url(“cross.svg”);
  background-size: 8px 8px;
  background-position: center;
}

Мы имеем div с классом button и определенными параметрами, выглядит он так.

Затем, эту кнопку мы хотим вывести в другом компоненте, например в chip. HTML код чипса выглядит так. Про chip можно посмотреть в этом туториале.

<div class=”chip”>
  Something
  <div class=”button”></div>
</div>

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

.chip {
  position: relative;
  height: 32px;
  padding: 0 32px 0 12px;
  border-radius: 16px;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 32px;
  background: #D3FFFF;
}

.chip .button {
  position: absolute;
  top: 6px;
  right: 6px;
}

Теперь мы имеем div с классом chip, в котором есть текст и div с нашей кнопкой.

Следуя этому принципу и далее, мы создадим список из этих элементов.

<div class=”chips”>
  <div class=”chip”>
    Apple
    <div class=”button”<</div>
  </div>

  <div class=”chip”>
    Apple
    <div class=”button”></div>
  </div>

  <div class=”chip”>
    Apple
    <div class=”button”></div>
  </div>
</div>

CSS код будет выглядеть так.

.chips {
  display: flex;
  padding: 16px;
  background: #FFFFFF;
  box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.11);
  border-radius: 10px;
}

.chips .chip {
  margin: 0 8px 8px 0;
}

Получаем следующий результат:

Заключение

Используя этот принцип, мы структурируем работу над компонентом, делим его на части таким образом, чтобы каждую из частей можно было вставлять на другие экраны сервиса не создавая лишний код, который нужно будет переписывать. Проектирование компонентов в изоляции также прокачивает навык структурного деления компонента по системе Universal Design Framework.

Компоненты

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