두 가지 경쟁 구문은 사양 후보에 우위를 점할 수 있는 구문을 결정하는 데 사용자의 도움이 필요합니다.
CSS 중첩은 규칙 집합 내에 CSS를 추가할 수 있는 편리한 문법 추가 기능입니다. SCSS, 낮음 또는 스타일러스를 사용해 본 적이 있다면 가장 확실하게 다음과 같은 몇 가지 버전을 확인했을 것입니다.
.nesting {
color: hotpink;
> .is {
color: rebeccapurple;
> .awesome {
color: deeppink;
}
}
}
전처리기에서 일반 CSS로 컴파일한 후 다음과 같이 일반 CSS로 변환됩니다.
.nesting {
color: hotpink;
}
.nesting > .is {
color: rebeccapurple;
}
.nesting > .is > .awesome {
color: deeppink;
}
이 구문의 공식 CSS 버전은 강력하게 고려되고 있으며, 커뮤니티의 도움을 받아 관계를 중단하는 것을 선호합니다. 이 게시물의 나머지 부분에서는 마지막에 설문조사 참여에 대한 정보를 얻을 수 있도록 구문 옵션을 소개하겠습니다.
위에 표시된 정확한 중첩 예시가 CSS 중첩 구문이 될 수 없는 이유는 무엇인가요?
가장 많이 사용되는 중첩 구문을 그대로 사용할 수 없는 몇 가지 이유는 다음과 같습니다.
모호한 파싱
일부 중첩된 선택기는 빌드 시 이를 확인하고 관리할 수 있는 속성 및 전처리기와 완전히 같아 보일 수 있습니다. 브라우저 엔진은 동일한 어포던스를 가지지 않으며 선택기는 느슨하게 해석할 필요가 없습니다.전처리기 파싱 충돌
CSS 중첩 방식이 전처리기 또는 기존 개발자 중첩 워크플로를 중단해서는 안 됩니다. 이는 생태계와 커뮤니티에 지장을 주고, 배려가 되지 않을 수 있습니다.:is()대기 중
기본 중첩에는:is()가 필요하지 않지만 더 복잡한 중첩에는 필요합니다. 선택기 목록 및 중첩에 관한 간단한 소개는 예 3을 참고하세요. 선택기 목록이 시작 부분이 아닌 선택기 중앙에 있다고 가정해 보겠습니다. 이 경우 다른 선택기 중간에 선택기를 그룹화하려면:is()가 필요합니다.
비교 대상 개요
Google은 CSS를 올바르게 중첩하고자 하며, 이를 위해 커뮤니티를 포함하고 있습니다. 다음 섹션에서는 Google에서 평가할 세 가지 버전을 설명합니다. 그런 다음 비교를 위해 사용 예시를 살펴보고 마지막으로 어떤 방식을 선호하는지 묻는 간단한 설문조사가 진행됩니다.
옵션 1: @nest
다음은 현재 CSS 중첩 1에 지정된 구문입니다. &로 새로운 중첩 선택기를 시작하여 추가 스타일을 중첩하는 편리한 방법을 제공합니다. 또한 주제를 추가하지 않는 경우와 같이 새로운 선택기 내부의 어디에나 & 컨텍스트를 배치하는 방법으로 @nest를 제공합니다. 유연하고 간단하지만 사용 사례에 따라 @nest 또는 &를 기억해야 하는 비용이 듭니다.
옵션 2: @nest 제한됨
이는 두 개의 중첩 메서드를 기억하는 데 드는 비용을 줄이기 위한 더욱 엄격한 대안입니다. 이 제한된 구문은 @nest 다음에 중첩되는 것만 허용하므로 추가 전용 편의성 패턴은 없습니다. 선택의 모호성을 제거하여 기억하기 쉬운 중첩 방법을 만들지만, 규칙을 지키기 위해 간결함을 포기하게 됩니다.
옵션 3: 대괄호
@nest 제안과 관련된 이중 구문이나 추가적인 복잡성을 피하기 위해 Miriam Suzanne과 Elika Etemad는 중괄호를 추가로 사용하는 대체 구문을 제안했습니다. 이렇게 하면 단 두 개의 추가 문자만 있고 새로운 @ 규칙 없이 구문이 명확해집니다. 또한 여러 개의 비슷하게 중첩된 선택기를 단순화하기 위해 필요한 중첩 유형별로 중첩된 규칙을 그룹화할 수 있습니다.
예시 1 - 직접 중첩
@중동
.foo {
color: #111;
& .bar {
color: #eee;
}
}
@nest 항상
.foo {
color: #111;
@nest & .bar {
color: #eee;
}
}
대괄호
.foo {
color: #111;
{
& .bar {
color: #eee;
}
}
}
상응하는 CSS
.foo {
color: #111;
}
.foo .bar {
color: #eee;
}
예 2 - 복합 중첩
@중동
.foo {
color: blue;
&.bar {
color: red;
}
}
@nest 항상
.foo {
color: blue;
@nest &.bar {
color: red;
}
}
대괄호
.foo {
color: blue;
{
&.bar {
color: red;
}
}
}
상응하는 CSS
.foo {
color: blue;
}
.foo.bar {
color: red;
}
예 3 - 선택기 목록 및 중첩
@중동
.foo, .bar {
color: blue;
& + .baz,
&.qux {
color: red;
}
}
@nest 항상
.foo, .bar {
color: blue;
@nest & + .baz,
&.qux {
color: red;
}
}
대괄호
.foo, .bar {
color: blue;
{
& + .baz,
&.qux {
color: red;
}
}
}
상응하는 CSS
.foo, .bar {
color: blue;
}
:is(.foo, .bar) + .baz,
:is(.foo, .bar).qux {
color: red;
}
예 4 - 여러 수준
@중동
figure {
margin: 0;
& > figcaption {
background: lightgray;
& > p {
font-size: .9rem;
}
}
}
@nest 항상
figure {
margin: 0;
@nest & > figcaption {
background: lightgray;
@nest & > p {
font-size: .9rem;
}
}
}
대괄호
figure {
margin: 0;
{
& > figcaption {
background: lightgray;
{
& > p {
font-size: .9rem;
}
}
}
}
}
상응하는 CSS
figure {
margin: 0;
}
figure > figcaption {
background: hsl(0 0% 0% / 50%);
}
figure > figcaption > p {
font-size: .9rem;
}
예 5 - 상위 중첩 또는 주체 변경
@중동
.foo {
color: red;
@nest .parent & {
color: blue;
}
}
@nest 항상
.foo {
color: red;
@nest .parent & {
color: blue;
}
}
대괄호
.foo {
color: red;
{
.parent & {
color: blue;
}
}
}
상응하는 CSS
.foo {
color: red;
}
.parent .foo {
color: blue;
}
예 6 - 직접 중첩과 상위 중첩 혼합
@중동
.foo {
color: blue;
@nest .bar & {
color: red;
&.baz {
color: green;
}
}
}
@nest 항상
.foo {
color: blue;
@nest .bar & {
color: red;
@nest &.baz {
color: green;
}
}
}
대괄호
.foo {
color: blue;
{
.bar & {
color: red;
{
&.baz {
color: green;
}
}
}
}
}
상응하는 CSS
.foo {
color: blue;
}
.bar .foo {
color: red;
}
.bar .foo.baz {
color: green;
}
예시 7 - 미디어 쿼리 중첩
@중동
.foo {
display: grid;
@media (width => 30em) {
grid-auto-flow: column;
}
}
또는 명시적으로 / 확장된
.foo {
display: grid;
@media (width => 30em) {
& {
grid-auto-flow: column;
}
}
}
@nest 항상 (항상 명시)
.foo {
display: grid;
@media (width => 30em) {
@nest & {
grid-auto-flow: column;
}
}
}
대괄호
.foo {
display: grid;
@media (width => 30em) {
grid-auto-flow: column;
}
}
또는 명시적으로 / 확장된
.foo {
display: grid;
@media (width => 30em) {
& {
grid-auto-flow: column;
}
}
}
상응하는 CSS
.foo {
display: grid;
}
@media (width => 30em) {
.foo {
grid-auto-flow: column;
}
}
예 8 - 그룹 중첩
@중동
fieldset {
border-radius: 10px;
&:focus-within {
border-color: hotpink;
}
& > legend {
font-size: .9em;
}
& > div {
& + div {
margin-block-start: 2ch;
}
& > label {
line-height: 1.5;
}
}
}
@nest 항상
fieldset {
border-radius: 10px;
@nest &:focus-within {
border-color: hotpink;
}
@nest & > legend {
font-size: .9em;
}
@nest & > div {
@nest & + div {
margin-block-start: 2ch;
}
@nest & > label {
line-height: 1.5;
}
}
}
대괄호
fieldset {
border-radius: 10px;
{
&:focus-within {
border-color: hotpink;
}
}
> {
legend {
font-size: .9em;
}
div {
+ div {
margin-block-start: 2ch;
}
> label {
line-height: 1.5;
}
}}
}
}
상응하는 CSS
fieldset {
border-radius: 10px;
}
fieldset:focus-within {
border-color: hotpink;
}
fieldset > legend {
font-size: .9em;
}
fieldset > div + div {
margin-block-start: 2ch;
}
fieldset > div > label {
line-height: 1.5;
}
예 9 - 복잡한 중첩 그룹 '주방 싱크'
@중동
dialog {
border: none;
&::backdrop {
backdrop-filter: blur(25px);
}
& > form {
display: grid;
& > :is(header, footer) {
align-items: flex-start;
}
}
@nest html:has(&[open]) {
overflow: hidden;
}
}
@nest 항상
dialog {
border: none;
@nest &::backdrop {
backdrop-filter: blur(25px);
}
@nest & > form {
display: grid;
@nest & > :is(header, footer) {
align-items: flex-start;
}
}
@nest html:has(&[open]) {
overflow: hidden;
}
}
대괄호
dialog {
border: none;
{
&::backdrop {
backdrop-filter: blur(25px);
}
& > form {
display: grid;
{
& > :is(header, footer) {
align-items: flex-start;
}
}
}
}
{
html:has(&[open]) {
overflow: hidden;
}
}
}
상응하는 CSS
dialog {
border: none;
}
dialog::backdrop {
backdrop-filter: blur(25px);
}
dialog > form {
display: grid;
}
dialog > form > :is(header, footer) {
align-items: flex-start;
}
html:has(dialog[open]) {
overflow: hidden;
}
투표 시간
Google에서 평가하는 구문 옵션의 공정한 비교 샘플이 되셨기를 바랍니다. 약관을 주의 깊게 검토한 후 아래에서 원하는 옵션을 알려 주세요. 모두가 알고 좋아할 구문으로 CSS 중첩을 발전시키는 데 도움을 주셔서 감사합니다.