‏FixCSS؛ CSS همون‌طور که باید می‌بود

تو طراحی CSS اشتباهاتی شده — و این حرف خود گروه کاری CSSه که یه «فهرست ناقص از اشتباهات طراحی CSS» منتشر کرده. پروژهٔ FixCSS دقیقاً به همین اشتباهات می‌پردازه: یه کتابخونه که می‌ذاره CSS رو همون‌طوری که «باید» طراحی می‌شد بنویسی، و بعد به‌صورت خودکار نام‌ها، مقادیر، سلکتورها و نحو تصحیح‌شده رو به CSS سازگار با مرورگر تبدیل می‌کنه.

ساده‌ترین مثالش تبدیل نام یه پراپرتیه:

const out = fixCSS.fixCSS(".box { corner-radius: 10px; }");
// -> '.box { border-radius: 10px; }'

اینجا corner-radius که اسم شهودی‌تریه، به همون border-radius استاندارد ترجمه می‌شه.

FixCSS چند دسته اصلاح رو انجام می‌ده: مقادیر shorthand تک‌مقداری رو به هر دو محور تعمیم می‌ده، ترتیب محورها رو از «عمودی‌اول» به «افقی‌اول» برای background-position و border-spacing عوض می‌کنه، و کومبیناتورهای سلکتور رو اصلاح می‌کنه (مثلاً >> به فاصله و ++ به ~). یه تبدیل opt-in هم داره که ترتیب چهارمقداری‌ها رو از پادساعتگرد به ساعتگرد می‌بره، چون فقط عددن و نمی‌شه خودکار تشخیصشون داد.

استفاده‌ش دو حالت داره. سمت کلاینت کافیه اسکریپت fixcss رو با یه تگ script معمولی به HTML اضافه کنی؛ اون‌وقت همهٔ بلاک‌های استایل، استایل‌های inline و حتی تغییرات بعدی DOM خودکار تبدیل می‌شن و به هیچ build step نیازی نیست. موقع build هم می‌تونی از CLI (با گزینه‌هایی مثل watch و خوندن از stdin) یا از API برنامه‌ای مثل تابع fixCSS استفاده کنی.

خود پروژه بیشتر یه اظهارنظر و نمایشه تا یه ابزار تولیدی جدی؛ نشون می‌ده اگه بعضی تصمیم‌های تاریخی CSS جور دیگه‌ای گرفته می‌شد، نوشتن استایل چقدر می‌تونست تمیزتر باشه. سازنده می‌گه این پروژه از BritCSS الهام گرفته و روی NPM و CodePen هم در دسترسه.

نکات کلیدی:

• FixCSS اشتباهات مستندشدهٔ طراحی CSS رو با یه نحو «درست» فرضی دور می‌زنه
• خروجی همیشه CSS استاندارد و سازگار با مرورگره
• نمونه‌ها: corner-radius→border-radius، اصلاح ترتیب محور و کومبیناتورهای سلکتور
• سمت کلاینت با یه تگ script و بدون build step کار می‌کنه
• برای build هم CLI و هم API برنامه‌ای داره