Bazı css sınıfları daha az kullanarak içinde farklı kararlar için css stilleri sarmak için iyi olurdu.

Gibi bir şey yapmak istiyorum:

footer {
  width: 100%;
}

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

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

Bu sonuç, olması gerektiği gibi sonunda bir şey:

footer {
  width: 100%;
}

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

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

.tablet nedense bu gibi görünebilir:

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

  }
}

Birisi güzel bir fikir var umut!

Ben tamamen Nguyen cevabı Hai ile kabul () kabul ediyorum ama bir daha böyle bir şey yaparak, temiz

@desktop:   ~"only screen and (min-width: 960px) and (max-width: 1199px)";
@tablet:    ~"only screen and (min-width: 720px) and (max-width: 959px)";

footer{
  width: 100%;
  @media @tablet {
    width: 768px;
  }
  @media @desktop {
    width: 940px;
  }
}

Aslında aynı şey ama böyle bir ortamda özgün seçici sorgu içinde yuva sağlar. Belirli bir öğe için tüm css bir arada tutar ve stilleri çok daha modüler (split kesme yaklaşımı vs) yapar.