सीएसएस नेस्टिंग के लिए सिंटैक्स चुनने में मदद करें

दो सिंटैक्स में से किसी एक को चुनने के लिए, आपकी मदद की ज़रूरत है.

Adam Argyle

Miriam Suzanne

सीएसएस नेस्टिंग, सिंटैक्स में एक सुविधाजनक सुविधा है. इसकी मदद से, सीएसएस को नियमों के सेट में जोड़ा जा सकता है. अगर आपने SCSS, Less या Stylus का इस्तेमाल किया है, तो आपको इनमें से कुछ फ़्लेवर ज़रूर दिखे होंगे:

.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

प्रीप्रोसेसर की मदद से रेगुलर सीएसएस में कंपाइल करने के बाद, यह इस तरह की रेगुलर सीएसएस में बदल जाती है:

.nesting {
  color: hotpink;
}

.nesting > .is {
  color: rebeccapurple;
}

.nesting > .is > .awesome {
  color: deeppink;
}

इस सिंटैक्स के लिए, सीएसएस के आधिकारिक वर्शन को इस्तेमाल करने पर विचार किया जा रहा है. हालांकि, हम इस बारे में एकमत नहीं हैं. इसलिए, हम इस फ़ैसले को लेने के लिए कम्यूनिटी की मदद लेना चाहते हैं. इस पोस्ट के बाकी हिस्से में, सिंटैक्स के विकल्पों के बारे में बताया जाएगा, ताकि आप आखिर में सर्वे में हिस्सा ले सकें.

ऊपर दिया गया नेस्टिंग का उदाहरण, सीएसएस नेस्टिंग का सिंटैक्स क्यों नहीं हो सकता?

सबसे लोकप्रिय नेस्टिंग सिंटैक्स का इस्तेमाल, जैसा है वैसा नहीं किया जा सकता. इसकी कुछ वजहें ये हैं:

1. अस्पष्ट पार्सिंग
   नेस्ट किए गए कुछ सिलेक्टर, प्रॉपर्टी और प्रीप्रोसेसर की तरह दिख सकते हैं. ये बिल्ड के समय उन्हें हल और मैनेज कर सकते हैं. ब्राउज़र इंजन में एक जैसे फ़ंक्शन नहीं होंगे. इसलिए, सिलेक्टर का कभी भी गलत तरीके से इस्तेमाल नहीं किया जाना चाहिए.
   

2. प्रीप्रोसेसर को पार्स करने से जुड़ी समस्याएं
   नेस्ट करने के लिए सीएसएस का इस्तेमाल करने से, प्रीप्रोसेसर काम करना बंद नहीं होने चाहिए या डेवलपर के मौजूदा नेस्टिंग वर्कफ़्लो में रुकावट नहीं आनी चाहिए. इससे उन पारिस्थितिक तंत्रों और कम्यूनिटी को परेशानी होगी और उनका ध्यान भटकेगा.
   

3. :is() का इंतज़ार किया जा रहा है
   बुनियादी नेस्टिंग के लिए :is() की ज़रूरत नहीं होती, लेकिन ज़्यादा जटिल नेस्टिंग के लिए :is() की ज़रूरत होती है. चुनने वाले टूल की सूचियों और नेस्टिंग के बारे में कम शब्दों में जानने के लिए, उदाहरण #3 देखें. मान लें कि सिलेक्टर की सूची, शुरुआत के बजाय सिलेक्टर के बीच में थी. ऐसे मामलों में, सिलेक्टर को किसी दूसरे सिलेक्टर के बीच में ग्रुप करने के लिए, :is() ज़रूरी है.
   

हम किस चीज़ की तुलना कर रहे हैं

हम सीएसएस नेस्टिंग को सही तरीके से लागू करना चाहते हैं. इसलिए, हम कम्यूनिटी को इसमें शामिल कर रहे हैं. नीचे दिए गए सेक्शन में, उन तीन संभावित वर्शन के बारे में बताया गया है जिनका हम आकलन कर रहे हैं. इसके बाद, हम तुलना के लिए इस्तेमाल के कुछ उदाहरणों पर चर्चा करेंगे. साथ ही, आखिर में एक छोटा सा सर्वे होगा, जिसमें आपसे पूछा जाएगा कि आपको इनमें से कौनसा विकल्प ज़्यादा पसंद आया.

पहला विकल्प: @nest

