Grid-Media IN 대 OUT

Question

저와 동료는 Neat Grid-Medias를 사용하는 가장 좋은 방법은 무엇인지에 대해 영원한 토론을 시작했습니다.

Approuch A : :

.mydiv { 
    font-size: 14px; 

    @include grid-media($somegridvar) { 
    font-size: 18px; 
    } 
} 

그런

, 생각이 :

Approuch B : 네아에

.mydiv { 
    font-size: 14px; 
} 

@include grid-media($somegridvar) { 
    .mydiv { 
    font-size: 18px; 
    } 
} 

테스트

는 다음 approuch을 고려 t, 두 approuchs는 동일한 결과로 렌더링됩니다.

내 질문은 무엇입니까? ThoughtBot에서 제안한 "더 나은"방법이 있습니까? 누군가가 제안한 "더 나은"접근 방법이 있습니까? 다른 대신 하나를 사용해야하는 이유가 있습니까? 스타일의 문제입니까? 누군가가 풍성한 생명 진술을 제공하기 위해 둘 다 사용하고 있습니까? 우리가 지금까지 추론 무엇

: Approuch A의

, 우리는 몇 가지있을 것이다 코드 읽기가 어려워 더 부풀어 만들기, 우리의 페이지에 그리드 미디어의 포함되어 있습니다. 다른 쪽에서는 모든 그리드 미디어가 하나의 규칙으로 중앙에 배치되며, 동일한 규칙이 각 그리드 미디어에 대해 문서에 반복되지 않습니다.

Approuch B에서는 각 중단 점에 대해 각 그리드 미디어의 단일 블록을 사용하므로 코드가 훨씬 짧아지고 요소 클래스가 나타나는 위치에 곱해집니다.

또한이 동료가이 글을 읽는다면, 내 길을 더 잘 찾길 기대하고 있습니다. (예, 나는 당신에게 어느 것을 말하지 않을 것입니다)

Answer 1

안녕하세요!

코드 스타일이 팀 일이라고 말하면서 머리말을 붙입니다. 우리를 위해 일하는 것이 당신을 위해 일하지 않을 수도 있습니다. 무엇보다 일관성과 공유 된 이해가 중요합니다. 잡초에 너무 많은 시간을 낭비하지 마십시오.

.mydiv { 
    font-size: 14px; 

    @include grid-media($somegridvar) { 
    font-size: 18px; 
    } 
} 

이유 : 즉 우리 (thoughtbot가) our code style guides을 게시하고 구문 (당신의 '접근 A'를) 선호했다되고? mydiv은 미디어 쿼리 자체가 아니라 스타일을 지정하는 것입니다. 따라서 하나의 선언 블록 내에서 해당 선택기와 관련된 모든 스타일을 포괄하는 것은 많은 명확성을 제공합니다. 셀렉터에 영향을 미치는 스타일을 여러 블록을 통해 확산 시키면 해독하기 어려워 질 수 있습니다.