حذف دستورات بلااستفاده در CSS

هنگامی که وب‌سایتی را طراحی می‌کنید، معمولاً از فایل‌های CSS استفاده می‌کنید؛ پس از گذشت زمان، ممکن است بر روی این طراحی اولیه، تغییراتی را انجام دهید. اگر به‌خوبی در انجام تغییرات توجه نکنید، بعداً خواهید دید که دستورات CSS زیادی بلااستفاده واقع شده‌اند.

دستورات و یا در واقع selectorهایی که در CSS بلااستفاده باقی می‌مانند، باعث خواهند شد که سرعت لود فایل CSS کاهش یابد و در نتیجه، سرعت بارگذاری وب‌سایتتان به‌تدریج کم و کمتر شود. در این مقاله قصد داریم که نحوه یافتن این دستورات بلااستفاده در CSS را توضیح دهیم.

مرورگرهای Opera و Firefox افزونه‌ی بسیار معروفی با نام Dust Me را دارند که صفحه کنونی شما را بررسی کرده و تمامی دستورات CSS که استفاده نشده‌اند را برایتان لیست می‌کند. کاربران کروم خوش‌شانس‌اند، چرا که ابزارهای توسعه‌دهنده‌ (Developer Tools) موجود در خود مرورگر کروم، دارای این قابلیت است.

حذف دستورات بی‌استفاده در CSS

برای اینکه به‌راحتی دستورات بلااستفاده را در مرورگر کروم پیدا کنید، به‌شکل زیر عمل کنید:

• صفحه مورد نظرتان را در Google Chrome باز کرده و Dev Tools را از مسیر File > Tools > Developers Tools را اجرا نمایید.
• سربرگ Audits را از Dev Tools انتخاب کرده و گزینه‌های Web Page Performance و Reload Page and Audit on Load را انتخاب کنید. حال بر روی Run کلیک کنید.
• در صفحه‌ی نتایجی که برایتان نمایش داده می‌شود، Remove Unused CSS Rules را باز کرده و فایل‌های CSSایی که به سایت شما لینک شده‌اند را انتخاب کنید. شما می‌توانید که فایل‌های CSSایی که توسط پلاگین‌های شبکه‌های اجتماعی اضافه شده‌اند را نادیده بگیرید چرا که از جانب شما غیرقابل کنترل‌اند.

شما لیستی از تمامی استایل‌هایی که تعریف کرده‌اید ولی بلااستفاده مانده‌اند را خواهید دید.

نتیجه‌ها را می‌توانید در یک فایل متنی ذخیره کنید و همین عملیات را مجدداً برای دیگر صفحات انجام دهید. دقت کنید که ممکن است برای چند صفحه مخلتف از یک فایل CSS استفاده کرده‌اید، لذا این احتمال می‌رود که در یکی از صفحات، از یکی از Selectorها استفاده نکرده باشید، اما برای صفحه‌ی دیگر، آن را بکار گرفته باشید.  لذا به تعداد selectorّهای استفاده نشده در هر صفحه دقت نمایید و آن‌هایی که دارای شمارنده‌ی بالاتری هستند، برای حذف ایمن‌تر خواهند بود.