यह सीएसएस नेस्टिंग 1 में मौजूद मौजूदा सिंटैक्स है. यह & के साथ नए नेस्ट किए गए सिलेक्टर शुरू करके, स्टाइल को नेस्ट करने का एक आसान तरीका उपलब्ध कराता है. यह @nest को एक नए सिलेक्टर में कहीं भी & कॉन्टेक्स्ट डालने के तरीके के तौर पर भी इस्तेमाल करता है. जैसे, जब सिर्फ़ विषय जोड़े जा रहे हों. यह सुविधा आसान और कम जगह लेती है. हालांकि, इसके लिए आपको अपने इस्तेमाल के उदाहरण के हिसाब से, @nest या & को याद रखना होगा.

दूसरा विकल्प: @nest restricted

यह एक सख्त विकल्प है. इसका मकसद, नेस्ट करने के दो तरीकों को याद रखने से जुड़ी लागत को कम करना है. पाबंदी वाले इस सिंटैक्स में, सिर्फ़ @nest के बाद नेस्टिंग की अनुमति है. इसलिए, सिर्फ़ जोड़ने के लिए कोई सुविधाजनक पैटर्न नहीं है. इसमें, नेस्ट करने का एक ऐसा तरीका दिया गया है जिसे याद रखना आसान है. हालांकि, इसमें कम शब्दों में जानकारी देने के बजाय, कॉन्वेंशन का इस्तेमाल किया गया है.

ध्यान दें: ध्यान दें कि कम पाबंदियों वाला @nest सिंटैक्स (पहला विकल्प), टीम के लिए इस्तेमाल के नियम को लागू करने के लिए, लिंटर का इस्तेमाल कर सकता है. ऐसा तब किया जा सकता है, जब टीम ने एक साथ यह फ़ैसला लिया हो कि उन्हें अस्पष्टता या कम शब्दों में लिखी गई जानकारी पसंद नहीं है. स्पेसिफ़िकेशन में बदलाव करना, ज़रूरत से ज़्यादा कदम हो सकता है.

तीसरा विकल्प: ब्रैकेट

@nest के प्रपोज़ल में डबल-सिंटैक्स या अतिरिक्त गड़बड़ी से बचने के लिए, मिरियम सुज़ैन और एलिका एतमाद ने एक वैकल्पिक सिंटैक्स का सुझाव दिया. यह सिंटैक्स, अतिरिक्त कर्ली ब्रैकेट पर निर्भर करता है. इससे सिंटैक्स साफ़ तौर पर दिखता है. इसमें सिर्फ़ दो अतिरिक्त वर्ण होते हैं और कोई नया at-rule नहीं होता. इसकी मदद से, नेस्ट किए गए नियमों को नेस्ट करने के तरीके के हिसाब से ग्रुप किया जा सकता है. इससे, नेस्ट किए गए एक जैसे कई सिलेक्टर को आसानी से मैनेज किया जा सकता है.

पहला उदाहरण - डायरेक्ट नेस्टिंग

@nest

.foo {
  color: #111;

  & .bar {
    color: #eee;
  }
}

@nest always

.foo {
  color: #111;

  @nest & .bar {
    color: #eee;
  }
}

ब्रैकेट

.foo {
  color: #111;

  {
    & .bar {
      color: #eee;
    }
  }
}

मिलती-जुलती सीएसएस

.foo {
  color: #111;
}

.foo .bar {
  color: #eee;
}

उदाहरण 2 - कंपाउंड नेस्टिंग

@nest

.foo {
  color: blue;

  &.bar {
    color: red;
  }
}

@nest always

.foo {
  color: blue;

  @nest &.bar {
    color: red;
  }
}

ब्रैकेट

.foo {
  color: blue;

  {
    &.bar {
      color: red;
    }
  }
}

मिलती-जुलती सीएसएस

.foo {
  color: blue;
}

.foo.bar {
  color: red;
}

तीसरा उदाहरण - चुनने वाले टूल की सूचियां और नेस्टिंग

@nest

.foo, .bar {
  color: blue;

  & + .baz,
  &.qux {
    color: red;
  }
}

@nest always

.foo, .bar {
  color: blue;

  @nest & + .baz,
  &.qux {
    color: red;
  }
}

ब्रैकेट

.foo, .bar {
  color: blue;

  {
    & + .baz,
    &.qux {
      color: red;
    }
  }
}

मिलती-जुलती सीएसएस

.foo, .bar {
  color: blue;
}

:is(.foo, .bar) + .baz,
:is(.foo, .bar).qux {
  color: red;
}

