Dobrze byłoby zawijać style css dla różnych rozdzielczości w niektórych klasach css, używając mniej.

Chciałbym zrobić coś takiego:

footer {
  width: 100%;
}

.tablet {
  footer {
    width: 768px;
  }
}

.desktop {
  footer {
    width: 940px;
  }
}

W końcu coś takiego powinno być wynikiem:

footer {
  width: 100%;
}

@media screen and (min-width: 768px) {
  footer {
    width: 768px;
  }
}

@media screen and (min-width: 992px) {
  footer {
    width: 940px;
  }
}

.tablet może wyglądać jakoś tak:

@media screen and (min-width: 768px) {
  .tablet {

  }
}

Mam nadzieję, że ktoś ma fajny pomysł!