@MyQuestion

Как не переборщить с тяжёлыми css правилами?

Добрый день!

Я много раз слышал, что технологии должны быть применены там, где они необходимы. Потому что такие решения как flex и grid, рассчитываются более сложными способами и несут, некоторую, дополнительную нагрузку, на конечный продукт. Но иногда возникают ситуации, когда нужно для небольшого элемента, быстрее и проще применить более тяжёлые свойства, чем перестраивать разметку, нагромождать доп обёртки или каким-то образом ограничивать контент.

Например, я столкнулся с такой ситуацией:
<ul class="usefull-info__list">
                <li class="usefull-info__item usefull__item--like">
                  <a class="usefull-info__link usefull-info__link--bold" href="">Текст</a>
                </li>
                <li class="usefull-info__item">
                  <a class="usefull-info__link link-underline" href="">Текст</a>
                </li>
              </ul>

Нужно, что бы эти две ссылки, прижались к нижней границе блока.
Что я делаю:

.usefull-info__list {
  display: flex;
  flex-direction: column;

  margin-right: 10px;
  padding-left: 22px;
}

.usefull-info__item:first-child {
  margin-top: auto;
}


Можно было бы просто задать верхний отступ, но я не уверен, что это будет правильно при переполнение.
Можно было бы придумать решение с inline-block.
У меня есть ощущение, что я из пушки для слона, стреляю в комара .
Это нормальное решение, я не перебарщиваю? В некоторых случаях, я реально боюсь использовать те же флексы, потому что считаю, это избыточным.
  • Вопрос задан
  • 65 просмотров
Решения вопроса 2
Aleksandr-JS-Developer
@Aleksandr-JS-Developer
Бери и делай
Если таких правил менее 1е6 на одну страницу, то без проблем, а если больше - то вы что-то не то делаете..

Это нормальное решение, я не перебарщиваю? В некоторых случаях, я реально боюсь использовать те же флексы, потому что считаю, это избыточным.

Если серьезно, то если есть возможность и знания, то верстаете на гридах, если нет - на флексах.
Это очень удобные и хорошие инструменты. Если устройство смогло открыть браузер, на котором работают гриды - то проблем с производительностью не будет.
С другой стороны, очень важно, чтобы код был не нагромождён и легко читался.

В вашем случае можно смело сделать примерно так:
.usefull-info__list {
  display: flex;
  flex-direction: column;

  justify-content: flex-end;
}

.usefull-info__item:first-child {
  margin-top: auto;
}

jsfiddle
Ответ написан
delphinpro
@delphinpro Куратор тега CSS
frontend developer
Вы заморачиваетесь конкретной ерундой. Забудьте, и не думайте об этом. Просто верстайте с применением современных технологий.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы