221205 항해99 29일차 CSS nesting & CSS reset

CSS nesting

• 깨끗하고 이해하기 쉬운 코드를 쓰기 위해 CSS 스타일 규칙을 다른 규칙 안에 중첩할 수 있다.
• nesting을 사용하면 관련 스타일을 그룹화하고 중첩된 계층 구조로 CSS를 작성할 수 있다.

CSS nesting의 장점

• 모듈화로 개발 및 디버깅 시간 단축
• media query 중첩 가능

.header {
  background-color: blue;
}

.header p {
  font-size: 16px;
}
.header p span:hover{
  color: green
} 

.header {
  background-color: blue;
  & p {
    font-size: 16px;
    & span {
      &:hover {
        color: green
      }
    }
  }
}

• nesting을 위해선 "nesting selector" 문법을 사용해야 한다. 위의 예시와 같이 selector 앞에 '&'를 붙이거나, @nest rule을 사용하면 된다.

.header {
  font-size: 40px;
}
 
@media (max-width: 760px) {
  .header {
    font-size: 24px;
  }
}

.header {
  font-size: 40px

  @media (max-width: 760px ) {
    & {
      font-size: 24px;
    }
  }
}

• media queary 역시 '&'로 기존의 selector를 대체해준다.

• '&'는 selector의 앞부분에 위치해야하기 때문에 CSS에서는 아래와 같은 방식으로 작동하지 않는다.

.header {
  background-color: white;
}

.dark .header {
    background-color: blue; 
}

.header {
  background-color: white;
  .dark & {
    background-color: blue; 
 }
}

• 이럴때 @nest rule은 '&' nesting selector가 있는 한, nesting을 더 유연하게 사용할 수 있도록 도와준다.

.header {
  background-color: white;
  @nest .dark & {
    background-color: blue; 
 }
}

nesting시 주의할 점

• 중첩이 과하게 반복될 경우, specificity issue가 발생할 수 있기 때문에 nesting은 일반적으로 3회까지 하는게 안전하다. 가능한 서술적인 이름의 클래스를 사용하는 것이 좋다.
  ~CSS Specificity란?
• CSS nesting을 사용할 경우 nest 된 selector 앞부분에 모든 스타일이 적용되어야 한다. nesting이 진행되고 나면 뒷부분은 자동적으로 무시된다.

main {
  & section {
    background-color: red;
  }
  color: green; /// 적용X
}

CSS reset

• HTML로 코드를 작성하고 브라우저로 실행해보면 적용하지 않았음에도 불구하고 자동으로 margin이 들어간 경우를 흔히 볼 수 있다.
• 이는 '웹 브라우저'마다 default 값으로 스타일이 적용돼 있기 때문이다.
• 브라우저마다의 기본 디폴트 스타일 값이 아닌 동일한 CSS 스타일을 보여주기 위해 이런 디폴트 값을 초기화 해주어야 한다.

초기화 방법
1) 구글에 "Reset CSS"라고 검색하고 초기화 코드를 찾는다.
2) 사용하는 웹 편집기로 돌아와 CSS 폴더에 reset.css 파일을 생성한 후 복사 붙여넣기 한다.
3) 작업하던 css 파일에 @import를 사용해 리셋 파일을 추가해준다.
4) 초기화 코드 저장 후 개발자 도구에서 확인하면 브라우저 스타일이 초기화된 것을 확인할 수 있다.

참조:
Native CSS nesting: What you need to know
CSS 초기화