-
Notifications
You must be signed in to change notification settings - Fork 0
[기술 공유] 스타일이 중복되서 들어갈 때 그룹 셀렉터 대신 mix를 쓰거나, 아니면 만든 mix의 modifier를 만들어주거나, 각각에 주거나.
Coa edited this page Mar 1, 2022
·
1 revision
그룹 셀렉터를 지양해야 하는 이유는 그룹 셀렉터로 지정해놓은 속성이 언제 바뀔지 모르기 때문이다.
3개의 속성을 주었을 때 그 중 하나만 변경하고자 할 때 문제가 생긴다.
그래서 BEM에서는 mix라는 걸 쓰라고 한다.
추상화해서 하나의 클래스 text를 만들어두고
header text
footer text
이렇게 덮어써주는 것이다.
하지만 이 방식도 mix가 header나 footer의 아래에 배치되게 되면 CSS 규칙 셋의 순서에 따라 반대로 덮어씌워져서 원하지 않는 스타일이 먹힌다.
따라서 필자는 mix도 비권장한다. 차라리 각각에 스타일이 겹치더라도 그대로 각각에 준다.(p124)
만약 꼭 mix를 쓰겠다면 해당 클래스를 만든 다음에 해당 클래스에 대한 Modifier를 만들어서 공통 속성 중 하나가 변경된 것을 두고 그 Modifier까지 같이 주어서 덮어쓰기를 한다.
header **text text_size_l**
😎@Daewon Seo 🥳@papa 🧐@Coa 🤪@HuiSeung LEE
Test 관련 이슈
Next.js 관련 이슈
Git 관련 이슈
기타 이슈
기술공유
- [strapi] authenticated request 구현하기
- aria label는 왜 쓰는 것인가?
- font icon을 집어 넣을 때 i 태그로 넣을까? pseudo elements(before, after)로 넣을까?
- Nextjs에서 a 태그를 Link 태그로 감싸야 한다.
- Nextjs에서 img 대신 Image 컴포넌트 사용하기, next.config.js는 무엇인가?
- React.FC
- React.js rest Props와 Object destructuring
- Reactjs 컴포넌트 선언 방식을 화살표 함수로 할지 함수 선언문으로 할지
- Test 참고
- useAxios test code
- 뷰포트 메타태그, Next.js에서 Head 태그란?
- 스타일이 중복되서 들어갈 때 그룹 셀렉터 대신 mix를 쓰거나, 아니면 만든 mix의 modifier를 만들어주거나, 각각에 주거나.
- 타입스크립트 클래스에서의 protected, private 필드와 # 필드의 차이
- Global state VS local state 리덕스의 배경이해, 글로벌 변수와 다를 바 없다면 지양되어야 하지 않나?
- Fontawesome Icon React 적용방법
- classnames/bind 함수와 classnames 함수의 차이
- Jest와 Testing Library