بهینه سازی CSS و جلوگیری از کدهای تکراری | درس 50 + پروژه درس

بهینه سازی CSS و جلوگیری از کدهای تکراری موضوع درس 50 دوره HTML و CSS ارومیا دیزاین است. تا اینجا اجزای مختلف صفحه، رنگ ها، فاصله ها و حرکت ها را ساخته ایم. حالا وقت آن است که همان ظاهر را با ساختاری قابل نگهداری حفظ کنیم. اگر برای تغییر شعاع کادر سه دکمه مجبورید سه بخش جداگانه را ویرایش کنید، احتمالا بخشی از کد شما قابلیت مشترک شدن دارد.

در درس قبلی، انیمیشن ها و keyframes را تمرین کردیم. این جلسه به جای افزودن جلوه تازه، روی بازنویسی کنترل شده تمرکز می کنیم: ابتدا خروجی فعلی را مشخص می کنیم، سپس تکرار واقعی را کاهش می دهیم و در پایان حالت های مختلف را بررسی می کنیم. هدف، کوتاه ترین فایل به هر قیمت نیست؛ کدی می خواهیم که تغییر آن ساده و نتیجه آن قابل پیش بینی باشد.

تفاوت مرتب سازی، بازنویسی و فشرده سازی CSS

مرتب سازی یعنی یکدست کردن تورفتگی، فاصله گذاری و ترتیب بخش ها. بازنویسی یا refactoring ساختار پیاده سازی را تغییر می دهد، در حالی که رفتار مورد نظر حفظ می شود. فشرده سازی معمولا فاصله ها، توضیحات و بخش های غیرضروری فایل خروجی را برای انتقال کم حجم تر حذف می کند. این سه کار به هم مربوط هستند، اما یکسان نیستند.

کاهش تعداد خط ها به تنهایی ثابت نمی کند صفحه سریع تر شده است. حجم منتقل شده، کش، تعداد منابع، شیوه بارگذاری و هزینه رندر نیز اثر دارند. در این درس، نتیجه قابل سنجش ما کاهش تکرار تعریف دکمه و ساده تر شدن تغییرهای بعدی است. برای ادعای بهبود سرعت باید قبل و بعد را در شرایط یکسان اندازه بگیریم.

پروژه درس: سه پیوند با پایه مشترک

پروژه دانلودی دو صفحه دارد. before.html از before.css استفاده می کند و سبک سه پیوند را جداگانه تعریف می کند. index.html از after.css استفاده می کند و بخش مشترک را در کلاس button قرار می دهد. base.css در هر دو صفحه مشترک است و ظاهر کلی صفحه و شبکه کارت ها را مشخص می کند. در نتیجه می توانید تفاوت معماری دکمه ها را بدون عوض شدن چیدمان مطالعه کنید.

این کنترل ها به مقصدی در همان صفحه می روند، بنابراین از عنصر a استفاده کرده ایم. نام کلاس button فقط ظاهر را توصیف می کند و نوع عنصر را عوض نمی کند. برای عملی مانند ارسال فرم یا باز کردن یک پنجره، عنصر مناسب را بر اساس رفتار واقعی انتخاب کنید. استفاده درست از HTML همچنان بخشی از کیفیت پروژه است.

مرحله 1: تکرار واقعی را پیدا کنید

در نسخه اولیه، ویژگی هایی مانند padding، border-radius، display و font-weight برای هر رنگ دوباره نوشته شده اند. این تکرار خطر ناهماهنگی دارد؛ ممکن است فاصله یک پیوند را تغییر دهید و دو مورد دیگر را فراموش کنید. قبل از مشترک کردن، بررسی کنید آیا این اجزا واقعا یک مسئولیت دارند یا فقط امروز شبیه هم هستند.

.button--primary {
  padding: 0.65rem 1.1rem;
  border-radius: 0.6rem;
  font-weight: 700;
}
.button--secondary {
  padding: 0.65rem 1.1rem;
  border-radius: 0.6rem;
  font-weight: 700;
}

این قطعه فقط بخش تکراری را نشان می دهد؛ فایل before.css نسخه کامل است. دو اعلان هم شکل در بخش های نامرتبط لزوما نباید ادغام شوند. برای مثال، فاصله یک برچسب کوچک و یک پیوند اصلی ممکن است امروز برابر باشد اما در آینده مستقل تغییر کند. پایه مشترک را بر اساس نقش انتخاب کنید.

مرحله 2: کلاس پایه و کلاس تغییردهنده بسازید

