CSS @import রুলের ব্যবহার

ওভারভিউ

@import রুল একটি CSS স্টাইলশিটের ভিতর থেকে অন্য একটি স্টাইলশিট ইম্পোর্ট (আयাত) করার অনুমতি দেয়। এটি স্টাইলশিট মডুলার রাখতে এবং রি-ইউজ করতে সাহায্য করে।

সিনট্যাক্স

<style>
  /* স্ট্রিং হিসেবে URL */
  @import "mystyle.css";
  
  /* বা url() ফাংশন হিসেবে */
  @import url("mystyle.css");
  
  /* মিডিয়া কোয়েরি সহ */
  @import "print.css" print;
  @import url("mobile.css") screen and (max-width: 768px);
  
  /* অন্যান্য CSS রুলস @import-এর পরে লিখতে হবে */
  body { margin: 0; }
</style>

গুরুত্বপূর্ণ নিয়ম

• পজিশন: @import অবশ্যই স্টাইলশিটের শুরুর দিকে থাকতে হবে (সমস্ত অন্য রুলের আগে)। `@charset` ছাড়া কোনো রুল এর আগে নয়।
• কেস সেনসিটিভ: URL কেস-সেনসিটিভ হতে পারে (সার্ভার নির্ভর)۔
• নেস্টিং: ইম্পোর্ট করা ফাইলে আবার @import থাকতে পারে (নেস্টেড ইম্পোর্ট)।

উদাহরণ: মডুলার স্ট্রাকচার

/* main.css */
@import "reset.css";
@import "variables.css";
@import "typography.css";
@import "layout.css";
@import "components/buttons.css";
@import "components/forms.css";
@import "utilities.css";

/* Page-specific overrides */
.page-home { /* ... */ }

HTML-এ ব্যবহার

<!-- এক্সটার্নাল স্টাইলশিটে -->
<link rel="stylesheet" href="main.css">

<!-- বা ইনলাইন স্টাইলে (কম পরামর্শযোগ্য) -->
<style>
  @import url("main.css");
  /* অন্যান্য রুল... */
</style>

@import vs <link> - পার্থক্য ও পারফরম্যান্স

সেরা অনুশীলন (Best Practices)

1. প্রোডাকশনে @import এড়ান: HTML-এ একাধিক <link> ট্যাগ ব্যবহার করুন।
2. বিল্ড টুল ব্যবহার করুন: Webpack, Vite, Parcel, esbuild - এগুলো ইম্পোর্টকে বান্ডেল করে এক ফাইলে মেক্স করে দেয় (প্রোডাকশনে কোনো @import থাকে না)।
3. ডেভেলপমেন্টে মডুলারিটি: সোর্স কোডে @import বা ES মডিউল (import './style.css') ব্যবহার করুন, বিল্ডার বান্ডেল করবে।
4. ক্রিটিক্যাল CSS: Above-the-fold CSS ইনলাইন করুন, বাকি <link rel="preload" as="style"> + onload দিয়ে লোড করুন।

CSS Modules / Modern Approach

/* JavaScript/TypeScript মডিউলে (Vite, Webpack, Next.js) */
import './styles/main.css'; // বান্ডেল হয়ে যাবে
import styles from './Component.module.css'; // CSS Modules (স্কোপড ক্লাসনেম)

নির্দিষ্ট মিডিয়া টাইপের জন্য ইম্পোর্ট

@import "print.css" print;
@import "screen.css" screen;
@import "mobile.css" screen and (max-width: 768px);
@import "landscape.css" screen and (orientation: landscape);

সতর্কতা

• গভীর নেস্টেড @import (৩+ লেভেল) পারফরম্যান্স ব্যাপকভাবে হ্রাস করে।
• HTTP/2-এ মাল্টিপ্ল <link> খুব দ্রুত (মাল্টিপ্লেক্সিং)।
• RTL/লোকেল-স্পেসিফিক CSS-এ @import মিডিয়া কোয়েরি সহ ব্যবহার করা যেতে পারে।