সিএসএসে রচনা | সিএসএস-ট্রিকস

টেলউইন্ড এবং অন্যান্য ইউটিলিটি লাইব্রেরিগুলি রচনাটির বিশাল প্রবক্তা হয়েছে। তবে, আমার কাছে, তাদের রচনাটির সংস্করণ সর্বদা নাভেটির একটি ভারী ধারণা বহন করে é

আমি বলতে চাইছি, ইউটিলিটি রচনাটি মূলত উপাদানগুলিতে সিএসএস মান যুক্ত করছে, একবারে …

<div class="p-4 border-2 border-blue-500"> ... </div>

আমরা যদি এক মিনিটের জন্য সৎ হয়ে থাকি তবে এই রচনাটি কীভাবে সরাসরি কোনও শ্রেণিতে সিএসএস বিধি যুক্ত করা থেকে আলাদা?

/* This is composition too! */
.card {
  padding: 1rem; 
  border: 2px solid var(—color-blue-500)
}

এটি বলেছিল, আমি টেলওয়াইন্ড ব্যবহার শুরু করার পর থেকে আমি রচনা সম্পর্কে আরও অনেক কিছু ভাবছিলাম তা আমি অস্বীকার করতে পারি না। সুতরাং, এখানে কয়েকটি নোট রয়েছে যা আমি সিএসএস রচনা সম্পর্কে একত্রিত হয়েছি।

এটি কোনও নতুন ধারণা নয়

সিএসএস প্রকৃতির দ্বারা একটি কমপোজেবল ভাষা। এই রচনা প্রকৃতিটি ইতিমধ্যে ক্যাসকেডে নির্মিত হয়েছে। ধরা যাক আপনি কয়েকটি সম্পত্তি সহ একটি বোতাম স্টাইল করার সিদ্ধান্ত নিয়েছেন:

.button {
  display: inline-flex;
  padding: 0.75em 1.5em; 
  /* other styles... */
}

বোতামটির উপস্থিতি সংশোধন করতে আপনি সর্বদা অন্যান্য ক্লাসে ট্যাগ করতে পারেন:

<button class="button primary"> ... </button>
<button class="button secondary"> ... </button>

.primary { background: orange; }
.secondary { background: pink; }

এমনকি আপনি যুক্ত করে একটি বোতামে অন্যান্য উপাদানগুলির উপস্থিতি পরিবর্তন করতে পারেন .button ক্লাস:

<a href="#" class="button"> ... </a>

উভয় ক্ষেত্রেই রচনাটি ঘটছে:

1. আমরা রচনা .button উপর a
2. আমরা রচনা .red উপর .button

সুতরাং, সিএসএস রচনা চিরকাল থেকেই অস্তিত্ব রয়েছে। আমরা কেবল একটি বড় জিনিস হিসাবে রচনা সম্পর্কে কথা বলি না কারণ এটি ভাষার প্রকৃতি।

বিকাশকারীরা রচনার একটি বেশ সংকীর্ণ দৃশ্য গ্রহণ করেন

বিকাশকারীরা যখন সিএসএসে রচনা সম্পর্কে কথা বলেন, তারা সর্বদা এইচটিএমএলে ক্লাস সংযোজনে রচনার সংজ্ঞাটিকে সর্বদা সীমাবদ্ধ করে বলে মনে হয়।

<div class="one two"> ... </div>

মজার বিষয় হ’ল খুব কম লোক, যদি থাকে তবে সিএসএস ফাইলগুলির মধ্যে রচনা সম্পর্কে কথা বলুন – ব্যবহারের কোণ থেকে সাস মিক্সিন বা উন্নত টেলওয়াইন্ড ইউটিলিটিস।

এই ক্ষেত্রে, আমরা স্টাইলগুলিও রচনা করছি … কেবল সরাসরি এইচটিএমএলে নয়!

@mixin button () {
  display: inline-flex;
  padding: 0.75em 1.5em; 
  /* other styles ... */
}

.button {
  @include button; 
}

রচনা কী?

রচনা দুটি সম্ভাব্য শব্দ থেকে আসে:

• রচনা: একসাথে রাখুন
• যৌগিক: স্বতন্ত্র অংশ বা উপাদান দিয়ে তৈরি

উভয় শব্দ একই লাতিন মূল থেকে আসে রচনাযার অর্থ ব্যবস্থা করা বা সরাসরি।

অন্য কথায় … সমস্ত কাজ কোনও উপায়ে একসাথে রাখা হয়, তাই সমস্ত কাজ রচনা করা হয়। এটি আমাকে অবাক করে তোলে কেন রচনাটি এমন সীমিত প্রসঙ্গে ব্যবহৃত হয়। 🤔

চলমান…

রচনা ব্লাট হ্রাস করে না

আপনি যদি ইউটিলিটি ক্লাস ব্যবহার করেন তবেই ক্লাস রচনা সিএসএস ব্লাট হ্রাস করে। তবে ইউটিলিটি ক্লাসগুলির সাথে শ্রেণি রচনা এইচটিএমএল ব্লাট তৈরি করতে পারে।

<div class="utility composition">...</div>
<div class="one utility at a time">...</div>
<div class="may create html bloat">...</div>

অন্যদিকে, নির্বাচকদের সাথে শ্রেণি রচনা সিএসএস ব্লাট হ্রাস করতে পারে না। তবে তারা অবশ্যই কম এইচটিএমএল ব্লাটকে পরিচয় করিয়ে দেয়।

