Универсальный класс

Форум /

Подскажите как решается данная проблема? У нас имеется класс "header__search-form" который допустим имеет отступ с низу, но как быть если придется перенести блок "search-form" в другое место где ему тоже нужны те же свойства, нужно создавать новый класс для нового окружения, каскадом, добавлением утилитарного класса или как то иначе? вижу 3 варианта

Вариант 1

<div class="header">
    <div class="search-form header__search-form"></div>
</div>

<div class="sidebar">
    <div class="search-form sidebar__search-form"></div>
</div>

<div class="blog">
    <div class="search-form blog__search-form"></div>
</div>

.header__search-form{
    margin-bottom:10px;
}
.sidebar__search-form{
    margin-bottom:5px;
}
.blog__search-form{
    margin-bottom:10px;
}

Вариант 2

<div class="header">
    <div class="search-form mb-10"></div>
</div>

<div class="sidebar">
    <div class="search-form mb-5"></div>
</div>

<div class="blog">
    <div class="search-form mb-10"></div>
</div>

Вариант 3

<div class="header">
    <div class="search-form"></div>
</div>

<div class="sidebar">
    <div class="search-form"></div>
</div>

<div class="blog">
    <div class="search-form"></div>
</div>

.header .search-form {
    margin-bottom:10px;
}
.sidebar .search-form {
    margin-bottom:10px;
}
.blog .search-form {
    margin-bottom:10px;
}

6 years ago

Realetive

mb-классов не напасёшься на крупном проекте (зависит, конечно, от практики вертикального ритма), но, возможно, этот отступ диктуется не константами, а какими-то другими критериями.

Может быть ещё 4-й вариант:

<div class="header">
    <div class="search-form"></div>
</div>

<div class="sidebar">
    <div class="search-form"></div>
</div>

<div class="blog">
    <div class="search-form"></div>
</div>

.header {
    padding-bottom:10px;
}
.sidebar {
    padding-bottom:10px;
}
.blog {
    padding-bottom:10px;
}

А если search-form — не единственный блок внутри, то можно отталкиваться от осознания, что внутренние элементы блока (header, sidebar, blog) «знают» о взаиморасположении (т. е. первый вариант). Ну, т. е. каждый из предложенных способов корректный и не противоречит методологии, но и сама методология не диктует тут «единственного правильного варианта».

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

<div class="header">
    <div class="header__search-form">
      <div class="search-form"></div>
    </div>
</div>

… а теперь добавим элементов:

  <div class="header">
+     <div class="header__logo"></div>
      <div class="header__search-form">
        <div class="search-form"></div>
+       <div class="header__search-results">
      </div>
+     <div class="header__user"></div>
  </div>

И теперь отступы вполне логично «просятся» на header__элементы.

Чтобы оставлять комментарии, необходимо авторизоваться.