चौथा उदाहरण - कई लेवल

@nest

figure {
  margin: 0;

  & > figcaption {
    background: lightgray;

    & > p {
      font-size: .9rem;
    }
  }
}

@nest always

figure {
  margin: 0;

  @nest & > figcaption {
    background: lightgray;

    @nest & > p {
      font-size: .9rem;
    }
  }
}

ब्रैकेट

figure {
  margin: 0;

  {
    & > figcaption {
      background: lightgray;

      {
        & > p {
          font-size: .9rem;
        }
      }
    }
  }
}

मिलती-जुलती सीएसएस

figure {
  margin: 0;
}

figure > figcaption {
  background: hsl(0 0% 0% / 50%);
}

figure > figcaption > p {
  font-size: .9rem;
}

पांचवां उदाहरण - पैरंट नेस्टिंग या विषय में बदलाव

@nest

.foo {
  color: red;

  @nest .parent & {
    color: blue;
  }
}

@nest always

.foo {
  color: red;

  @nest .parent & {
    color: blue;
  }
}

ब्रैकेट

.foo {
  color: red;

  {
    .parent & {
      color: blue;
    }
  }
}

मिलती-जुलती सीएसएस

.foo {
  color: red;
}

.parent .foo {
  color: blue;
}

उदाहरण 6 - डायरेक्ट और पैरंट नेस्टिंग को मिलाना

@nest

.foo {
  color: blue;

  @nest .bar & {
    color: red;

    &.baz {
      color: green;
    }
  }
}

@nest always

.foo {
  color: blue;

  @nest .bar & {
    color: red;

    @nest &.baz {
      color: green;
    }
  }
}

ब्रैकेट

.foo {
  color: blue;

  {
    .bar & {
      color: red;

      {
        &.baz {
          color: green;
        }
      }
    }
  }
}

मिलती-जुलती सीएसएस

.foo {
  color: blue;
}

.bar .foo {
  color: red;
}

.bar .foo.baz {
  color: green;
}

सातवां उदाहरण - मीडिया क्वेरी नेस्टिंग

@nest

.foo {
  display: grid;

  @media (width => 30em) {
    grid-auto-flow: column;
  }
}

या साफ़ तौर पर / बढ़ाया गया

.foo {
  display: grid;

  @media (width => 30em) {
    & {
      grid-auto-flow: column;
    }
  }
}

@nest always (हमेशा साफ़ तौर पर दिखता है)

.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;
    }
  }
}

मिलती-जुलती सीएसएस

.foo {
  display: grid;
}

@media (width => 30em) {
  .foo {
    grid-auto-flow: column;
  }
}

ध्यान दें: एक आसान सिंटैक्स है, जिसे इंप्लिसिट नेस्टिंग कहा जाता है. हर उदाहरण में सबसे ऊपर/पहले दिए गए उदाहरण, इनपुट के हिसाब से नेस्ट करने की सुविधा दिखाते हैं. इसमें स्टाइल नियमों का दायरा, इनपुट के हिसाब से नेस्ट किए गए सिलेक्टर के दायरे पर लागू होता है. जब एक से ज़्यादा नेस्ट किए गए सिलेक्टर मौजूद होने चाहिए, तो इनपुट के लिए नेस्ट किए गए एलिमेंट में बदलाव करना ज़रूरी होता है. इसके बाद, आपको नेस्ट किए गए एलिमेंट के लिए, साफ़ तौर पर नेस्ट करने के तरीके का इस्तेमाल करना होगा.

आठवां उदाहरण - नेस्ट किए गए ग्रुप

@nest

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 always

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;
      }
    }}
  }
}

मिलती-जुलती सीएसएस

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 - जटिल नेस्टिंग ग्रुप "किचन सिंक"

@nest

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 always

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;
    }
  }
}

मिलती-जुलती सीएसएस

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;
}

वोट करने का समय

हमें उम्मीद है कि आपको यह तुलना सही लगी होगी. साथ ही, हमने सिंटैक्स के उन विकल्पों के सैंपल भी दिए हैं जिनका हम आकलन कर रहे हैं. कृपया इन विकल्पों को ध्यान से देखें और हमें बताएं कि आपको कौनसा विकल्प पसंद है. CSS नेस्टिंग को बेहतर सिंटैक्स में बदलने में हमारी मदद करने के लिए धन्यवाद. हम सभी इसे जानेंगे और पसंद करेंगे!

सर्वे में हिस्सा लें!