회사에서 Design System V1을 디자이너님과 함께 개발을 진행 중이다. 오늘은 Design System을 개발하다가 마주한 나의 부족한 CSS 실력에 대해 회고+반성+해결을 적어보려고한다.

문제상황

ColumnLayout이라는 컴포넌트를 만들었다. 이는 디자이너님과 약속한 width로 하위 children div의 width를 지정해주는 Grid 성격의 Layout 컴포넌트이다.
Storybook으로 만들었을 때는 잘되는 줄 알았다. 왜냐면 children의 depth가 1이었기 때문에....

문제는 depth가 2 이상일 때 등장했다..

기존코드
const Wrapper = styled.div`
	...
    
    div {
    	margin-right: 12px;
        width: 300px;
    }
`;

CSS의 선택자에 대한 지식이 부족하다. 그래서 styled-component에서 위 코드와 같이 div { ... }를 적으면 후손 선택자가 되어 해당 컴포넌트 아래에 있는 후손들 중 div tag가 모두 margin-right:12px; width:300px;을 갖게 된다. 그래서 후손의 모든 div가 내가 원하는대로 style을 갖지 못했다..😭

1차 해결

우선은 후손 div들 중 내가 원하는 margin-right과 width를 주기 위해서 !important를 지정해줬다.

w3schools의 CSS The !important Rule

The !important rule in CSS is used to add more importance to a property/value than normal.
In fact, if you use the !important rule, it will override ALL previous styling rules for that specific property on that element!

근데 찜찜해....😔😔😔😔😔

2차 해결

그래서 내가 해당 style을 적용하고 싶은 div에 className을 지정하기로 했다. className을 "child"로 지정하고 기존 코드를 다음과 같이 수정하였다. 그리고 하위 후손 div의 !important는 모두 삭제!

수정코드
const Wrapper = styled.div`
	...
    
    div.child {
    	margin-right: 12px;
        width: 300px;
    }
`;

배운 것

이번을 계기로 !important와 후손 선택자, 자손 선택자라는 것이 있다는 것을 배울 수 있었다.
후손 선택자와 자손 선택자에 대해서는 추후에 예제를 만들어가면서 공부할 필요가 있다.

어려워............😈