সিএসএস ক্যাসকেড স্তরগুলির সাথে ডিজাইন সিস্টেমের উপাদানগুলির নিদর্শনগুলি সংগঠিত করা

আমি উপাদানগুলিকে আরও কাস্টমাইজযোগ্য, আরও দক্ষ এবং ব্যবহার এবং বুঝতে সহজ করার উপায়গুলি নিয়ে আসার চেষ্টা করছি এবং আমি ব্যবহারে ঝুঁকছি এমন একটি প্যাটার্নটি বর্ণনা করতে চাই সিএসএস ক্যাসকেড স্তরগুলি।

আমি কোডটি সংগঠিত করা উপভোগ করি এবং ক্যাসকেড স্তরগুলি স্পষ্টভাবে সংগঠিত করার জন্য ক্যাসকেড স্তরগুলি একটি দুর্দান্ত উপায় খুঁজে পাই যেমন ক্যাসকেড এটি দেখায়। ঝরঝরে অংশটি হ’ল, এটি “শীর্ষ-স্তরের” সংস্থার সাথে যতটা সহায়তা করে, ক্যাসকেড স্তরগুলি বাসা বাঁধতে পারে, যা আমাদের ক্যাসকেডের উপর ভিত্তি করে আরও সুনির্দিষ্ট শৈলীগুলি লেখার অনুমতি দেয়।

এখানে একমাত্র নেতিবাচক দিকটি হ’ল আপনার কল্পনা, কিছুই আমাদের ওভার ইঞ্জিনিয়ারিং সিএসএস থেকে থামায় না। এবং স্পষ্ট করে বলতে গেলে, আপনি আপনাকে ওভার-ইঞ্জিনিয়ারিংয়ের ফর্ম হিসাবে দেখাতে যাচ্ছি তা খুব ভালভাবে বিবেচনা করতে পারেন। আমি মনে করি যদিও আমি একটি ভারসাম্য খুঁজে পেয়েছি, জিনিসগুলি সহজ এখনও সুসংহত রেখে এবং আমি আমার অনুসন্ধানগুলি ভাগ করতে চাই।

একটি সিএসএস উপাদান প্যাটার্নের শারীরবৃত্ত

আসুন উদাহরণ হিসাবে একটি বোতাম ব্যবহার করে সিএসএসে উপাদান লেখার জন্য একটি প্যাটার্ন অন্বেষণ করুন। বোতামগুলি প্রায় প্রতিটি উপাদান লাইব্রেরিতে পাওয়া আরও জনপ্রিয় উপাদানগুলির মধ্যে একটি। এই জনপ্রিয়তার জন্য যথেষ্ট কারণ রয়েছে কারণ বোতামগুলি বিভিন্ন ব্যবহারের ক্ষেত্রে ব্যবহার করা যেতে পারে, সহ:

• একটি ড্রয়ার খোলার মতো ক্রিয়া সম্পাদন করা,
• ইউআই এর বিভিন্ন বিভাগে নেভিগেট করা
• রাষ্ট্রের কিছু ফর্ম ধরে রাখা, যেমন focus বা hover।

এবং বোতামগুলি যেমন মার্কআপের বিভিন্ন স্বাদে আসে <button>, input(type="button")এবং <a class="button">। এর চেয়ে বোতামগুলি তৈরি করার আরও অনেক উপায় রয়েছে, যদি আপনি এটি বিশ্বাস করতে পারেন।

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

.button {}
.button-primary {}
.button-secondary {}
.button-warning {}
/* etc. */

ঠিক আছে, এখন, কিছু কোড লিখি। বিশেষত, আসুন কয়েকটি বিভিন্ন ধরণের বোতাম তৈরি করি। আমরা একটি দিয়ে শুরু করব .button ক্লাস যা আমরা যে কোনও উপাদানকে সেট করতে পারি যা আমরা স্টাইল করতে চাই, ভাল, একটি বোতাম! আমরা ইতিমধ্যে জানি যে বোতামগুলি মার্কআপের বিভিন্ন স্বাদে আসে, তাই একটি জেনেরিক .button ক্লাস হ’ল তাদের একটি বা সমস্ত নির্বাচন করার জন্য সবচেয়ে পুনরায় ব্যবহারযোগ্য এবং এক্সটেনসিবল উপায়।

.button {
  /* Styles common to all buttons */
}

একটি ক্যাসকেড স্তর ব্যবহার করে