کلاس button اندازه، فاصله، تایپوگرافی و حالت های عمومی را تعریف می کند. کلاس button–secondary فقط تفاوت رنگی را مشخص می کند. دو خط تیره در این نام یک قرارداد نام گذاری است؛ مرورگر رفتار ویژه ای برای آن در نظر نمی گیرد. اگر درباره انتخاب کلاس ها نیاز به مرور دارید، درس انتخابگرهای CSS را ببینید.

<a class="button button--secondary" href="#practice">
  مشاهده تمرین
</a>

.button {
  padding: 0.65rem 1.1rem;
  border-radius: var(--action-radius);
  background-color: var(--button-color, var(--action-primary));
  color: #ffffff;
  font-weight: 700;
}
.button--secondary {
  --button-color: var(--action-secondary);
}

برای به دست آوردن نتیجه کامل، هر دو کلاس را در HTML نگه دارید. کلاس تغییردهنده در این پروژه به تنهایی فاصله و کادر را تعریف نمی کند. این قرارداد وابستگی باید روشن باشد تا همکار بعدی بداند چرا افزودن فقط button–secondary ظاهر کامل ایجاد نمی کند.

مرحله 3: مقدارهای مشترک را نام گذاری کنید

رنگ های نقش دار و شعاع کادر در root قرار گرفته اند. حالا تغییر مقدار action-radius روی همه نمونه های پایه اثر می گذارد. متغیر button-color روی هر نمونه تعیین می شود و فقط همان نمونه و فرزندان مرتبط آن را تحت تاثیر قرار می دهد. برای مرور دامنه و ارث بری این مقدارها، درس متغیرهای CSS مکمل این جلسه است.

:root {
  --action-primary: #075985;
  --action-secondary: #115e59;
  --action-outline: #334155;
  --action-radius: 0.6rem;
}

برای هر عدد یک متغیر نسازید. متغیر زمانی مفید است که مقدار، نقش مشخصی داشته باشد یا چند بخش واقعا لازم باشد هماهنگ تغییر کنند. نام هایی مثل color1 و size2 اطلاعات کمی می دهند. نام بر اساس مسئولیت، مانند رنگ کنش اصلی، تغییر طراحی را خواناتر می کند.

مرحله 4: تفاوت های واقعی را صریح نگه دارید

نسخه کادر دار فقط تغییر رنگ پس زمینه نیست. پس زمینه آن شفاف است و رنگ متن باید تیره باشد. در نتیجه دو اعلان مستقل باقی می ماند. حذف همه تفاوت ها برای رسیدن به یک قانون کوتاه، خوانایی و کنترل طراحی را کاهش می دهد. برای مرور جزئیات کادرها، درس border و border-radius را بررسی کنید.

.button--outline {
  --button-color: var(--action-outline);
  background-color: transparent;
  color: var(--action-outline);
}

در اینجا پایه و تغییردهنده هر دو یک کلاس ساده هستند و اعلان های معمولی در یک منشا و لایه قرار دارند. تغییردهنده بعد از پایه آمده است و در ویژگی های مشترک آن را بازنویسی می کند. این نتیجه را به قانون کلی «همیشه آخرین خط برنده است» تبدیل نکنید؛ اهمیت، لایه و اولویت انتخابگر نیز در آبشار نقش دارند. توضیح کامل در درس آبشار و اولویت CSS آمده است.

مرحله 5: حالت های تعاملی را فراموش نکنید

پس از مشترک کردن پایه، حالت hover و focus-visible نیز برای هر سه نمونه تعریف شده اند. صرف یکسان بودن تصویر اولیه کافی نیست؛ کاربر باید با ماوس و صفحه کلید نتیجه مناسب ببیند. پروژه کادر فوکوس را حذف نمی کند. همچنین در ترجیح کاهش حرکت، transition را غیرفعال می کند.

.button:hover {
  opacity: 0.85;
  text-decoration: underline;
}
.button:focus-visible {
  outline: 3px solid #0f172a;
  outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .button { transition: none; }
}

اگر انتقال را از هر نمونه به پایه منتقل می کنید، رفتار همه نمونه ها را کنترل کنید. بهتر است ویژگی مورد نظر، مثل opacity، را مشخص کنید و بدون ضرورت transition: all ننویسید. برای یادآوری مدت و ویژگی انتقال، درس transition در CSS را مرور کنید.

از shorthand با آگاهی استفاده کنید

نوشتن padding با دو مقدار خواناست و تکرار را کم می کند، اما کوتاه نویسی همیشه بی خطر نیست. یک shorthand می تواند ویژگی های زیرمجموعه ای را که در همان خط ننوشته اید به مقدار اولیه برگرداند. اگر فقط رنگ زمینه را تغییر می دهید، background-color قصد شما را دقیق تر از background بیان می کند.

