Cóż, na pewno nie mogę twierdzić, że jestem autorytetem w tej sprawie( sam wciąż uczę się o konwencjach kodowania), ale właściwie skłaniam się ku opcji #1 - pojedynczemu arkuszowi stylów. Myślę jednak o konkretnej realizacji. Zamiast mieć jeden punkt przerwania dla każdego przypadku rozmiaru ekranu, dla którego potrzebujesz nowych stylów, sugerowałbym wiele punktów przerwania - jeden dla stylów CSS każdego modułu, w którym należy rozwiązać wiele rozmiarów ekranu.

Zamiast czegoś w rodzaju:

/*default styles:*/
/*header styles*/
.header-link{  ...  }
.header-link:active{  ...  }
.header-image{  ...  }
.header-image-shown{  ...  }
.header-table-cell{  ...  }

/*content styles*/
.content-link{  ...  }
.content-link:active{  ...  }
.content-image{  ...  }
.content-image-shown{  ...  }
.content-table-cell{  ...  }

/*footer styles*/
.footer-link{  ...  }
.footer-link:active{  ...  }
.footer-image{  ...  }
.footer-image-shown{  ...  }
.footer-table-cell{  ...  }

/*alternate styles for smaller screens:*/
@media only screen and (max-width: 1000px){
    /*header styles*/
    .header-link{  ...  }
    .header-image{  ...  }
    .header-image-shown{  ...  }
    .header-table-cell{  ...  }

    /*content styles*/
    .content-link{  ...  }
    .content-image{  ...  }
    .content-image-shown{  ...  }
    .content-table-cell{  ...  }

    /*footer styles*/
    .footer-link{  ...  }
    .footer-image{  ...  }
    .footer-image-shown{  ...  }
    .footer-table-cell{  ...  }
}

Proponowałbym opcję # 1, tylko zaimplementowaną tak:

/*default header styles*/
.header-link{  ...  }
.header-link:active{  ...  }
.header-image{  ...  }
.header-image-shown{  ...  }
.header-table-cell{  ...  }

/*alternate header styles for smaller screens*/
@media only screen and (max-width: 1000px){
    .header-link{  ...  }
    .header-image{  ...  }
    .header-image-shown{  ...  }
    .header-table-cell{  ...  }
}

/*default content styles*/
.content-link{  ...  }
.content-link:active{  ...  }
.content-image{  ...  }
.content-image-shown{  ...  }
.content-table-cell{  ...  }

/*alternate content styles for smaller screens*/
@media only screen and (max-width: 1000px){
    .content-link{  ...  }
    .content-image{  ...  }
    .content-image-shown{  ...  }
    .content-table-cell{  ...  }
}

/*default footer styles*/
.footer-link{  ...  }
.footer-link:active{  ...  }
.footer-image{  ...  }
.footer-image-shown{  ...  }
.footer-table-cell{  ...  }

/*alternate footer styles for smaller screens*/
@media only screen and (max-width: 1000px){
    .footer-link{  ...  }
    .footer-image{  ...  }
    .footer-image-shown{  ...  }
    .footer-table-cell{  ...  }
}

(wszystkie klasy są elementami zastępczymi. Nie jestem zbyt kreatywny...)

Chociaż oznacza to, że będziesz robił tę samą deklarację zapytań o media wiele razy( co prowadzi do nieco więcej kodu), jest to o wiele bardziej przydatne do testowania pojedynczych modułów, które ogólnie pomogą w utrzymaniu witryny rośnie. Spróbuj dodać wiele prawdziwych stylów, więcej tagów/klas/id do podanego przeze mnie przykładu, a może dodać do nich nieco więcej białych znaków, a wkrótce zobaczysz, o ile szybciej jest zawęzić i zmienić/dołączyć style (we wszystkich rozmiarach ekranu) w implementacji pokazanej w drugiej części przykładu.

I przypisuję tę odpowiedź całkowicie informacjom z skalowalnej i modułowej architektury dla CSS , autorstwa Jonathana Snooka. (Przecież początkujący nie ma mowy tak jak ja byłbym w stanie sam wymyślić i uzasadnić taką odpowiedź!) Cytowany z jednej z wielu istotnych części tej książki,

"...zamiast mieć pojedynczy punkt przerwania, w głównym pliku CSS lub w oddzielnym arkuszu stylów zapytań o media, umieść zapytania o media wokół Stanów modułu."

Chociaż, jeśli według osobistych preferencji lub innych wolisz nie używać tego podejścia, to możesz wybrać jedną z innych opcji, które zaproponowałeś-w końcu, Sam Snook mówi, że jego książka "jest bardziej przewodnikiem stylu niż sztywnym frameworkiem" , więc nie czuj się, jakby to był standard kodowania. (Choć uważam, że tak powinno być. XD)