এখানেই আমরা আমাদের প্রথম ক্যাসকেড স্তরটি সন্নিবেশ করতে পারি! মনে রাখবেন, আমরা প্রথম স্থানে ক্যাসকেড স্তরটি চাই যে কারণটি হ’ল এটি আমাদের শৈলীর মূল্যায়ন করার সময় আমাদের সিএসএস ক্যাসকেডের পড়ার ক্রম সেট করতে দেয়। আমরা সিএসএসকে প্রথমে একটি স্তর মূল্যায়ন করতে বলতে পারি, তারপরে অন্য স্তরটি অনুসরণ করে, তারপরে অন্যটি – সমস্ত আমরা যে ক্রমটি চাই তা অনুসারে। এটি একটি অবিশ্বাস্য বৈশিষ্ট্য যা ব্রাউজার দ্বারা প্রয়োগ করার সময় কোন স্টাইলগুলি “উইন” এর উপর আমাদের পরাশক্তি নিয়ন্ত্রণ দেয়।

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

/* Components top-level layer */
@layer components {
  .button {
    /* Styles common to all buttons */
  }
}

ক্যাসকেড স্তরগুলি বাসা বাঁধছে

এখানে জিনিসগুলি কিছুটা অদ্ভুত হয়ে যায়। আপনি কি জানেন আপনি পারেন বাসা ক্যাসকেড স্তর ভিতরে ক্লাস? এটি সম্পূর্ণ একটি জিনিস। সুতরাং, এটি পরীক্ষা করে দেখুন, আমরা একটি নতুন স্তর প্রবর্তন করতে পারি ভিতরে .button ক্লাস যা ইতিমধ্যে তার নিজস্ব স্তরের ভিতরে রয়েছে। আমি যা বলতে চাইছি তা এখানে:

/* Components top-level layer */
@layer components {

  .button {
    /* Component elements layer */
    @layer elements {
      /* Styles */
    }
  }
}

এইভাবে ব্রাউজারটি দিনের শেষে কোনও স্তরের মধ্যে সেই স্তরটি ব্যাখ্যা করে:

@layer components {
  @layer elements {
    .button {
      /* button styles... */
    }
  }
}

এটি কেবল বাসা বাঁধার শৈলীতে কোনও পোস্ট নয়, তাই আমি কেবল বলব যে আপনি যখন এটি করেন তখন আপনার মাইলেজটি পৃথক হতে পারে। চেক আউট নেস্টেড স্টাইলগুলির সাথে সতর্কতা ব্যবহার সম্পর্কে অ্যান্ডি বেলের সাম্প্রতিক নিবন্ধ।

কাঠামোগত শৈলী

এখনও অবধি, আমরা একটি প্রতিষ্ঠা করেছি .button কোনও ক্যাসকেড স্তরের ভিতরে শ্রেণি যা কোনও ধরণের ধরে রাখার জন্য ডিজাইন করা হয়েছে component আমাদের ডিজাইন সিস্টেমে। ভিতরে .button আর একটি ক্যাসকেড স্তর, এটি মার্কআপে আমরা যে বিভিন্ন ধরণের বোতামের মুখোমুখি হতে পারি তা নির্বাচন করার জন্য এটি। আমরা আগে বোতাম সম্পর্কে কথা বলেছি <button>, <input>বা <a> এবং এভাবেই আমরা প্রতিটি ধরণের স্টাইলটি স্বতন্ত্রভাবে নির্বাচন করতে পারি।

আমরা ব্যবহার করতে পারি :is() সিউডো-সিলেক্টর ফাংশন হিসাবে এটি বলার অনুরূপ, “যদি এটি হয় .button হয় an <a> উপাদান, তারপরে এই স্টাইলগুলি প্রয়োগ করুন। “

/* Components top-level layer */
@layer components {
  .button {
    /* Component elements layer */
    @layer elements {
      /* styles common to all buttons */

      &:is(a) {
        /* <a> specific styles */
      }

      &:is(button) {
        /* <button> specific styles */
      }

      /* etc. */
    }
  }
}

ডিফল্ট বোতাম শৈলী সংজ্ঞায়িত

আমি আমাদের কোডগুলি সাধারণ শৈলীর সাথে পূরণ করতে যাচ্ছি যা সমস্ত বোতামে প্রযোজ্য। এই স্টাইলগুলি শীর্ষে বসে elements স্তর যাতে তারা মার্কআপ নির্বিশেষে যে কোনও এবং সমস্ত বোতামে প্রয়োগ করা হয়। তাদের ডিফল্ট বোতাম শৈলী বিবেচনা করুন, তাই কথা বলতে।

