Mobile First or style separation?

Question

css

Hello!
I would like to ask more experienced developers which method of adaptive layout is preferable to use:
Mobile first

.text {
  font-size: 12px;
  color: #222;
}

@media (min-width: 768px) {
  .text {
    font-size: 14px;
  }
}

Removing differing styles in the appropriate media queries

.text {
  color: #222;
}

@media (max-width: 767px) {
  .text {
    font-size: 12px;
  }
}

@media (min-width: 768px) {
  .text {
    font-size: 14px;
  }
}

Thanks in advance for your reply!

Answer 1

Mobile First

Answer 2

The bottom line is that mobile devices are weaker than computers, and when you do media queries, the phone needs to first display the desktop version, and then also media queries. And when you do it on the principle of mobile first, then the phone needs to display only one page, without media queries, and computers cope with this anyway

Answer 3

Mobile-first Style
mobile first as usual without media queries
. And for higher resolutions, edit styles in media queries.

Answer 4

You can use https://gist.github.com/indrekpaas/7f22e44ace49b5124eec for font-size and
many other
properties mixins)