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

प्रतिस्पर्धा करने वाले दो सिंटैक्स को यह तय करने में आपकी मदद चाहिए कि किस सिंटैक्स को खास जानकारी के लिए चुना जाना चाहिए.

एडम आर्गाइल

Twitter GitHub

मिरियम सुज़ान

Twitter

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

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

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

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

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

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

दूसरा विकल्प: @nest पर पाबंदी लगाई गई है

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

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

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

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

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

@nest

.foo {
  color: #111;

  & .bar {
    color: #eee;
  }
}

@nest हमेशा

.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 हमेशा

.foo {
  color: blue;

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

ब्रैकेट

.foo {
  color: blue;

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

समान सीएसएस

.foo {
  color: blue;
}

.foo.bar {
  color: red;
}

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

@nest

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

समान सीएसएस

.foo, .bar {
  color: blue;
}

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

उदाहरण 4 - एक से ज़्यादा लेवल

@nest

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

समान सीएसएस

figure {
  margin: 0;
}

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

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

उदाहरण 5 - पैरंट नेस्टिंग या सब्जेक्ट चेंज करना

@nest

.foo {
  color: red;

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

@nest हमेशा

.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 हमेशा

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

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

@nest

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

समान सीएसएस

.foo {
  display: grid;
}

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

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

उदाहरण 8 - नेस्टिंग ग्रुप

@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 हमेशा

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 हमेशा

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

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

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

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