/* Components top-level layer */
@layer components {
  .button {
    /* Component elements layer */
    @layer elements {
      background-color: darkslateblue;
      border: 0;
      color: white;
      cursor: pointer;
      display: grid;
      font-size: 1rem;
      font-family: inherit;
      line-height: 1;
      margin: 0;
      padding-block: 0.65rem;
      padding-inline: 1rem;
      place-content: center;
      width: fit-content;
    }
  }
}

বাটন স্টেট শৈলী সংজ্ঞায়িত

আমাদের ডিফল্ট বোতামগুলি যখন হোভারড, ক্লিক করা হয় বা ফোকাসে থাকে তখন কী করা উচিত? এগুলি আলাদা রাজ্য ব্যবহারকারী যখন তাদের সাথে যোগাযোগ করে তখন বোতামটি নিতে পারে এবং আমাদের সেই অনুযায়ী সেগুলি স্টাইল করা দরকার।

আমি সরাসরি একটি নতুন ক্যাসকেড সাব-স্তর তৈরি করতে যাচ্ছি elements সাব-লেয়ারকে সৃজনশীলভাবে বলা হয়, states::

/* Components top-level layer */
@layer components {
  .button {
    /* Component elements layer */
    @layer elements {
      /* Styles common to all buttons */
    }

    /* Component states layer */
    @layer states {
      /* Styles for specific button states */
    }
  }
}

বিরতি দিন এবং এখানে প্রতিফলিত করুন। আমাদের কোন রাজ্যের টার্গেট করা উচিত? আমরা এই প্রতিটি রাজ্যের জন্য কী পরিবর্তন করতে চাই?

কিছু রাজ্য একই রকম সম্পত্তির পরিবর্তনগুলি ভাগ করতে পারে, যেমন :hover এবং :focus একই পটভূমি রঙ আছে। ভাগ্যক্রমে, সিএসএস আমাদের ব্যবহার করে আমাদের এই জাতীয় সমস্যাগুলি মোকাবেলার জন্য প্রয়োজনীয় সরঞ্জামগুলি দেয় :where() রাষ্ট্রের উপর ভিত্তি করে সম্পত্তি পরিবর্তনের গ্রুপে ফাংশন। কেন :where() পরিবর্তে :is()? :where() শূন্য নির্দিষ্টতা সঙ্গে আসেমানে এটি ওভাররাইড করা অনেক সহজ :is()যা তার যুক্তিগুলিতে সর্বোচ্চ সুনির্দিষ্ট স্কোর সহ উপাদানটির সুনির্দিষ্টতা গ্রহণ করে। স্কেলযোগ্য, রক্ষণাবেক্ষণযোগ্য সিএসএস লেখার ক্ষেত্রে কম নির্দিষ্টতা বজায় রাখা একটি পুণ্য।

/* Component states layer */
@layer states {
  &:where(:hover, :focus-visible) {
    /* button hover and focus state styles */
  }
}

তবে আমরা কীভাবে একটিতে বোতামের স্টাইলগুলি আপডেট করব অর্থবহ উপায়? আমি এর দ্বারা যা বোঝাতে চাইছি তা হ’ল আমরা কীভাবে বোতামটি নিশ্চিত করব চেহারা এটি হোভারড বা ফোকাসে পছন্দ করে? আমরা এটিতে কেবল একটি নতুন পটভূমির রঙ চড় মারতে পারি, তবে আদর্শভাবে, রঙটি সম্পর্কিত হওয়া উচিত background-color সেট elements স্তর

সুতরাং, আসুন কিছুটা রিফ্যাক্টর করা যাক। আগে, আমি সেট সেট .button উপাদান এর background-color থেকে darkslateblue। আমি সেই রঙটি পুনরায় ব্যবহার করতে চাই, তাই এটি আমাদের সিএসএস ভেরিয়েবলের মধ্যে তৈরি করার জন্য এটি আমাদের পক্ষে তৈরি করে যাতে আমরা এটি একবার আপডেট করতে পারি এবং এটি সর্বত্র প্রয়োগ করতে পারি। ভেরিয়েবলের উপর নির্ভর করা স্কেলযোগ্য এবং রক্ষণাবেক্ষণযোগ্য সিএসএস লেখার আরও একটি গুণ।

আমি নামে একটি নতুন ভেরিয়েবল তৈরি করব --button-background-color এটি প্রাথমিকভাবে সেট করা হয় darkslateblue এবং তারপরে এটি ডিফল্ট বোতামের শৈলীতে সেট করুন:

/* Component elements layer */
@layer elements {
  --button-background-color: darkslateblue;

  background-color: var(--button-background-color);
  border: 0;
  color: white;
  cursor: pointer;
  display: grid;
  font-size: 1rem;
  font-family: inherit;
  line-height: 1;
  margin: 0;
  padding-block: 0.65rem;
  padding-inline: 1rem;
  place-content: center;
  width: fit-content;
}

