DongHyeonkaandClaude Opus 5
193da20d09
게시된 Reference 15편이 전부 규칙을 `### N. 제목` 으로 쓰고 적용 조건·예외·예시를 항목으로 쓴다. 내 15편은 규칙을 `**굵게**` 로, 나머지 셋을 문단으로 쓰고 있었다 — Studio 의 rules[]·applyWhen[]·exceptions[]·examples[] 는 배열이라 문단으로 두면 항목이 하나로 접힌다. 규칙 68개를 `### N. 제목` 으로 바꿨다 (편당 3~7개, 게시된 것은 4~10개) 적용 조건·예외·예시를 항목으로 갈랐다. 한 항목뿐이던 아홉 편은 조건을 나눠 적었다 주제 6 은 본문을 다시 썼다 — location = 이 정확히 일치하는 경로만 잡아 27개가 얼어붙은 구조, 여덟 곳이 우는 시점을 셋으로 가른 표, digest 를 다시 계산할 때 옛 값을 먼저 재현하는 이유. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2.9 KiB
2.9 KiB
kind, slug, title, topic, topicName, project, status, verifiedOn, sourceRevision, source
| kind | slug | title | topic | topicName | project | status | verifiedOn | sourceRevision | source | |
|---|---|---|---|---|---|---|---|---|---|---|
| REFERENCE | scope-a-layout-rule-to-what-uses-it | 배치를 거는 규칙은 그 배치를 쓰는 요소까지 좁혀 적는다 | css-rules-that-leak | CSS 규칙이 구역을 넘어 샌다 | TechLog | 게시 전 | 2026-09-04 | tech-log@2026-09-02 |
|
배치를 거는 규칙은 그 배치를 쓰는 요소까지 좁혀 적는다
구역 클래스 아래에 태그 선택자로 배치를 걸면 그 구역 안의 모든 같은 태그가 걸린다. 제목 안의 링크가 행용 격자에 갇혀 h2 높이가 199px 이 됐다. 배치를 거는 규칙은 그 배치를 쓰는 요소까지 좁혀 적는다.
관계
- 구역 전체에 건 격자가 제목까지 잡아 h2 높이가 199px 이 됐다 이 기준의 근거 사건이다.
- 프록시 지표가 아니라 보이는 것을 측정한다 이 부류를 확인하는 방법이 그 기준에 있다.
- 규칙이 없었던 게 아니라 절반만 있었다 같은 화면에서 난 다른 부류의 CSS 결함이다.
목적
「디자인이 안 된 것처럼 보인다」는 보고의 원인이 되는 선택자 누출을 막는다. 이 부류는 규칙 자체는 맞고 걸리는 대상이 넓다.
규칙
1. 배치 속성은 그 배치를 쓰는 요소까지 좁혀 적는다
display: grid|flex, grid-template-columns, padding 을 구역 클래스 아래 태그 선택자로 걸지 않는다.
2. CSS 만으로 막지 않고 구조도 본다
선택자를 좁히면 같은 구조가 다시 생겼을 때 다시 샌다. 제목 안에 링크를 두지 않는 편이 낫다.
3. 이미 좁혀 둔 곳은 검사에서 명시적으로 뺀다
예외를 적어 두지 않으면 검사 결과가 늘 빨갛고 곧 읽히지 않는다.
4. 전역 규칙과 CSS module 이 섞인 화면을 따로 센다
전역 규칙을 고쳐도 module 을 쓰는 화면에는 닿지 않는다. 한 화면 안에서 두 언어가 섞이면 더 눈에 띈다.
적용 조건
- 구역 클래스 아래에 태그 선택자로 배치를 거는 CSS 를 쓸 때
- 같은 구역 안에 제목과 목록이 함께 있을 때
- 전역 규칙과 CSS module 이 한 화면에 섞여 있을 때
- 「디자인이 안 된 것처럼 보인다」는 보고를 받았을 때
예외
-
색이나 글꼴만 거는 규칙은 새어도 티가 나지 않으므로 대상이 아니다.
-
구역 안의 모든 같은 태그가 실제로 같은 배치를 써야 하는 화면이라면 좁히지 않아도 된다. 그때는 그 의도를 검사의 예외 목록에 적는다.
예시
-
비교 행을 위한 격자가 제목 안의 링크까지 잡아 제목이 200px 칸에 갇혔다.
-
같은 모양이 다른 구역 아홉 곳에도 있어 선택자 51개를 고쳤다.
section-selector-scope.test.ts 가 .클래스 태그 모양에 배치 속성이 걸려 있으면 멈춘다.