CSS নেস্টিংয়ের জন্য একটি সিনট্যাক্স বাছাই করতে সহায়তা করুন

একটি স্পেসিফিকেশন প্রার্থীর মাধ্যমে কোনটি চ্যাম্পিয়ন হওয়া উচিত তা নির্ধারণ করতে দুটি প্রতিযোগী বাক্য গঠনের আপনার সাহায্যের প্রয়োজন।

Adam Argyle

Miriam Suzanne

CSS নেস্টিং হল একটি সুবিধাজনক সিনট্যাক্স সংযোজন যা CSSকে একটি নিয়ম সেটের ভিতরে যোগ করার অনুমতি দেয়। আপনি যদি SCSS , Less বা Stylus ব্যবহার করে থাকেন, তাহলে আপনি অবশ্যই এর কয়েকটি স্বাদ দেখেছেন:

.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

যা প্রিপ্রসেসর দ্বারা নিয়মিত সিএসএসে কম্পাইল হওয়ার পরে, এটির মতো নিয়মিত সিএসএসে পরিণত হয়:

.nesting {
  color: hotpink;
}

.nesting > .is {
  color: rebeccapurple;
}

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

এই সিনট্যাক্সের একটি অফিসিয়াল CSS সংস্করণ দৃঢ়ভাবে বিবেচনা করা হচ্ছে এবং আমাদের পছন্দের মধ্যে একটি বিভাজন রয়েছে যে আমরা টাই ভাঙতে সম্প্রদায়ের সাহায্য নিযুক্ত করতে চাই। এই পোস্টের বাকি অংশে সিনট্যাক্স বিকল্পগুলি উপস্থাপন করা হবে যাতে আপনি শেষ পর্যন্ত একটি সমীক্ষা করার জন্য অবহিত বোধ করতে পারেন।

উপরে দেখানো সঠিক নেস্টিং উদাহরণ কেন CSS নেস্টিংয়ের জন্য সিনট্যাক্স হতে পারে না?

সর্বাধিক জনপ্রিয় নেস্টিং সিনট্যাক্স ব্যবহার করা যাবে না এমন কয়েকটি কারণ রয়েছে:

1. অস্পষ্ট পার্সিং
   কিছু নেস্টেড নির্বাচক দেখতে হুবহু বৈশিষ্ট্যের মতো হতে পারে এবং প্রিপ্রসেসরগুলি বিল্ড সময়ে সমাধান করতে এবং পরিচালনা করতে সক্ষম। ব্রাউজার ইঞ্জিনে একই সামর্থ্য থাকবে না, নির্বাচকদের কখনই আলগাভাবে ব্যাখ্যা করা উচিত নয়।
   

2. প্রিপ্রসেসর পার্সিং দ্বন্দ্ব
   নেস্টিং এর CSS উপায় প্রিপ্রসেসর বা বিদ্যমান ডেভেলপার নেস্টিং ওয়ার্কফ্লোগুলিকে ভাঙবে না । এটি সেই বাস্তুতন্ত্র এবং সম্প্রদায়ের জন্য বিঘ্নিত এবং বিবেচনাহীন হবে।
   

3. এর জন্য অপেক্ষা করছি :is()
   বেসিক নেস্টিংয়ের প্রয়োজন নেই :is() তবে আরও জটিল নেস্টিং করে। নির্বাচক তালিকা এবং নেস্টিংয়ের হালকা ভূমিকার জন্য উদাহরণ #3 দেখুন। কল্পনা করুন যে নির্বাচক তালিকাটি শুরুতে পরিবর্তে একটি নির্বাচকের মাঝখানে ছিল, এই ক্ষেত্রে :is() অন্য নির্বাচকের মাঝখানে নির্বাচকদের গ্রুপ করার জন্য প্রয়োজন।
   

আমরা কি তুলনা করছি তার সংক্ষিপ্ত বিবরণ

আমরা সিএসএস নেস্টিং সঠিকভাবে পেতে চাই, এবং সেই চেতনায় আমরা সম্প্রদায়কে অন্তর্ভুক্ত করছি। নিম্নলিখিত বিভাগগুলি আমরা যে তিনটি সম্ভাব্য সংস্করণ মূল্যায়ন করছি তা বর্ণনা করতে সাহায্য করবে৷ তারপরে আমরা তুলনা করার জন্য ব্যবহারের কিছু উদাহরণ দেখব, এবং শেষে একটি হালকা সমীক্ষা হবে যা আপনাকে জিজ্ঞাসা করবে যে আপনি সামগ্রিকভাবে কোনটি পছন্দ করেছেন৷