এখন আমাদের একটি ভেরিয়েবলের মধ্যে একটি রঙ সংরক্ষণ করা হয়েছে, আমরা তুলনামূলকভাবে নতুন ব্যবহার করে আমাদের অন্যান্য স্তরে বোতামের হোভারড এবং ফোকাসযুক্ত রাজ্যে একই ভেরিয়েবলটি সেট করতে পারি color-mix() ফাংশন রূপান্তর করতে darkslateblue যখন বোতামটি হোভার করা হয় বা ফোকাসে থাকে তখন হালকা রঙের কাছে।

আমাদের ফিরে states লেয়ার! আমরা প্রথমে একটি নতুন সিএসএস ভেরিয়েবলে রঙটি মিশ্রিত করব --state-background-color::

/* Component states layer */
@layer states {
  &:where(:hover, :focus-visible) {
    /* custom property only used in state */
    --state-background-color: color-mix(
      in srgb, 
      var(--button-background-color), 
      white 10%
    );
  }
}

তারপরে আমরা আপডেট করে পটভূমির রঙ হিসাবে সেই রঙটি প্রয়োগ করতে পারি background-color সম্পত্তি।

/* Component states layer */
@layer states {
  &:where(:hover, :focus-visible) {
    /* custom property only used in state */
    --state-background-color: color-mix(
      in srgb, 
      var(--button-background-color), 
      white 10%
    );

    /* applying the state background-color */
    background-color: var(--state-background-color);
  }
}

পরিবর্তিত বোতাম শৈলী সংজ্ঞায়িত

পাশাপাশি elements এবং states স্তরগুলি, আপনি আপনার উপাদানগুলিতে যেমন কোনও প্রকারের বৈচিত্রের সন্ধান করতে পারেন modifiers। এটি কারণ সমস্ত বোতামগুলি আপনার ডিফল্ট বোতামের মতো দেখায় না। ব্যবহারকারীর কোনও সিদ্ধান্ত নিশ্চিত করার জন্য আপনি সবুজ পটভূমির রঙের সাথে একটি চাইতে পারেন। অথবা সম্ভবত আপনি ক্লিক করার সময় বিপদ নির্দেশ করতে একটি লাল চান। সুতরাং, আমরা আমাদের বিদ্যমান ডিফল্ট বোতামের স্টাইলগুলি নিতে পারি এবং সেই নির্দিষ্ট ব্যবহারের ক্ষেত্রে তাদের সংশোধন করতে পারি

যদি আমরা ক্যাসকেডের ক্রম সম্পর্কে চিন্তা করি – সর্বদা উপরে থেকে নীচে প্রবাহিত – আমরা চাই না যে পরিবর্তিত শৈলীগুলি আমরা সবেমাত্র তৈরি রাজ্যগুলির স্তরগুলির স্টাইলগুলিকে প্রভাবিত করতে পারি। সুতরাং, আসুন একটি নতুন যুক্ত করা যাক modifiers মধ্যে স্তর elements এবং states::

