Mobile First vs. Desktop First

When starting a project, you should consider whether it is a mobile-first or desktop-first design. This will change how your @media rules are structured, but will not make a difference in the design of the app. It is simply a syntactic consideration.

Mobile First

Notice how the @ rule is now engaged if the browser window is >601.

@media (min-width: 601px) {
   .item1 {
      background-color: var(--color-primary-300);
   }
}

Desktop First

The following is a desktop-first approach. If you see a lot of max-width, that likely means you are working on a desktop-first design approach.

@media (max-width: 600px) {
   .item1 {
      background-color: var(--color-decorative-300);
   }
}