BEM 대 미디어 쿼리

Question

BEM의 일반 블록 (예 : .button)과 미디어 쿼리의 스타일 관련 질문이 있습니다.

BEM (문서 말한대로)에있는 블록의 난 블록이 있다고하자, 사이트의 모든 요소에 적용됩니다 일반적인 스타일이하도록되어

:

그리고 내 버튼을해야합니다 같은 재사용 스타일 :

.button { 
font-family:Verdana; 
padding:30px 20px; 
} 

이 일반 버튼의 목적은 그래서 "또 다른"버튼을한다면, 내가 modificator 버튼을 쓸 수있는 다양한 스타일로 "환영 버튼"라고 그 - 환영 만 추가합니다 광고 추가 정 스타일과 같이 표시됩니다 끝에있는 .button합니다 : 미디어 쿼리 문제가 어디에서 오는

<button class="button button--welcome"> </button> 

이것은 내 일반적인 .button에 정의 된 패딩을 다른 미디어 쿼리에 대한 다를 수 있습니다.. 예를 들어 패딩 최대 폭 : 480px은 수 있습니다 패딩 : 10px 5px; 내 버튼 블록 에 패딩을 포함하면 안된다는 의미입니까? 또는,이 같은 작업을 수행 할 수 있습니다

.button { 
font-family:Verdana; 
@media and (max-width: 480px) { 
padding:10px 5px; 
@media and (max-width: 780px) { 
padding:15px 10px; 
} 
@media and (max-width: 1200px) { 
padding:20px 15px; 
} 
@media and (min-width: 1201px) { 
padding:30px 20px; 
} 
} 

미디어 쿼리 대 일반적인 블록 스타일의 문제는 테두리 너비, 다른 미디어 쿼리에 대한 다를 수 있습니다 라인 높이의 경우에 발생한다.

Answer 1

미디어 쿼리 및 BEM에 문제가없는 것으로 생각합니다.