বিকল্প 1: @nest

এটি CSS নেস্টিং 1 -এ বর্তমান নির্দিষ্ট সিনট্যাক্স। এটি & সাথে নতুন নেস্টেড নির্বাচকদের শুরু করে সংযুক্ত শৈলী নেস্ট করার একটি সুবিধাজনক উপায় অফার করে। এটি একটি নতুন নির্বাচকের অভ্যন্তরে যেকোনও জায়গায় & প্রসঙ্গ রাখার উপায় হিসাবে @nest অফার করে, যেমন আপনি যখন শুধু বিষয় যুক্ত করছেন না। এটি নমনীয় এবং ন্যূনতম কিন্তু আপনার ব্যবহারের ক্ষেত্রে @nest বা & উপর নির্ভর করে মনে রাখতে হবে।

বিকল্প 2: @nest সীমাবদ্ধ

এটি একটি কঠোর বিকল্প, দুটি নেস্টিং পদ্ধতি মনে রাখার জন্য উল্লিখিত খরচ কমানোর প্রয়াসে। এই সীমাবদ্ধ সিনট্যাক্সটি শুধুমাত্র @nest অনুসরণে নেস্টিং ঘটতে দেয়, তাই শুধুমাত্র সুবিধার প্যাটার্ন যুক্ত করা নেই। পছন্দের অস্পষ্টতা দূর করা, মনে রাখার মতো একটি সহজ উপায় তৈরি করা, কিন্তু কনভেনশনের পক্ষে স্থবিরতা ত্যাগ করা।

দ্রষ্টব্য: এটি লক্ষণীয় যে কম সীমাবদ্ধ @nest সিনট্যাক্স (বিকল্প 1) একটি লিন্টার ব্যবহার করে একটি দল জুড়ে ব্যবহারের নিয়ম প্রয়োগ করতে পারে, যদি তারা একসাথে সিদ্ধান্ত নেয় যে তারা অস্পষ্টতা বা স্থবিরতা পছন্দ করে না। বৈশিষ্ট পরিবর্তন একটি চরম পরিমাপ হতে পারে.

বিকল্প 3: বন্ধনী

@nest প্রস্তাবনার সাথে জড়িত ডবল-সিনট্যাক্স বা অতিরিক্ত বিশৃঙ্খলা এড়াতে, মিরিয়াম সুজান এবং এলিকা এটেম্যাড একটি বিকল্প সিনট্যাক্স প্রস্তাব করেছেন যা পরিবর্তে অতিরিক্ত কোঁকড়া-বন্ধনীর উপর নির্ভর করে। এটি শুধুমাত্র দুটি অতিরিক্ত অক্ষর সহ সিনট্যাক্স স্পষ্টতা প্রদান করে এবং কোন নতুন নিয়ম নেই। এটি একাধিক একইভাবে নেস্টেড নির্বাচককে সরলীকরণের উপায় হিসাবে প্রয়োজনীয় নেস্টিংয়ের ধরন অনুসারে নেস্টেড নিয়মগুলিকে গোষ্ঠীভুক্ত করার অনুমতি দেয়।

উদাহরণ 1 - সরাসরি বাসা বাঁধা

@নীড়

.foo {
  color: #111;

  & .bar {
    color: #eee;
  }
}

@নেস্ট সবসময়

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

@নেস্ট সবসময়

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

@নেস্ট সবসময়

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

@নেস্ট সবসময়

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

@নেস্ট সবসময়

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

@নেস্ট সবসময়

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

@নেস্ট সর্বদা (সর্বদা স্পষ্ট)

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

@নেস্ট সবসময়

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

@নেস্ট সবসময়

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

ভোট দেওয়ার সময়

আমরা যে সিনট্যাক্স বিকল্পগুলির মূল্যায়ন করছি তার একটি ন্যায্য তুলনা এবং নমুনা প্ল্যাটার বলে আশা করছি। দয়া করে সেগুলি সাবধানে পর্যালোচনা করুন এবং আপনি নীচে কোনটি পছন্দ করেন তা আমাদের জানান৷ সিএসএস নেস্টিংকে একটি সিনট্যাক্সে অগ্রসর করতে সাহায্য করার জন্য আমরা আপনার প্রশংসা করি আমরা সবাই জানব এবং ভালবাসব!

জরিপ নাও!