[기술 공유] 스타일이 중복되서 들어갈 때 그룹 셀렉터 대신 mix를 쓰거나, 아니면 만든 mix의 modifier를 만들어주거나, 각각에 주거나.

그룹 셀렉터를 지양해야 하는 이유는 그룹 셀렉터로 지정해놓은 속성이 언제 바뀔지 모르기 때문이다.

3개의 속성을 주었을 때 그 중 하나만 변경하고자 할 때 문제가 생긴다.

그래서 BEM에서는 mix라는 걸 쓰라고 한다.

추상화해서 하나의 클래스 text를 만들어두고

header text
footer text

이렇게 덮어써주는 것이다.

하지만 이 방식도 mix가 header나 footer의 아래에 배치되게 되면 CSS 규칙 셋의 순서에 따라 반대로 덮어씌워져서 원하지 않는 스타일이 먹힌다.

따라서 필자는 mix도 비권장한다. 차라리 각각에 스타일이 겹치더라도 그대로 각각에 준다.(p124)

만약 꼭 mix를 쓰겠다면 해당 클래스를 만든 다음에 해당 클래스에 대한 Modifier를 만들어서 공통 속성 중 하나가 변경된 것을 두고 그 Modifier까지 같이 주어서 덮어쓰기를 한다.

header **text text_size_l**