all: unset는 가장 먼저 선언하기

1. all: unset

https://developer.mozilla.org/en-US/docs/Web/CSS/unset

unset - CSS: Cascading Style Sheets | MDN

 

 

all: unset은 요소의 모든 CSS 속성을 초기화하는 속성으로,
아래와 같이 동작한다.

• 초기값이 있는 속성 → 초기값으로 변경
• 상속 가능한 속성 → 부모 요소에서 상속된 값으로 변경

 

div {
  color: red;
  font-size: 20px;
}

p {
  color: blue;
  all: unset;
}

 

위의 코드로 예를 들어 보면,

상속 가능한 속성인 color는 부모(div)에서 설정한 red가 적용되고

상속되지 않는 속성인 font-size는 브라우저의 기본값으로 초기화된다.

그 외의, position, display, border 같은 속성들도 상속되지 않으므로 브라우저의 기본값으로 초기화된다.

 

 

나는 버튼을 커스텀할 때 기본 스타일을 모두 제거한 후, 내가 디자인한 스타일을 적용한다.
단순히 border나 background를 없애는 것뿐만 아니라, hover, active 등 다양한 상태까지 고려해야 해서 코드가 다소 길어진다. 

<button>버튼</button>

 

그런데 하나의 속성으로 그 모든것들을 초기화시킬 수 있으니 너무 편하다ㅎㅎ 

<button style={{ all: 'unset' }}>버튼</button>

 

 

 

2. 문제의 상황..

 

오늘도 평소처럼 버튼에 all: unset을 이용한 코드를 짜고 있었다.

export const PasswordVisibilityToggleButton = styled.button`
  position: absolute;
  all: unset;
  width: 17px;
  height: 14px;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
`;

 

 

그런데 PasswordVisibilityToggleButton의 위치가 이상해서 개발자도구를 살펴보았더니

position: absolute에 취소선이 그어져 있었다!

분명 부모 요소에 position: relative 속성을 주었는데 왜 그러지? 고민했었다.

잘못된 점을 찾으셨나요??

 

3. all: unset는 가장 먼저 선언하자

알고 보니 아주 기본적인 개념을 간과했었다.

CSS는 위에서 아래로 순차적으로 읽는다.

 

이 때문에 position: absolute;를 선언한 후 all: unset;을 선언하면

position이 초기화되면서 static이 되어 취소선이 그어졌던 것이다.

 

all: unset;을 먼저 적용한 후, position: absolute;를 선언했더니 해결되었다!

 

결론적으로,

1. CSS는 위에서 아래로 순차적으로 읽고

2. all: unset은 모든 스타일을 초기화하기 때문에

all: unset은 가장 먼저 선언하자!