css style Cascade Layers에 대한 정리

css는 지정하는 방식에 따라 스타일 우선순위가 적용된다. (보통 6가지로 정의된다.)

 

1. css 스타일을 선언할때 생기는 우선순위

1-1. !important를 사용한 경우
1-2. html에 style로 인라인 속성을 지정한 경우
1-3. id로 선언한 경우
1-4. class, 의사클래스(&:hover와 같은)로 적용한 경우
1-5. html 태그로 직접 정의한 경우
1-6. 상속으로 지정한 경우(부모 스타일이 자식 스타일까지 적용)

 

보통적용 우선순위는 위 순서(1-1 > 1-2 > 1-3 > 1-4 > 1-5 > 1-6)로 적용이 되지만,

위는 명시도에 따라 적용이 된다.

 

2. 명시도란?

명시도는 스타일이 적용되는 우선순위로 수치가 클 수록 우선순위가 높다.

단, !important는 최우선 순위를 갖는다.

인라인 스타일	인라인 스타일 선언시 1000단위 명시도 증가
id	100단위 명시도 증가
class,:hover, :focus ..	10단위 명시도 증가
요소, 태그	1단위 명시도 증가

 

3. 특정 그룹간의 우선순위를 정하고자 한다면 ? @layer를 사용하자

- @layer는 스타일 레이어로 레이어들끼리 우선순위를 정할 수 있다.

- 레이어안에 있는 스타일들의 우선순위는 명시도, 선언순서의 영향을 주지 않는다.

@layer txt-style1 {
 .txt1{
 font-size:2rem;
 }
}

이름을 짓지 않고 익명레이어 생성이 가능하다.

하지만 익명 레이어의 경우에는 식별가능한 이름이 없으므로 레이어 안에 있는 스타일을 편집할 수 없다.

 

* @layer로 선언하지 않은 스타일은 높은 우선순위를 가지게 된다.

.txt1{
  font-size:5rem;
}

@layer txt-style1 {
 .txt1{
 font-size:2rem;
 }
}

///결과
///txt1 : font-size:5rem;

 

특징 : 레이어 그룹간의 순서를 정할 수 있다.

@layer txt-style1 {
 .txt1{
 font-size:2rem;
 }
}

@layer txt-style2 {
 .txt1{
 font-size:3rem;
 }
}

@layer txt-style3 {
 .txt1{
 font-size:4rem;
 }
}

 

위 와 같이 레이어가 정의 되면 적용 순위는 txt-size3 > txt-size2 > txt-size1 순이다.

하지만 중간에 !important가 들어가면 순서가 무시된다. (!important가 1순위)

 

혹은 레이어의 순서를 미리 정할 수 도 있다.

@layer txt-style2, txt-style1, txt-style3 
///위와 같이 순서를 정하면 txt-style2, txt-style1, txt-style3 순서대로 적용이 된다.

 

 

4. 레이어의 이름을 재사용하면서 속성을 추가할 수 있다.

@layer txt-style1 {
 .txt1{
 font-size:2rem;
 }
}

@layer txt-style2 {
 .txt1{
 font-size:3rem;
 }
}

@layer txt-style3 {
 .txt1{
 font-size:4rem;
 }
}

@layer txt-style1{
  color:red;
}

 

 

5. @layer 끼리의 중첩이 가능하다.

@layer base{}
@layer box{
  @layer fist{}
  @layer second{}
}

//위의 순서는 box(second > first) > base

 

중첩레이어를 수정하고 싶다면 온점을 이용해서 수정한다.

@layer base{}
@layer box{
  @layer fist{}
  @layer second{}
}

중첩레이어 second에 접근하기 위해서는
@layer box.second{...}

 

6. revert-layer로 되돌릴 수 있다.

//<p class="text">안녕하세요.</p> 라는 가정하에

@layer base{
  p{
    color:red;
  }
}

@layer change{
  p{
    color:orange;
  }
  
  .text{
    color:revert-layer;
  }
}


//결국엔 p의 색상은 red가 된다.

 

 

공통으로 적용해야 하는 스타일들이 있다면 layer를 활용해 그룹화해서 사용하면 되긴 하겠지만 협업 시에는 다른사람이 어떤 layer를 만들었는지 분석하고 확인해야하기때문에 은근 시간이..걸릴거 같다...

 

 

 

 

참고 : https://developer.mozilla.org/en-US/docs/Web/CSS/@layer

https://mong-blog.tistory.com/entry/CSS-%EC%8A%A4%ED%83%80%EC%9D%BC-%EC%9A%B0%EC%84%A0%EC%88%9C%EC%9C%84%EB%A5%BC-%EC%A0%95%ED%95%98%EB%8A%94-Cascade-Layerlayer-1