React

그룹 셀렉터 대신 mix를 써라? 아니면 만든 mix의 modifier를 만들어 그걸로 지정해라

그룹 셀렉터를 지양해야 하는 이유는 그룹 셀렉터로 지정해놓은 속성이 언제 바뀔지 모르기 때문이다.
3개의 속성을 주었을 때 그 중 하나만 변경하고자 할 때 문제가 생긴다.
그래서 BEM에서는 mix라는 걸 쓰라고 한다.
추상화해서 하나의 클래스 text를 만들어두고
header text footer text
CSS
복사
이렇게 덮어써주는 것이다.
하지만 이 방식도 mix가 header나 footer의 아래에 배치되게 되면 CSS 규칙 셋의 순서에 따라 반대로 덮어씌워져서 원하지 않는 스타일이 먹힌다.
따라서 필자는 mix도 비권장한다. 차라리 각각에 스타일이 겹치더라도 그대로 각각에 준다.(p124)
만약 꼭 mix를 쓰겠다면 해당 클래스를 만든 다음에 해당 클래스에 대한 Modifier를 만들어서 공통 속성 중 하나가 변경된 것을 두고 그 Modifier까지 같이 주어서 덮어쓰기를 한다.
header text text_size_l
CSS
복사