Как не переборщить с классами html с желанием потом их переиспользовать?

Question

[MyQuestion]

Добрый день!

Допустим у меня есть попап окно с похожим дизайном, но с небольшими отличиями в каждом.
Например это будет:
- форма авторизации
- форма поиска
- таблица в корзине покупок
- форма обратной связи

Всё это объединяет: скруглённые углы, шрифт, цвет фона. У форм, одинаковые инпуты и кнопки. Горизонтальные отступы между инпутами тоже одинаковые.
Но padding внутри родителя разный, некоторые отступы, немного другие, шрифт в одном из инпутов, немного другого размера. В общем есть некоторые отличия, которые говорят о неоднородности этих элементов, при их общей схожести.

Стоит ли миксовать такие блоки и громоздить кучу классов в html тег, или застилить каждый блок отдельно, копированием содержимого с некоторыми отличиями? Особенно если это не крупный проект, а средний лендинг, на 2-5 страниц?

Comments

[Сергей delphinpro]

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

Answer 1

[inkShio]

делай модификаторы

// стандарт
<div class="field">
  <input class="input" />
</div>

// с модификаторами
<div class="field field_big-space">
  <input class="input input_big-text" />
</div>

Comments

[MyQuestion]

Да, просто у меня иногда получаются такие классы:
class="btn btn--white btn--cart hover-dropdown"

class="get-access__link get-access__link--registration link-underline"

А в css:

.btn {
  position: relative;

  padding: 8px 23px;
  padding-bottom: 10px;

  border: none;
  border-radius: 22px;

  font-family: inherit;
  color: #ffffff;
  text-align: center;
  text-transform: none;
  text-decoration: none;

  cursor: pointer;
}

.btn--white {
  padding: 7px 23px;
  padding-bottom: 9px;

  border-radius: 22px;

  font-size: 14px;
  line-height: 16px;
  font-weight: 400;
  color: #ffffff;

  background-color: rgb(255, 255, 255, 0.2);
}

.btn--cart {
  padding-left: 45px;
  padding-right: 33px;
}

Ну тут, на мой взгляд оправданно.

А теперь представим, что есть попап, с 4-я разными состояниями, на 4-х разных блоках (размер и паддинги), и всё что их объединяет это закругленные углы окна, цвет фона, текст ну и position . Получается, я пропишу это состояние на бокс отдельным стилем, например popup, потом буду задать каждому внутреннюю геометрию, размер окна. Тогда от названия какого блока мне отталкиваться? Ведь этот popup будет миксом в другой структуре блока...

По логике, позиционирование окна, я должен прописать отталкиваясь от секции в которой он находится. Задать общие стили на повторяющиеся элементы, прописать модификаторы, для каждого изменённого состояния. Вот уже 3-и класса получается в html теге.

Вообще вопрос возник, ещё и из-за того, что куски такого кода, то там, то тут, тяжело отслеживать, без инспектора конечно )
Ну представьте, что у 5 тыс. строчек кода, в разных частях, разбросаны куски кода, формирующих блок, скажем 5-6 кусков. И если кто-то, захочет там что-то поменять, разработчику придётся бегать по всем пяти тысячам строчек кода, что бы изменить состояние блока. Вместо того, что бы зайти в раздел, этого блока и последовательно менять его состояние. Это немного неудобно, как мне кажется, хотя и есть нюансы )

Answer 2

[Анатолий Куликов]

Если css укладывается до 100кб, то мне кажется особой разницы нет. Вообще, если есть большие куски повторяемого кода, то лучше его обьединить в общие классы.

Answer 3

[Elena Fire]

Сделать одно описание стилей для form. У каждой формы есть свой name, для них прописать под стилями для form все отличия. Например:

form {
//стили для всех форм
}
form[name="Название формы"] {
//стили для этой конкретной формы
}