CSS

CSS چگونه به HTML وصل می‌شود؟

مرورگر ابتدا ساختار HTML و قواعد CSS را می‌خواند، سپس برای هر عنصر سبک نهایی را محاسبه و صفحه را ترسیم می‌کند. روش رایج، فایل بیرونی است:

<link rel="stylesheet" href="/styles.css">

و داخل فایل می‌نویسیم:

.card {
  padding: 1rem;
  border: 1px solid #d8d8d8;
  border-radius: .75rem;
}

.card سلکتور و هر جفت نام و مقدار یک declaration است. جداکردن محتوا و استایل باعث استفادهٔ دوباره، کش مرورگر و نگه‌داری ساده‌تر می‌شود.

Cascade و specificity به زبان ساده

ممکن است چند قاعده یک خاصیت را برای یک عنصر تعیین کنند. Cascade تصمیم می‌گیرد کدام برنده شود. مبدأ سبک، اهمیت، لایه، میزان اختصاصی‌بودن و ترتیب قرارگیری در این تصمیم نقش دارند. مستند CSS Cascading and Inheritance از W3C این الگوریتم را تعریف می‌کند.

سلکتور شناسه معمولاً از کلاس اختصاصی‌تر و کلاس از نام تگ اختصاصی‌تر است؛ اما تبدیل همه‌چیز به !important مسئله را حل نمی‌کند و نگه‌داری را سخت می‌کند. بهتر است کلاس‌های قابل پیش‌بینی، لایه‌های مشخص و ساختاری با specificity پایین داشته باشید. ترتیب فایل فقط وقتی تعیین‌کننده است که قواعد در سطح یکسان رقابت کنند.

Box model و دلیل به‌هم‌ریختن اندازه

هر عنصر یک جعبه دارد: محتوا در مرکز، سپس padding، border و margin. در مقدار پیش‌فرض content-box، width فقط عرض محتواست و padding و border به آن اضافه می‌شوند. بسیاری از پروژه‌ها این قاعده را می‌گذارند:

*, *::before, *::after { box-sizing: border-box; }

در این حالت width شامل padding و border می‌شود و محاسبهٔ چیدمان قابل‌پیش‌بینی‌تر است. margin فضای بیرون جعبه است و رنگ پس‌زمینه آن را نمی‌پوشاند. درک تفاوت overflow، اندازهٔ ذاتی تصویر و حداقل عرض آیتم‌ها بخش زیادی از مشکلات اسکرول افقی را حل می‌کند.

Flexbox، Grid و طراحی واکنش‌گرا

Flexbox برای چیدمان یک‌بعدی ردیف یا ستون مناسب است؛ مثلاً منو یا ردیف کارت‌ها. Grid برای رابطهٔ هم‌زمان سطر و ستون قدرت بیشتری دارد. هیچ‌کدام جای دیگری را مطلقاً نمی‌گیرد و می‌توان Grid صفحه را با Flex اجزای داخلی ترکیب کرد.

طراحی واکنش‌گرا یعنی محتوا در اندازه‌ها و شیوه‌های ورودی مختلف قابل استفاده بماند. واحد نسبی، min()، max()، clamp() و media query ابزارهای آن‌اند. به‌جای طراحی برای چند مدل گوشی، نقطهٔ شکست را جایی انتخاب کنید که خود محتوا دیگر خوب جا نمی‌شود.

در سایت فارسی جهت راست‌به‌چپ را در HTML تعیین کنید و ترجیحاً از ویژگی‌های منطقی مانند margin-inline-start استفاده کنید تا مؤلفه در RTL و LTR قابل استفاده باشد.

CSS خوب فقط ظاهر زیبا نیست

کنتراست کافی، حالت focus واضح، اندازهٔ لمس مناسب و احترام به prefers-reduced-motion بخشی از کیفیت‌اند. حذف outline بدون جایگزین، کاربران صفحه‌کلید را سردرگم می‌کند. متن نباید با بزرگ‌نمایی یا طول فارسی از ظرف بیرون بزند.

• توکن‌های رنگ و فاصله را با custom properties یکپارچه کنید؛
• فونت جایگزین و راهبرد بارگذاری داشته باشید؛
• از انیمیشن propertyهای پرهزینه برای عناصر زیاد پرهیز کنید؛
• CSS استفاده‌نشده و فریم‌ورک سنگین را بدون نیاز وارد نکنید؛
• کامپوننت را با متن کوتاه، بلند، RTL و اندازهٔ کوچک آزمایش کنید.

نام‌گذاری روشن و قاعدهٔ کوچکِ قابل ترکیب معمولاً از سلکتور طولانی وابسته به ساختار مقاوم‌تر است. ابزار مرورگر نشان می‌دهد هر سبک از کجا آمده و چرا خط خورده است.

واحدها و رنگ‌ها را آگاهانه انتخاب کنید

rem برای اندازه‌های وابسته به ترجیح متن، درصد برای نسبت ظرف و پیکسل برای مرزهای دقیق کاربرد دارد؛ هیچ واحدی برای همه‌چیز بهترین نیست. رنگ را فقط با نام متغیر «آبی» ذخیره نکنید؛ نام نقشی مانند --color-action تغییر تم را ساده‌تر می‌کند.

برای متن، فاصلهٔ خط و عرض سطر بر خوانایی اثر دارند. فونت فارسی باید وزن‌های مورد استفاده را واقعاً داشته باشد تا مرورگر وزن مصنوعی نسازد. تست در مرورگر و سیستم‌عامل متفاوت ضروری است، زیرا موتور رندر و fallback فونت می‌تواند نتیجه را تغییر دهد.

پرسش‌های متداول دربارهٔ CSS

تفاوت CSS و HTML چیست؟

HTML ساختار و معنای محتوا را تعریف می‌کند؛ CSS نحوهٔ نمایش همان ساختار را. عنوان باید در HTML عنوان بماند، حتی اگر CSS ظاهرش را تغییر دهد.

CSS inline بهتر است یا فایل جدا؟

برای بیشتر سایت‌ها فایل جدا قابل‌کش و نگه‌داری بهتر است. استایل inline در موارد محدود یا خروجی پویا کاربرد دارد، اما استفادهٔ گسترده تکرار و تعارض می‌سازد.

چرا یک قانون CSS اعمال نمی‌شود؟

ممکن است سلکتور تطبیق نکند، قانون معتبر نباشد یا قاعده‌ای با اولویت بالاتر برنده شود. بخش Styles و Computed ابزار توسعه‌دهنده دلیل را نشان می‌دهد.