.sample {
  background-image: linear-gradient(#075985, #0f172a);
  background-color: #075985;
}
.sample--plain {
  background-color: #115e59;
}

در این نمونه، تصویر زمینه با تغییر background-color حذف نمی شود. اگر هدف حذف گرادیان است، آن را صریح با background-image: none تغییر دهید. قبل از تبدیل چند longhand به shorthand، تمام زیرخاصیت ها و اعلان های قبلی را بررسی کنید.

ساختار فایل و حذف کد بدون استفاده

ترتیب پیشنهادی پروژه شامل پایه صفحه، چیدمان، جزء مشترک، تغییردهنده ها، حالت ها و شرط های رسانه ای است. توضیح های کوتاه ابتدای بخش ها به پیدا کردن کد کمک می کنند. برای پروژه بزرگ ممکن است چند فایل یا ابزار ساخت لازم شود، اما در این مرحله فایل های ساده برای دیدن رابطه HTML و CSS کافی هستند.

یک کلاس را فقط چون در صفحه فعلی دیده نمی شود حذف نکنید. ممکن است در صفحه دیگر، حالت خطا، منوی باز یا عرض دیگری استفاده شود. گزارش Coverage ابزار توسعه، استفاده را در همان نشست و وضعیت های بررسی شده نشان می دهد و اثبات نمی کند کد در کل سایت بی استفاده است. قبل از حذف، ارجاع ها و حالت های واقعی را بررسی کنید.

روش بررسی پروژه قبل و بعد از بازنویسی

1. before.html و index.html را در یک مرورگر و با عرض یکسان باز کنید. سه پیوند اصلی باید ظاهر یکسان داشته باشند.
2. عرض های 320، 768 و یک نمایشگر بزرگ را امتحان کنید. شبکه از سه ستون به یک ستون تبدیل می شود و متن نباید بیرون بزند.
3. با Tab به هر پیوند بروید و کادر فوکوس را بررسی کنید. با Enter باید به مقصد داخلی صفحه برسید.
4. بزرگ نمایی را به 200 درصد برسانید و خوانایی متن و پیوندها را ببینید.
5. action-radius را در after.css تغییر دهید. هر سه نمونه باید هماهنگ تغییر کنند؛ سپس مقدار اولیه را برگردانید.
6. تنظیم کاهش حرکت را فعال کنید و مطمئن شوید انتقال حذف شده، اما محتوا و فوکوس باقی مانده اند.

چیدمان کارت ها مستقل از بازنویسی دکمه است. اگر درباره repeat و minmax سوال دارید، به درس CSS Grid برگردید. در این جلسه تفاوت معماری را در یک جزء کوچک نگه داشته ایم تا تشخیص تغییر ناخواسته ساده باشد.

تمرین: یک حالت هشدار بدون کپی پایه

پیوند تمرین کلاس های button و button–danger را دارد. فایل practice.css را بعد از after.css متصل کنید و فقط متغیر رنگ حالت هشدار را با مقدار #991b1b تعریف کنید. نیازی به تکرار padding، border، فونت یا حالت فوکوس ندارید. پیوند آموزشی هیچ داده ای را حذف نمی کند.

<link rel="stylesheet" href="after.css">
<link rel="stylesheet" href="practice.css">

پس از تلاش مستقل، practice.css را با solution.css جایگزین کنید و نتیجه را مقایسه کنید. پاسخ جداست و به صورت پیش فرض بارگذاری نمی شود. اگر رنگ عوض نشد، ترتیب اتصال فایل ها، املای کلاس و مقدار متغیر را در ابزار توسعه ببینید.

پرسش های متداول

آیا هر کد تکراری باید مشترک شود؟

خیر. ابتدا نقش و وابستگی تغییرها را بررسی کنید. دو جزء مستقل ممکن است فقط به صورت اتفاقی ظاهر مشابهی داشته باشند.

آیا برای بهینه سازی CSS باید از important استفاده کنیم؟

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

آیا فایل کم خط تر حتما سریع تر است؟

خیر. تعداد خط ها معیار سرعت نیست. حجم انتقال، کش و هزینه رندر را جدا اندازه بگیرید و نسخه خوانای منبع را نگه دارید.

درس قبلی: انیمیشن ها و keyframes در CSS

برای مطالعه بیشتر: سازماندهی CSS، اولویت انتخابگرها و رفتار shorthand در مستندات MDN.