완전 초보입니다.

 css에서 미디어쿼리를 썼는데 유지보수 등을 생각했을때 유용하게 정리하거나 많은 분들이 쓰시는 방법이 궁금합니다.

 세가지 방법중 어느 방법을 써야할지 감이 안잡힙니다.

 ex)

 1번

 #home { 공통 css }

 #gnb { 공통 css }

 @media (min-width:768px){ #gnb{ 768 이상용 css } }

 @media (max-width:768px){ #gnb{ 767 이하용 css } }

 @media (max-width:300px){ #gnb{ 300 이하용 css } }

 2번

 @media (min-width:768px){ #home{ 공통 css } #gnb{ 768 이상용 css } }

 @media (max-width:300px){ #home{ 공통 css } #gnb{ 300 이하용 css } }

 

 3번

 #home { 공통 css }

 @media (max-width:768px){ #gnb{ 767 이하용 gnb css 수정} }

 @media (max-width:300px){ #gnb{ 300 이하용 gnb css 수정} }

 

 

 1번)  공통된 것과 미디어쿼리를 완전히 분리

 2번)  공통된 것과 다른 것을 전부 한자리에

 3번)  최대해상도는 공통으로 두고 그 이하는 미디어 쿼리로 수정

 1번은 작성하긴 편한데 유지보수가 힘들어보이구

 2번은 제일 편하지만 용량이 많아질까 걱정이구요

 3번은 최대해상도때 적용한 css를 미디어쿼리에서 일일이 수정하는게 힘들더라구요.

 가장 효율적이거나 가장 많이 쓰이는 방법이 무엇인가요?