/* Components top-level layer */
@layer components {

  .button {
  /* Component elements layer */
  @layer elements {
    /* etc. */
  }

  /* Component modifiers layer */
  @layer modifiers {
    /* new layer! */
  }

  /* Component states layer */
  @layer states {
    /* etc. */
  }
}

আমরা কীভাবে পরিচালনা করেছি তার অনুরূপ statesআমরা এখন আপডেট করতে পারি --button-background-color প্রতিটি বোতাম সংশোধকের জন্য পরিবর্তনশীল। অবশ্যই আমরা শৈলীগুলি আরও সংশোধন করতে পারি, তবে আমরা এই সিস্টেমটি কীভাবে কাজ করে তা প্রদর্শনের জন্য আমরা জিনিসগুলি মোটামুটি সোজা রাখছি।

আমরা একটি নতুন ক্লাস তৈরি করব যা সংশোধন করে background-color থেকে ডিফল্ট বোতাম darkslateblue থেকে darkgreen। আবার, আমরা উপর নির্ভর করতে পারি :is() নির্বাচক কারণ আমরা এই ক্ষেত্রে অতিরিক্ত নির্দিষ্টতা চাই। এইভাবে, আমরা সংশোধক শ্রেণীর সাথে ডিফল্ট বোতামের স্টাইলটি ওভাররাইড করি। আমরা এই ক্লাস কল করব .success (সবুজ একটি “সফল” রঙ) এবং এটি খাওয়ান :is()::

/* Component modifiers layer */
@layer modifiers {
  &:is(.success) {
    --button-background-color: darkgreen;
  }
}

আমরা যদি যোগ করি .success আমাদের বোতামগুলির একটিতে ক্লাস, এটি হয়ে যায় darkgreen পরিবর্তে darkslateblue যা আমরা ঠিক তাই চাই। এবং যেহেতু আমরা ইতিমধ্যে কিছু করি color-mix()-মধ্যে states স্তর, আমরা স্বয়ংক্রিয়ভাবে সেই হোভার এবং ফোকাস শৈলীগুলি উত্তরাধিকারী করব, অর্থ darkgreen এই রাজ্যে হালকা হয়।

/* Components top-level layer */
@layer components {
  .button {
    /* Component elements layer */
    @layer elements {
      --button-background-color: darkslateblue;

      background-color: var(--button-background-color);
      /* etc. */

    /* Component modifiers layer */
    @layer modifiers {
      &:is(.success) {
        --button-background-color: darkgreen;
      }
    }

    /* Component states layer */
    @layer states {
      &:where(:hover, :focus) {
        --state-background-color: color-mix(
          in srgb,
          var(--button-background-color),
          white 10%
        );

        background-color: var(--state-background-color);
      }
    }
  }
}

সব একসাথে রাখা

আমরা কোনও সিএসএস কাস্টম সম্পত্তিটিতে পরিবর্তন করতে আমাদের যে কোনও সিএসএস সম্পত্তি রিফ্যাক্টর করতে পারি, যা আমাদের কাস্টমাইজেশনের জন্য প্রচুর জায়গা দেয়।

/* Components top-level layer */
@layer components {
  .button {
    /* Component elements layer */
    @layer elements {
      --button-background-color: darkslateblue;

      --button-border-width: 1px;
      --button-border-style: solid;
      --button-border-color: transparent;
      --button-border-radius: 0.65rem;

      --button-text-color: white;

      --button-padding-inline: 1rem;
      --button-padding-block: 0.65rem;

      background-color: var(--button-background-color);
      border: 
        var(--button-border-width) 
        var(--button-border-style) 
        var(--button-border-color);
      border-radius: var(--button-border-radius);
      color: var(--button-text-color);
      cursor: pointer;
      display: grid;
      font-size: 1rem;
      font-family: inherit;
      line-height: 1;
      margin: 0;
      padding-block: var(--button-padding-block);
      padding-inline: var(--button-padding-inline);
      place-content: center;
      width: fit-content;
    }

    /* Component modifiers layer */
    @layer modifiers {
      &:is(.success) {
        --button-background-color: darkgreen;
      }

      &:is(.ghost) {
        --button-background-color: transparent;
        --button-text-color: black;
        --button-border-color: darkslategray;
        --button-border-width: 3px;
      }
    }

    /* Component states layer */
    @layer states {
      &:where(:hover, :focus) {
        --state-background-color: color-mix(
          in srgb,
          var(--button-background-color),
          white 10%
        );

        background-color: var(--state-background-color);
      }
    }
  }
}

পিএস সেই ডেমোটির কাছাকাছি তাকান এবং আমি কীভাবে বোতামের পটভূমি ব্যবহার করে সামঞ্জস্য করছি তা পরীক্ষা করে দেখুন light-dark() – তারপরে সারা জয় পড়ুন “আসুন light-dark() পাশে “ কীভাবে এটি কাজ করে তা পুরোপুরি রুনডাউন করার জন্য!

আপনি কি মনে করেন? এটি কি এমন কিছু যা আপনি আপনার স্টাইলগুলি সংগঠিত করতে ব্যবহার করবেন? আমি দেখতে পাচ্ছি যে কীভাবে ক্যাসকেড স্তরগুলির একটি সিস্টেম তৈরি করা কয়েকটি উপাদান সহ একটি ছোট প্রকল্পের জন্য ওভারকিল হতে পারে। তবে এমনকি আমরা যেমন লাফিয়ে লাফিয়ে ডুবিয়ে রেখেছি ঠিক যেমনটি আমরা ঠিক করেছি যে এটি পরিচালনা করার সময় আমাদের কতটা শক্তি রয়েছে-এবং এমনকি টেমিং-সিএসএস ক্যাসকেড। বোতামগুলি ছদ্মবেশী জটিল তবে আমরা দেখেছি ডিফল্ট শৈলী থেকে শুরু করে তাদের রাজ্যগুলির জন্য শৈলী এবং পরিবর্তিত সংস্করণগুলির জন্য সমস্ত কিছু পরিচালনা করতে কতটা স্টাইল লাগে।