نحوه عملکرد زیباسازی CSS
زیباساز استایلشیت شما را کاراکتر به کاراکتر میخواند، عمق تودرتوی هر بلوک را دنبال میکند و آن را با فاصلهگذاری یکسان مجدداً emit میکند. هرگز آنچه styleها انجام میدهند را تغییر نمیدهد — فقط نحوه ظاهر شدن آنها در فایل را.
- توکنسازی. کتابخانه ورودی شما را به جریانی از توکنها تبدیل میکند: selectorها، نام ویژگیها، مقادیر، at-ruleها، کامنتها، و آکولادها، دونقطهها و سمیکولونهایی که آنها را جدا میکنند. رشتهها و مقادیر url() بهعنوان واحدهای منفرد شناسایی میشوند، بنابراین آکولادی درون ویژگی content هرگز با جداکننده بلوک اشتباه گرفته نمیشود.
- ردیابی تودرتویی. زیباساز هنگام پیمایش جریان توکن، سطح تورفتگی جاری را نگه میدارد. هر آکولاد باز سطح را عمیقتر میکند، چه متعلق به یک rule block، یک media query یا یک keyframes block باشد، و هر آکولاد بسته آن را برمیگرداند. آن عمق تعیین میکند چه تعداد واحد تورفتگی در ابتدای هر خط قرار میگیرد.
- اعمال گزینههای شما. انتخاب تورفتگی (۲ فاصله، ۴ فاصله، یا یک tab) عرض یک سطح را تعیین میکند. تنظیم brace-style مشخص میکند آکولاد باز به selector قبل از خود بچسبد یا به خط خودش برود. toggleهای باقیمانده یک خط خالی بین rule blockها اضافه میکنند و selectorهای گروهبندیشده را روی خطوط جداگانه تقسیم میکنند.
- بازتولید. در نهایت formatter توکنها را با تورفتگی و شکستن خطی که محاسبه کرده چاپ میکند، یک declaration در هر خط و یک فاصله پس از هر دونقطه قرار میدهد. نتیجه همان استایلشیت است که طوری چیده شده که انسان بتواند cascade را اسکن کند.
چرا CSS را زیبا کنیم
- خواندن استایلشیتهای فشرده. CSS production در یک خط بدون فاصله بین قوانین ship میشود. زیباسازی شکستن خطوط و تورفتگی را بازمیگرداند تا بتوانید selector پشت یک bug چیدمانی را پیدا کنید و دقیقاً ببینید چه declarationهایی تنظیم میکند، حتی بدون source map.
- مرتب کردن فایلهای ناهماهنگ. استایلشیتی که چندین نفر به آن دست زدهاند به تورفتگی مختلط و سبکهای آکولاد متنوع میرسد. یک بار عبور از زیباساز کل فایل را به یک چیدمان واحد normalize میکند، که diff بعدی تغییرات cascade واقعی را به جای سروصدای فضای خالی نشان میدهد.
- این ابزار صفحه شما را کند نمیکند. اکثر formatter های آنلاین کل کتابخانه را به محض باز شدن صفحه بارگذاری میکنند. این ابزار js-beautify را فقط وقتی روی Beautify کلیک میکنید یا Live mode را روشن میکنید lazy-load میکند، بنابراین بارگذاری صفحه چند کیلوبایت هزینه میبرد نه چند صد، و رندر اولیه سریع میماند.
- هیچ چیز مرورگر شما را ترک نمیکند. زیباساز کاملاً روی دستگاه شما اجرا میشود. CSS شما هرگز به سروری آپلود نمیشود، که اهمیت دارد وقتی استایلشیتی که بررسی میکنید متعلق به یک مشتری است، نامهای کلاس داخلی دارد، یا تحت توافق محرمانگی است.
کاربردهای رایج
زیباسازی CSS هر بار که کسی نیاز دارد استایلشیتی را بخواند که برای خوانده شدن نوشته نشده ظاهر میشود.
- اشکالزدایی production: یک استایلشیت فشرده کشیدهشده از تب Network را paste کنید تا قانونی را پیدا کنید که چیدمان مورد انتظارتان را override میکند.
- آمادهسازی code review: فایل یک contributor با تورفتگی ناهماهنگ را قبل از باز کردن pull request reformat کنید تا reviewers تغییرات cascade را ببینند نه اغتشاش چیدمان.
- یادگیری و ممیزی: استایلشیت یک framework یا component-library را گسترش دهید تا مطالعه کنید چگونه selectorها، media queryها و custom propertyهایش ساختار یافتهاند.
یک مثال عملی
یک تکخطی فشرده بگیرید: a{color:red;margin:0}b{padding:0}. آن را در بالا با تورفتگی روی ۲ فاصله و brace style روی Collapse الصاق کنید، سپس Beautify را بزنید. بلوکهای خوانا برمیگردانید: a { در خط خودش، declarationهای color: red; و margin: 0; هر کدام یک سطح عمیقتر تورفته، آکولاد بستن زیر selector صف بسته، و قانون b در پایین. brace style را به Expand تغییر دهید و هر آکولاد باز به خط خودش میرود. تورفتگی را به Tabs تغییر دهید و هر سطح از دو فاصله به یک کاراکتر tab تغییر میکند. styleها یکسان هستند؛ فقط چیدمان تغییر میکند.
FAQ
آیا این در مرورگر من اجرا میشود؟
بله. کتابخانه js-beautify اولین بار که روی Beautify کلیک میکنید یا Live mode را فعال میکنید lazy-load میشود، سپس cached میشود. CSS شما هرگز صفحه را ترک نمیکند — هیچ round-trip سروری و هیچ آپلودی در کار نیست.
آیا زیباسازی همان un-minifying است؟
قالببندی خوانا را برمیگرداند — تورفتگی، شکستن خطوط و فاصلهگذاری — اما نمیتواند کامنتهایی را که minification حذف کرده یا هر ساختاری که اصلاً در فایل نبوده را بازگرداند. فقط declarationها و selectorهای موجود را بازقالببندی میکند.
آیا زیباسازی نحوه رندر شدن styleهایم را تغییر میدهد؟
نه. زیباسازی فقط فضاهای خالی و شکستن خطوط اضافه و حذف میکند؛ cascade دستنخورده باقی میماند و صفحه بهشکل یکسان رندر میشود. ترتیب ویژگیها، specificity و مقادیر دقیقاً همانطور که نوشتهاید باقی میمانند.
گزینههای brace-style به چه معناست؟
Collapse آکولاد باز را در همان خط selector نگه میدارد (a {)، که convention رایج CSS است. Expand هر آکولاد باز را به خط خودش زیر selector میبرد. toggleهای blank-line و one-selector-per-line فاصله بین قوانین و نحوه چیدمان selectorهای گروهبندیشده مانند h1, h2, h3 را کنترل میکنند.
زیباسازی CSS در سمت مرورگر بدون مرحله build یا آپلود به شما استایلشیتی خوانا میدهد. یک فایل فشرده یا بینظم الصاق کنید، تورفتگی و سبک آکولاد را انتخاب کنید، سپس نتیجه را کپی یا دانلود کنید. هیچ چیز دستگاه شما را ترک نمیکند، هیچ حسابی نیاز نیست، و کتابخانه فقط وقتی آن را بخواهید بارگذاری میشود — بنابراین باز کردن این صفحه چند کیلوبایت هزینه دارد، نه یک مگابایت.