프론트엔드 면접 질문 정리 [CSS #2 selector]

전창현·2020년 8월 14일
0

CSS cascade

specificity

inheritance

CSS cascade

cascade가 적용되는 CSS 요소

property/value 쌍으로 이루어진 CSS declarations

  • 일반적인 셀렉터에 의한 모든 CSS declarations는 cascade 알고리즘에 적용되고
  • CSS declaration을 포함하지 않는 at-rules (ex) @font-face)는 cascade에 적용되지 않는다.
  • 반면 at-rules이지만 CSS declaration을 포함하는 @media , @document, @supports는 cascade에 적용된다.
  • 예외적으로 @keyframes는 CSS delcaration을 포함하지만 cascade에 적용되지 않는다.
  • @import @charset 또한 예외적으로 specific한 알고리즘을 따르므로 cascade에 적용되지 않는다.

Origin of CSS declarations

CSS 선언은 origin에 따라 다음과 같이 분류된다.

  • User-agent stylesheets
    • browser에 의해 제공되는 document의 default stylesheet
  • Author stylesheets
    • webpage의 author에 의해 작성된 stylesheet
  • User stylesheets
    • browser를 사용하는 user에 의해 적용되는 stylesheet

Cascade 알고리즘은 CSS 선언에 따라 document element의 CSS property에 value를 할당해 요소를 스타일링하는데

CSS 선언은 scope 내에서 서로 다른 origin에 의해 중복이 발생할 수 있다.

CSS cascade 알고리즘은 이러한 중복 선언을 CSS origin에 우선 순위를 두어 해결한다.

Cascading order

  1. media에 따라 element와 일치하는 selector를 필터링한다.

  2. element와 일치하는 selectors를 importance에 따라 정렬한다.

  1. 좌측의 숫자가 높을수록 높은 우선 순위를 가지며 우선순위가 동일할 경우 selector의 specificity에 따라 최종 결정된다.

Specificity

origin의 importance가 동일할 경우 동일 element에 적용되는 selectors의 우선 순위는 specificity에 의해 결정된다.

specificity는 CSS 선언에 적용되는 가중치로 selector를 구성하는 selector type들이 갖는 weight에 대한 합이다.

Selector types

ones

  • type selectors
  • pseudo elements

tens

  • class selectors
  • attributes selectors
  • pseudo classes

hundreds

  • ID selectors

thousands

  • inline styles

weight를 갖지 않는 selectors

  • universal
  • combinators ( + > ~ ' ' || )
  • negation pseudo class

!important exception

important rule은 다른 css 선언들을 덮어씌운다.

만약 동일 element에서 !important가 적용된 선언이 중복될 경우 specificity에 따라 결정된다.

  • 일반적인 cascading을 깨뜨려 디버깅이 어려워지므로 지양한다.
  • 라이브러리와 같은 외부 CSS를 특정 페이지에서 override할 때 사용한다.
  • important대신 id를 사용
  • id를 사용했음에도 specificity가 동일할 경우 selector를 duplicate한다.
#myId#myId {};
.myClass.myClass {};

그렇다면 언제 !important를 사용하는지?

  • inline style을 override할 경우
.foo[style*="color: red"] { 
  color: firebrick !important;
}
  • high specificity를 override할 경우
#someElement p {
  color: blue;
}

p.awesome { 
  color: red;
}
//이 상황에서는 !important를 사용하지 않고 p.awesome만 건드릴 방법이 없다.

//but, [id="someElement"] p{}로 바꿀 경우 해결 가능

proximity ignorance

우선순위가 동일할 경우 하위에 작성된 코드가 적용된다.

body h1 {
  color: green;
}

html h1 {
  color: purple;
}

// color : purple

Directly targeted elements vs. inherited styles

<body id="parent">
    <h1>Here is a title!</h1>
</body>

#parent {
  color: green;
}

h1 {
  color: purple;
}

// color : purple

Inheritance

CSS properties는 inherit 유무에 따라 다음으로 구분된다.

  • inherited properties
    • default value : 부모 요소의 computed value
    • ex) : color
  • non-inherited properties
    • default value : 속성의 initial value
    • ex) : border, padding, margin

author가 CSS 속성을 직접 inherit하는 방법

font {
all : revert;
};

/* font : shorthand property
font-family
font-size
font-stretch
font-style
font-variant
font-weight
line-height
*/

a {
color: inherit;
};

inherit 시 사용되는 CSS value

  • inherit
  • initial
    • element property의 default value
  • unset
    • property가 inherit하는 property일 경우, inherited value를.
    • inherit하지 않는 경우, initial value
  • revert

0개의 댓글