۱۵ نکته جهت بهینه سازی کدهای CSS

۱۵ نکته جهت بهینه سازی کدهای CSS

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

1. استفاده از شبهCSS ها

شبه CSSها متدهای رایجی هستند برای کاهش دفعات درخواست تصاویر از سرور. با ترکیب چندین تصویر پس زمینه در یک تصویر و استفاده از کد Background-image و Background-position برای نمایش قطعه ای از تصویر در داخل تصویری بزرگتر می توان تعداد دفعات درخواست به سرور را کاهش داد که بر روی ترافیک وب سایت بسیار تاثیر گذار است.

Wire Frame image

2. ترکیب فایلهای CSS در یک فایل

یکی از بهینه ترین راه ها جهت بهینه سازی و بکارگیری CSS در طراحی وب سایت این است که تمامی کدهای بکار رفته را در فایلی یک جا جمع آوری کنید. توجه داشته باشید که بارگذاری یک فایل بزرگ سریعتر از بارگذاری چندین فایل کوچک است به این دلیل که ارسال و پاسخ دهی HTTP به درخواست بارگذاری یک فایل یا دستور، زمان بر است و در دفعات متوالی باعث افزایش شدید ترافیک سایت می گردد از همین رو تا می توانیم باید این درخواست ها را کاهش دهیم.

3. بکارگیری CSS بصورت فایل خارجی

به دو روش می توان از CSSها استفاده کرد اول اینکه کدها را بصورت Inline بنویسیم یعنی کدها را در داخل تگ <Style>و در داخل خود صفحات مستقیماً بکار گیریم. دوم اینکه کلیه این کدها را در داخل فایلی متنی نوشته و با پسوند CSS. ذخیره نمائیم و بعد فایل را با تگ Link فراخوانی کنیم. امروزه وب سایت های کمی از روش اول استفاده می کنند، روش دوم بهینه تر است البته درصورت نیاز میتوان از کدهای کوتاه و ویژه در بعضی صفحات استفاده نمود. از مزایای روش دوم می توان به یکپارچگی کدها، حذف کدهای تکراری، کاهش حجم صفحات، سادگی تغییرات در آینده، افزایش خوانایی کدهای صفحات، قابلیت ثبت و ماندگاری در حافظه مرورگرها (یعنی یکبار فایل بارگذاری می شود و چندین بار قابل استفاده است) اشاره نمود.

4. همیشه CSSها را در بالای (بخش Head) صفحات قرار دهید

همیشه کدهای CSS را در تگ Head در بالای صفحات قراردهید (چه به صورت inline و چه بصورت فایل خارجی) و بلعکس کدهای JavaScript را در پایین صفحات قرار دهید. با این کار اولاً سایت بصورت لحظه به لحظه بارگذاری می گردد و ثانیاً بارگذاری با استایل انجام می شود یعنی سایت با ظاهری زیباتر و مرتب تر بارگذاری می شود. در ضمن بارگذاری کدهای جاوا اسکریپت در ابتدای وب سایت مانع ارسال همزمان چندین در خواست به سرور می گردد.

5. استفاده از Link به جای import@

بنابر این دلایل که:

  • استفاده از import@ در داخل استایل ها باعث می شود که با هر بار اجرای صفحه CSSها دوباره دانلود شوند. درحالیکه با دستور Link یک بار دانلود و در حافظه مرورگر ماندگار می شود تا در اجرای بعدی صفحه نیاز به بارگذاری مجدد آن نباشد و صفحه سریعتر بارگذاری شود.
  • استفاده از import@ در مرورگر IE، با اجرای صفحه باعث می شود درخواست های دانلود تغییر و جابجا شوند. که این باعث می شود زمان دانلود طولانی گردد.

6. استفاده از خلاصه نویسی در CSSها

منظور از خلاصه نویسی این است که برای بعضی از تگ های پر کاربرد حالت پیشفرض تعیین کنیم، تا لازم نباشد چندین بار این کدها را تکرار کنیم. مثال:

a{ Color:#999; text-decoration:none}

با دستورات فوق کلیه تگ های <a> ( تگ لینک) موجود در صفحه به رنگ خاکستری نمایش داده می شوند مگر اینکه برای یک تگ خاص <a> کلاسی مجزا بنویسیم.

7. گروهبندی CSSهای یکسان

گروهبندی کلاس های یکسان در طراحی طولانی مدت تغییرات، تحلیل و خوانایی کدها را ساده تر و بهینه تر می کند. مثال:

قبل از گروهبندی

 h1 {padding:5px 0; font-family:tahoma; color:#fff }
 #box1 .heading {padding:5px 0; font-family:tahoma; color:#fff }
 #box2 .heading {padding:5px 0; font-family:tahoma; color:#fff }

بعد از گروهبندی

 h1, #box1 .heading, #box2 .heading {padding:5px 0; font-family:tahoma; color:#fff }

8. کاهش خطوط فایل

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

9. حذف سمی کالن (;) آخرین دستور هر بلوک

.myClass{ direction:rtl; float:right; } ---> .myClass{ direction:rtl; float:right }

10. استفاده ازتوضیحات ساده

/**************/
/* Content Page */       --->     /* Content Page */
/*************/

11. مختصرسازی کد رنگ ها

کدهای رنگ بصورت اعداد هگزا دسیمال نوشته می شوند ولی می-توان در حالت هایی که کد رنگ ساختاری تکراری دارد، کد را از 6 رقم به 3 رقم کاهش داد. مثلاً:

Color:#000000; ---> Color:#000;
Color:#FF55BB; ---> Color:#F5B;

12. حذف “PX” ها

میتوان از 0 به جای 0px استفاده کرد مثلاً:

 Margin:0 به جای Margin:0px

13. خلاصه سازی

استفاده از نامگذاری های کوتاه برای کلاس ها. حتی در پایان و پس از صحت عملکرد کدها می توانید نام کلاس ها را به یک یا دو حرف کاهش دهید. مثال:

 .MyBlueRectangleDiv ---> .BR

14. حذف کلاس های بدون استفاده

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

15. استفاده از ابزارهای فشرده سازی CSS

حال شاید پس از خواندن این مقاله با خود فکر کنید که کنترل و مدیریت کدها و نگهداری آنها در این چهار چوب کاری سخت و زمانگیر باشد و نتوانید از پس آن برآئید. ولی نگران نباشید نرم افزارها و سایت هایی وجود دارند که اکثر این روال ها و تکنیک ها را به سادگی بر روی کدهای شما اعمال می کنند:

منبع:

با ما باشید