ابزار مرتب‌سازی، فشرده‌سازی و تحلیل CSS
CSS را مرتب، Minify و تحلیل کنید؛ Selectorها و Specificity را بررسی کنید، Variables و رنگ‌ها را استخراج کنید و ساختار Stylesheet را بهتر ببینید.
CSS ورودی
Preview زنده
CSS شما فقط روی محتوای نمونه داخل iframe اعمال می‌شود و JavaScript اجرا نمی‌شود.
CSS خروجی
Specificity Lab
CSS Formatter همراه با تحلیل ساختار Stylesheet
Stylesheetهای بزرگ فقط به Beautify نیاز ندارند. CSS Studio بعد از Format، اطلاعات Selectorها، Specificity، Custom Propertyها، رنگ‌ها و Media Queryها را استخراج می‌کند تا مرور کد سریع‌تر شود.
Minifier برای آماده‌سازی خروجی فشرده و Specificity Lab برای مقایسه Selectorها کاربرد دارد؛ Diagnostics نیز مواردی مثل !important و Declarationهای تکراری را برجسته می‌کند.
راهنمای استفاده از CSS Studio
این راهنما فقط درباره کار با همین ابزار است؛ از شروع کار تا معنی گزینه‌ها و خواندن خروجی.
این ابزار دقیقاً چه کاری انجام می‌دهد؟
CSS Studio برای Format/Minify، تحلیل Selector و Specificity، استخراج Variable/Color/Media Query و پیدا کردن الگوهایی مثل !important یا Declaration تکراری ساخته شده است.
قبل از شروع این موارد را بدانید
- CSS کامل یا Snippet را وارد کنید.
- Sort Declarations می‌تواند ترتیب Propertyها را عوض کند.
- Preview روی DOM نمونه است و دقیقاً معادل پروژه واقعی شما نیست.
قدم‌به‌قدم با ابزار کار کنید
- ۱. CSS را وارد کنیدStylesheet یا Snippet را در Editor قرار دهید.
- ۲. Format/Minify را اجرا کنیدکد را برای خوانایی مرتب یا برای خروجی فشرده Minify کنید.
- ۳. Inspectorها را بخوانیدSelectorها، Specificity، Variables، Colors و Media Queryها را بررسی کنید.
- ۴. Diagnostics و Preview را کنترل کنیدهشدارها و اثر CSS روی محتوای نمونه را ببینید.
دکمه‌ها، گزینه‌ها و اصطلاحات یعنی چه؟
اگر نام یک گزینه فنی است، این بخش توضیح می‌دهد چه کاری انجام می‌دهد و در کدام بخش ابزار به کارتان می‌آید.
- Sort Declarations
- Propertyهای هر Rule را مرتب می‌کند.
- Specificity
- وزن Selector را محاسبه و مقایسه می‌کند.
- Tokens
- Variables و رنگ‌های استفاده‌شده را استخراج می‌کند.
- Diagnostics
- مواردی مثل !important یا Declaration تکراری را برجسته می‌کند.
خروجی ابزار را چطور تفسیر کنید؟
Specificity را مقایسه‌ای بخوانید، نه به‌عنوان امتیاز خوب/بد مطلق. Diagnostics هشدار هستند و Context Rule مهم است. Variables/Colors برای Audit سریع Design Tokenها کاربرد دارند.
اگر مرحله بعدی کارتان این است
اگر می‌خواهید موضوع را عمیق‌تر دنبال کنید
سوالات رایج
CSS Minify چه چیزی را حذف می‌کند؟
Whitespace و Formatting غیرضروری را کاهش می‌دهد؛ هدف این است که معنی Stylesheet حفظ شود.
Specificity چیست؟
قانون وزن‌دهی Selectorهاست که در کنار Cascade و Source Order روی انتخاب Declaration نهایی اثر می‌گذارد.
آیا این ابزار CSS را اجرا هم می‌کند؟
Preview روی محتوای نمونه برای بررسی سریع است؛ برای اجرای کامل HTML/CSS/JS از Frontend Playground استفاده کنید.