<div class="class composition">...</div>
<div class="card primary">...</div>
<div class="may override properties">...</div>
<div class="less html bloat"> ... </div>

কোনটি ভাল? ¯ \ _ (টিএস) _/¯

এইচটিএমএল ব্লাট এবং সিএসএস ব্লাট সম্ভবত আপনার উদ্বেগগুলির মধ্যে সবচেয়ে কম

আমরা এটি জানি:

• এইচটিএমএল প্রচুর পরিমাণে জিনিস থাকতে পারে এবং এটি পারফরম্যান্সকে খুব বেশি প্রভাবিত করে না।
• সিএসএসও।
• সিএসএসের 500 টি লাইন প্রায় 12 কেবি থেকে 15 কেবি (ক্লাড অনুসারে)।
• একটি চিত্র সাধারণত 150 কেবি বা সম্ভবত আরও বেশি ওজনের হয়।

বেশিরভাগ প্রকল্পের জন্য, আপনার চিত্রগুলির ব্যবহারকে অনুকূলিতকরণ আপনাকে ইউটিলিটি বনাম নির্বাচক রচনার চেয়ে যন্ত্রণার চেয়ে আরও ভাল ওজন হ্রাস করতে চলেছে।

সিএসএস ব্লাট হ্রাস করতে আপনার কোডবেস রিফ্যাক্ট করা খুব বেশি পারফরম্যান্স বাড়ানোর সম্ভাবনা নেই। লোড টাইমসে 2 মিমি হ্রাস হতে পারে?

তবে বিকাশকারীদের স্বীকৃতি উন্নত করতে এবং স্টাইল করা সহজ করে তুলতে আপনার কোডবেসটি পুনরায় চালু করা? এটি আরও অনেক মূল্যবান।

সুতরাং, আমি বলব:

• এইচটিএমএল এবং সিএসএস ব্লাট বেশ অসম্পূর্ণ।
• পরিবর্তে স্থাপত্য, কাঠামো এবং স্পষ্টতার উপর ফোকাস করা সার্থক।

উন্নত রচনা

যদি আমরা জুম আউট করি তবে আমরা দেখতে পাচ্ছি যে আমরা লিখি সমস্ত স্টাইল চারটি বিভাগে পড়ে:

1. বিন্যাস: আমরা কীভাবে পৃষ্ঠায় জিনিস রাখি তা প্রভাবিত করে
2. টাইপোগ্রাফি: ফন্ট সম্পর্কিত সবকিছু
3. থিমিং: রঙ সম্পর্কিত সবকিছু
4. প্রভাব: গ্রেডিয়েন্টস, ছায়া ইত্যাদির মতো স্টাফ পেয়ে ভাল লাগল

এই চারটি বিভাগের প্রতিটি থেকে স্টাইলগুলি একে অপরের সাথে ছেদ করে না। উদাহরণস্বরূপ:

• font-weight একচেটিয়াভাবে অন্তর্ভুক্ত টাইপোগ্রাফি বিভাগ
• colour একচেটিয়াভাবে অন্তর্ভুক্ত থিমিং বিভাগ

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

সুতরাং আপনার এইচটিএমএল এই চারটি বিভাগের জন্য শ্রেণীর রচনাটি ধরে ধরে ধরে নিলে এর মতো দেখতে শেষ হতে পারে:

<!-- These are all pseudo classes. Use your imagination for now! -->
<div class="layout-1 layout-2 effects-1">
  <h2 class="typography-1 theming-1"> ... </div>
  <div class="typography-2"> ... </div>
</div>

এর একটি বাস্তব উদাহরণ নিম্নলিখিত হবে, যদি আমরা থেকে ক্লাস ব্যবহার করি জাঁকজমকপূর্ণ শৈলী এবং জাঁকজমকপূর্ণ লেআউট::

<div class="card vertical elevation-3">
  <h2 class="inter-title"> ... </h2>
  <div class="prose"> ... </div>
</div>

আমি এই চার-বিভাগের সিস্টেমটি সম্পর্কে আরও লিখছি এবং আমি কীভাবে আমার সর্বশেষ কাজগুলিতে কমপোজেবল ক্লাস তৈরি করছি: অপ্রচলিত টেলওয়াইন্ড। আপনি আগ্রহী কিনা এটি একটি চেক দিন!

মোড়ানো আপ

যোগফল:

1. সিএসএস প্রকৃতির দ্বারা কমপোজেবল।
2. বিকাশকারীরা সিএসএসে রচনাটির অর্থ কী তা সম্পর্কে বেশ সংকীর্ণ মনে হয়।
3. আপনি এইচটিএমএল বা সিএসএসে রচনা করতে পারেন।
4. আমরা যে স্টাইলগুলি লিখি সেগুলি চারটি বিভাগে বিভক্ত করা যেতে পারে – লেআউট, টাইপোগ্রাফি, থিমিং এবং প্রভাবগুলি।

এবং অবশেষে: জাঁকজমকপূর্ণ শৈলী এমন ক্লাস রয়েছে যা এই চারটি বিভাগের প্রত্যেকটিতে রচনা সহায়তা করতে পারে। জাঁকজমকপূর্ণ লেআউট লেআউট অংশটি পরিচালনা করে। এবং আমি কীভাবে আমার কোর্সে কমপোজেবল ক্লাস তৈরি করি সে সম্পর্কে আরও লিখছি অপ্রচলিত টেলওয়াইন্ড।