AAtomic CSS

all

요소의 모든 CSS 속성을 한꺼번에 초기화합니다. 외부 스타일이나 상속된 스타일을 완전히 리셋하고 싶을 때 사용하는 강력한 속성입니다.

클래스 목록

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스CSS설명
alliall: initial모든 속성을 CSS 명세의 초기값으로 리셋
allinhall: inherit모든 속성을 부모로부터 상속
allunall: unset상속 속성은 inherit, 비상속 속성은 initial
allrall: revert브라우저 기본 스타일시트 값으로 복원

값 비교

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">값상속 속성비상속 속성
initialInitial value (ignores inheritance)Initial value
inheritInherits parent valueInherits parent value (forced)
unsetInherits parent valueInitial value
revertBrowser defaultBrowser default

사용 예시

<!-- Reset external library styles -->
<div class="third-party-widget alli">
  <p class="db cFAFAFA fs16px">All styles reset, only Atomic CSS applied</p>
</div>

<!-- Restore browser default styles -->
<div class="allr">
  <h1>Browser default h1 style applied</h1>
  <p>Browser default p style applied</p>
</div>

<!-- Fully inherit parent styles -->
<div class="cFAFAFA fs16px">
  <span class="allinh">Inherits all parent color, font-size, etc.</span>
</div>

팁 & 주의사항

주의해서 사용

all은 모든 속성을 리셋하므로 display, position 등도 초기화됩니다. 리셋 후 필요한 속성을 다시 설정해야 합니다.

revert가 가장 안전

allr(revert)는 브라우저 기본 스타일로 돌아가므로 div는 block, span은 inline을 유지합니다. 가장 예측 가능한 결과를 얻을 수 있습니다.

displayvisibility