بهینه سازی (Optimization)
بهینه سازی CSS یعنی سبک تر و سریع تر شدن سایت. «بهینه سازی (Optimization)» یعنی انجام کارها با کمترین هزینه. پس کاربر سریع تر محتوا می بیند و تجربه بهتر می شود.
قاعده ساده: انتخاب گرهای ساده تر
«انتخاب گر (Selector)» الگوی انتخاب عنصر است. هرچه ساده تر باشد، مرورگر سریع تر سبک ها را اعمال می کند.
/* بد: انتخاب گر پیچیده */
body #navlist ul li a.button:hover {
background-color: blue;
}
/* خوب: هدف گیری مستقیم */
.button:hover {
background-color: blue;
}
از انتخاب گر سراسری (*) کم استفاده کن
ستاره همه چیز را هدف می گیرد. این کار کند است. فقط وقتی لازم است استفاده کن.
/* استفاده سنگین و غیرضروری */
* {
margin: 0;
padding: 0;
font-size: 16px;
}
استایل درون خطی نه، فایل خارجی بله
«درون خطی (Inline)» HTML را شلوغ می کند و مدیریت را سخت می کند. بهتر است CSS را جدا نگه داری.
<!-- بد: استایل درون خطی -->
<div style="color: red; font-size: 18px;">Hello</div>
<p style="color: blue; font-size: 16px;">Test</p>
@import ممنوع، <link> مجاز
@import بارگذاری را عقب می اندازد. بنابراین <link> را در <head> بگذار تا زودتر لود شود.
<link rel="stylesheet" href="style.css">
میان بُرها را به کار ببر
«میان بُر (Shorthand)» یعنی چند ویژگی در یک خط. کد کمتر، پردازش سریع تر.
/* نسخه طولانی */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
/* نسخه میان بُر */
margin: 10px 20px;
انیمیشنِ سبک: transform و opacity
تغییر width و top چیدمان را دوباره محاسبه می کند. بهتر است transform و opacity را انیمیت کنی.
/* بد: تغییر اندازه در انیمیشن */
.box {
transition: width 300ms;
}
/* خوب: روی GPU و سبک تر */
.box {
transition: transform 300ms, opacity 300ms;
}
.box:hover {
transform: translateY(-4px);
opacity: 0.95;
}
گام های عملی بهینه سازی
- انتخاب گرها را ساده کن.
- استایل ها را در یک فایل ادغام کن.
- فایل را کمینه سازی و کش فعال کن.
- انیمیشن های غیرضروری را حذف کن.
- از توابع ریاضی برای اندازه هوشمند کمک بگیر.
نکته: اول ساختار را درست کن. سپس برای نگهداری بهتر، از میان بُرها استفاده کن و قوانین حساس را با اختصاصی سازی مدیریت کن.
جمع بندی سریع
- انتخاب گرها کوتاه و مشخص باشند.
- @import را کنار بگذار و link بده.
- CSS را ادغام، کمینه و کش کن.
- transform و opacity را انیمیت کن.
- از میان بُرها برای سادگی استفاده کن.