فرادرس۱۱ ابزار مفید بررسی، پاکسازی و بهینه سازی CSS — فهرست کاربردی
بهینه‌سازی یک استایل‌شیت CSS روشی مناسب برای افزایش سرعت بارگذاری وب‌سایت یا وب اپلیکیشن محسوب می‌شود. با کاهش اندازه فایل CSS، سرور زمان کمتری برای بارگذاری می‌گیرد و در نتیجه صفحه وب سریع‌تر می‌شود. استفاده از بررسی‌کننده‌های CSS که خطاهای رایج را اصلاح می‌کنند در این فرایند نقش بسزایی ایفا می‌کند. ابزارها و برنامه‌هایی که در این مقاله معرفی می‌کنیم به شما کمک می‌کنند تا اقدام به پاکسازی و بهینه سازی CSS بکنید، خطاها را حل نمایید و ساختار کلی را بهبود ببخشید.
در کنار بهینه‌سازی کدها، شیوه‌های مدرن توسعه CSS با نحو (Syntax) بهتر و تمیزتر نیز ارتقا و بهبود قابل توجهی یافته‌اند. اگر واقعاً می‌خواهید فرایند توسعه CSS خود را ارتقا ببخشید، فریمورک‌های CSS با استفاده از کدهای استریم لاین شده کمک شایان توجهی می‌کنند.
ابزارهای بررسی کدهای CSS
ابتدا ابزارهای بررسی‌کننده CSS را معرفی می‌کنیم.
1. PostCSS
PostCSS (+) یک بررسی‌کننده ساده کد نیست، بلکه یکی از قدرتمندترین گزینه‌ها محسوب می‌شود. قدرت آن‌چنان است که از سوی گوگل، گیت‌هاب، وردپرس و بسیاری بازیگران بزرگ دیگر مورد استفاده قرار می‌گیرد. PostCSS یک سیستم متن-باز است که می‌توانید روی اپلیکیشن‌های خود توزیع کرده و طیف گسترده‌ای از قابلیت‌ها را از طریق افزونه‌ها مهیا سازید.
این افزونه‌ها می‌توانند کارکردهای مفید مختلفی را اجرا کنند. کتابخانه وسیعی از آن‌ها وجود دارد، اما برخی از کارهایی را که می‌توان انجام داد را به عنوان مثال معرفی می‌کنیم:
- Lint کردن کد برای جلوگیری از خطا.
- پاکسازی کد برای افزایش خوانایی.
- تغیر CSS برای تطبیق‌پذیری بیشتر با مرورگرهای مدرن.
در ادامه این فهرست باز هم به PostCSS اشاره خواهیم کرد و از این رو ارزش امتحان کردن را دارد. این ابزار یک پشتیبانی قوی از سوی جامعه توسعه‌دهنده‌ها کسب کرده است و بدین ترتیب PostCSS با نیازهای توسعه وب مدرن هماهنگ می‌ماند.
2. Code Beautify
این ابزار اعتبارسنجی CSS (+) یک بررسی‌کننده توصیفی عرضه می‌کند که می‌تواند برای پاکسازی CSS مورد استفاده قرار گیرد. CSS Validator کد شما را تجزیه می‌کند و پیشنهادهایی برای بهینه‌سازی آن در اختیار شما قرار می‌دهد. همچنین در صورتی که امکان بهینه‌سازی CSS وجود داشته باشد، هشدارهایی ارائه کرده و خطاهای کد CSS را بررسی می‌کند.
شما می‌توانید CSS را هم به طور دستی در ادیتور آن وارد کنید و همچنین می‌توانید URL وب‌سایت خود را به آن بدهید تا به طور خودکار CSS را برای شما بارگذاری کند.
3. CSS Lint
CSS Lint (+) یک ابزار کمکی دیگر برای CSS است که نام آن بر مبنای یک اصطلاح رایج برای پاکسازی کد تعیین شده است. CSS Lint یک ابزار متن-باز است که برخی نکات مفید برای بهبود کد CSS ارائه می‌دهد.
CSS Lint یک منوی بازشدنی کارآمد دارد که امکان انتخاب خطاهای احتمالی که باید بررسی شوند را فراهم می‌سازد. در حالتی که با مشکل خاصی مواجه شده‌اید، می‌توانید آن را تعیین کنید تا دقیقاً همان خطاها هدف‌گیری شده و کد مورد بررسی قرار گیرد.
4. Beautify Tools
Beautify Tools (+) میزبان تعدادی از مبدل‌ها و ابزارها برای توسعه‌دهندگان وب است. این وب‌سایت بسیار فراتر از CSS عمل می‌کند، اما یک CSS validator داخلی نیاز دارد. این validator مبتنی بر وب است و می‌تواند یک اعتبارسنجی ساده اجرا کرده و یا قالب‌بندی کد را برای نمایش خواناتر مورد بررسی قرار دهد.
5. W3C CSS Validator
کنسرسیوم تار جهان‌گستر وب (W3C) به دلیل منابعی که در جهت کمک به توسعه‌دهندگان برای یادگیری و رشد ارائه می‌دهد کاملاً شناخته شده است. این کنسرسیوم یک ابزار CSS checker نیز دارد که حدود یک دهه است عرضه شده است. این وب‌سایت (+) کد خام، URL و فایل‌های CSS آپلود شده را برای بررسی ساختار CSS قبول می‌کند.
ابزارهای پاکسازی کدهای CSS
در این بخش ابزارهایی معرفی می‌شوند که کاربرد اصلی آن‌ها پاکسازی کدهای CSS است.
6. Code Beautifier
Code Beautifier (+) برای بررسی خطاها مفید است، اما توسعه‌دهندگانی که با حجم بالایی از کد کار می‌کنند، بر اهمیت قالب‌بندی تمیز وقوف کامل دارند. تلاش برای کار با کدی که به درستی فاصله‌بندی نشده یا تورفتگی‌های نامنسجمی دارد می‌تواند یک کابوس باشد.
Code Beautifier یک ابزار قالب‌بندی کد است که کد خام CSS را می‌گیرد و در خروجی یک برگه تمیز CSS با بهبود قابلیت‌ها ارائه می‌کند. شما می‌توانید از میان گزینه‌های بررسی مختلف یکی را انتخاب کنید تا کد را مطابق میل خود قالب‌بندی نمایید. این وب‌سایت یک ابزار بهینه‌سازی داخلی نیز دارد که گزینه‌ای به صورت ارائه خروجی در یک فایل دارد.
7. CSS Redundancy Checker
اجتناب از کد تکراری یکی از اصول اساسی توسعه کد مناسب است. این اصل در مورد CSS نیز صدق می‌کند. هر چه استایل‌شیت بزرگ‌تر شود، نگهداری هر بخش کوچک آن دشوارتر می‌شود. این ابزار بررسی کد تکراری (+) کد خام CSS را می‌گیرد و در صورت وجود هر نوع سلکتور تکراری آن را نشان می‌دهد. بدین ترتیب به کاهش اندازه فایل نیز کمک می‌کند.
ابزارهای بهینه‌سازی کدهای CSS
زمانی که بحث بررسی و اعتبارسنجی CSS به پایان رسید و کدهای غیرضروری را پاکسازی کردید، می‌توانید بهترین عملکرد را از طریق بهینه‌سازی کد از آن به دست آورید. یکی از بهترین روش‌ها برای تسریع عملکرد CSS و در نتیجه وب‌سایت کاهش اندازه (minify) CSS است. در فرایند minify کردن، کد وارد می‌شود و عناصر خاصی فشرده می‌شوند به طوری که مرورگر می‌تواند آن‌ها را بسیار سریع‌تر بخواند.
کد مناسب مرورگر از نظر قالب‌بندی چندان مناسب نیست. اما در عوض نام متغیرها کاهش می‌یابد، کامنت‌ها حذف می‌شوند، کدهای استفاده‌نشده حذف می‌شوند و مواردی از این دست روی آن اجرا می‌شود. در این فرایند هر چیزی که مرورگر برای رندر کردن به آن نیاز ندارد، حذف می‌شوند. در ادامه برخی از ابزارهایی که می‌توانند اقدام به minify کردن CSS بکنند را معرفی کرده‌ایم.
8. CSS Nano
CSS Nano (+) یک ابزار minify کردن مدرن برای اسکریپت‌های CSS که با Node.js نوشته شده‌اند. CSS Nano از طریق خط فرمان در یک پکیج که داخل ابزار مدیریت پکیج Node برای جاوا اسکریپت یعنی NPM ساخته شده اجرا می‌شود. این ابزار یک وب اپلیکیشن آنلاین نیز دارد که اگر نمی‌خواهید از خط فرمان استفاده کنید، می‌تواند تبدیل را به صورت آنی اجرا کند.
این ابزار بهینه‌سازی‌های مختلف را روی کد اجرا می‌کند و در پس‌زمینه از PostCSS بهره می‌گیرد. چنان که پیش‌تر اشاره کردیم PostCSS یک ابزار بسیار قدرتمند است. CSS Nano بر مبنای این قدرت و پایداری ساخته شده است.
9. CSSO
CSSO (+) ابزاری است که کد CSS خام شما را می‌گیرد و آن را با چندین گزینه مختلف minify می‌کند. در میان این گزینه‌های مواردی شامل restructure که کد را بهینه‌سازی می‌کند و beautify که فرمت CSS را برای افزایش سهولت خواندن پاکسازی می‌کند، قرار دارند. بدین ترتیب می‌توانید هر دو را همزمان انتخاب کنید تا از قدرت هر دو گزینه همزمان بهره بگیرید.
10. CSS Minify
CSS Minify (+) گزینه‌های کمتری نسبت به ابزارهای پیشرفته‌تر دارد، اما کارکرد آن مناسب است. این ابزار کد خام و فایل آپلود شده برای ایمپورت CSS را قبول می‌کند.
11. Purify CSS
Purify CSS (+) کتابخانه‌ای است که روش متفاوتی برای بهینه‌سازی CSS ارائه می‌کند. بدین ترتیب به جای تغییر دادن فایل CSS می‌توانید Purify CSS را روی کل اپلیکیشن اجرا کنید این ابزار اپلیکیشن شما را تحلیل می‌کند و همه CSS-هایی را که از سوی اپلیکیشن استفاده نمی‌شوند، حذف می‌کند.
این وضعیت به طور خاص در مواردی مفید است که از یک فریمورک CSS استفاده کنید. فریمورک گزینه‌ای minify را ارائه می‌کند، اما سنگین است زیرا مقدار CSS مورد نیاز برای فریمورک بالا است. Purify CSS می‌تواند اپلیکیشن را زمانی که از فریمورک استفاده می‌کنید بگیرد و به هسته مرکزی کد دسترسی پیدا کند و بدین ترتیب CSS–های غیرضروری را به روش بهینه‌تری حذف می‌کند.
اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:
- مجموعه آموزش‌های طراحی سایت با HTML و CSS
- مجموعه آموزش‌های برنامهنویسی
- آموزش تکمیلی طراحی وب با CSS3) CSS)
- مفاهیم مقدماتی CSS — آموزش CSS (بخش اول)
- مفاهیم آبشار و وراثت در CSS — آموزش CSS (بخش پنجم)
==
