حذف آنلاین CSS استفادهنشده
HTML و CSS را بچسبانید و فقط قاعده‌هایی را نگه دارید که با چیزی در صفحه تطبیق دارند.
حذف آنلاین CSS استفادهنشده
PurgeCSS این ایده را رایج کرد: یک استایلشیت را با markupی که از آن استفاده میکند مقایسه کن و هر قاعدهای را که با هیچ چیز تطبیق ندارد کنار بگذار. این صفحه همین کار را در مرورگر شما انجام میدهد. حذف‌کننده CSS استفادهنشده را روی زبانه HTML + CSS باز میکند که در آن صفحه و استایل‌شیتش را می‌چسبانید، و چیزی از دستگاه شما بیرون نمی‌رود.
چه چیزی حفظ میشود
- قاعدهای که دست‌کم یک انتخابگرش با عنصری در HTML تطبیق دارد.
- انتخابگری با حالت یا شبه‌عنصر، مثل
.btn:hoverیا.icon::before، وقتی عنصر بدون آن بخش وجود دارد. - هر چیزی در همیشه نگهدار: نام کلاس‌ها، idها با
#یا بدون آن، و الگوهای میان دو اسلش. - هر انتخابگری که مرورگر نمی‌تواند تجزیه کند، به‌جای حدس زدن.
@font-faceهمیشه، و@keyframesتا وقتی که یک قاعدهٔ حفظ‌شده یا یک استایل درون‌خطی هنوز نام آن انیمیشن را بیاورد.
کلاس‌هایی که نمی‌بینید
HTML چسباندهشده یک عکس فوری از صفحه است. اسکریپتها هنگام اجرای صفحه کلاس اضافه می‌کنند: یک منوی باز، یک اسلاید فعال، یک هدر چسبان، یک خطای اعتبارسنجی. قاعده‌های این کلاس‌ها استفادهنشده به نظر می‌رسند، چون در آن عکس فوری هیچ عنصری این کلاس‌ها را ندارد. آنها را در همیشه نگهدار بنویسید. فریم‌ورک‌ها و صفحه‌سازها اغلب پیشوند مشترکی دارند، پس یک الگوی واحد مثل /^is-/ یا /^elementor-/ یک خانواده کامل از آنها را پوشش میدهد. اگر در عوض می‌توانید صفحه را در Chrome ضبط کنید، صفحه تبدیل Coverage JSON به CSS آنچه را مرورگر واقعاً اعمال کرده می‌بیند، از جمله همین کلاسهای زمان اجرا.
یک مثال
یک صفحه فرود مبتنی بر Bootstrap که از یک grid، یک navbar و دو سبک دکمه استفاده میکند، باز هم کل فریم‌ورک را بارگذاری میکند. صفحه و استایلشیت را بچسبانید، کلاس‌هایی را که navbar روشن و خاموش میکند، مثل show و collapsing، به همیشه نگهدار اضافه کنید، و بیشتر فریم‌ورک کنار می‌رود. فهرست انتخابگرهای حذف‌شده نشان میدهد چه چیزی رفته است و سریع‌ترین جا برای پیدا کردن کلاسی است که باید می‌ماند.
آنلاین یا در فرایند build
برای یک صفحه تکی، یک قالب یا یک ایمیل، این صفحه از نصب هر چیزی سریع‌تر است. برای سایتی که تغییر میکند، PurgeCSS را در فرایند build اجرا کنید تا هر بار که markup عوض میشود CSS دوباره پاکسازی شود: npx purgecss --css css/style.css --content index.html --output dist/css/. در هر دو حالت، پیش از جایگزین کردن استایلشیت اصلی، صفحه را در همه پهناها آزمایش کنید.