How not to overdo it with heavy css rules?

Question

css

Good afternoon!

I have heard many times that technology should be applied where it is needed. Because such solutions as flex and grid are calculated in more complex ways and carry some additional burden on the final product. But sometimes there are situations when it is necessary for a small element, it is faster and easier to apply heavier properties than to rebuild the markup, pile up additional wrappers, or somehow restrict the content.

For example, I came across this situation:

<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>

It is necessary that these two links nestle against the bottom border of the block.
What am I doing:

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

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

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

It would be possible to just set the top padding, but I'm not sure if this will be correct when overflowing.
One could come up with an inline-block solution.
I have a feeling that I'm from an elephant gun, shooting at a mosquito.
This is a normal solution, am I overdoing it? In some cases, I'm really afraid to use the same flexes, because I think it's redundant.

Answer 1

If there are less than 1e6 such rules per page, then no problem, and if there are more, then you are doing something wrong..

This is a normal solution, am I overdoing it? In some cases, I'm really afraid to use the same flexes, because I think it's redundant.

Seriously, if you have the opportunity and knowledge, then make up on grids, if not - on flex.
These are very handy and good tools. If the device was able to open the browser that the grids are running on, then there will be no performance problems.
On the other hand, it is very important that the code is not cluttered and easy to read.
In your case, you can safely do something like this:

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

  justify-content: flex-end;
}

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

jsfiddle