سال‌ها پیش در پروژه‌ای که قرار بود در دو هفته تحویل داده شود وسط طراحی یک کارت پیچیده گیر کردم. نمی‌توانستم یادم بیاید ترکیب flex-direction با justify-content در چه حالتی نتیجه‌ی دلخواه می‌دهد. یک Cheat Sheet کوچک از Flexbox که کنار دستم داشتم نجاتم داد. از آن روز فهمیدم Cheat Sheet های CSS ابزار کار روزمره‌اند نه فایل‌های تزئینی. در این متن تجربه‌ی خودم از انتخاب و استفاده‌ی مؤثر از این Cheat Sheet ها را با شما در میان می‌گذارم.

چرا CSS به Cheat Sheet نیاز دارد؟

CSS یک زبان ساده در نگاه اول است اما در جزئیات پیچیده می‌شود. صدها property وجود دارد که بخش بزرگی از آن‌ها روزمره هستند و هر بار یک ترکیب خاص را باید از حافظه بیرون کشید. مثلاً تفاوت دقیق بین align-items و align-content در Flexbox حتی برای حرفه‌ای‌ها فراموش‌شدنی است. Cheat Sheet این بار را از حافظه برمی‌دارد.

دلیل دوم سرعت کار است. طراح وب روزانه ده‌ها بار به مستندات مراجعه می‌کند و اگر این مراجعه به‌صورت جست‌وجوی اینترنتی باشد هر بار چند دقیقه وقت و تمرکز از بین می‌رود. Cheat Sheet در همان پنجره‌ی کاری است و جریان کار را قطع نمی‌کند. اگر تازه با CSS آشنا شده‌اید راهنمای آموزش CSS از صفر نقطه‌ی شروع خوبی برای یادگیری اولیه است.

دلیل سوم تثبیت یادگیری است. وقتی یک Cheat Sheet شخصی می‌سازید ناخودآگاه آموخته‌هایتان را جمع‌بندی می‌کنید و همین جمع‌بندی به تثبیت دانش کمک می‌کند. CSS زبانی است که با مرور مکرر در حافظه‌ی بلندمدت می‌ماند و Cheat Sheet دقیقاً ابزار این مرور است.

CSS را نمی‌توان یک بار یاد گرفت و تمام؛ باید هر هفته مرور کرد و Cheat Sheet ابزار همین مرور است.

دسته‌بندی Cheat Sheet های CSS

در تجربه‌ی خودم Cheat Sheet های CSS را می‌توان به هفت دسته‌ی کاربردی تقسیم کرد. هر دسته برای نیاز خاصی طراحی شده و انتخاب درست بین آن‌ها بازدهی را چند برابر می‌کند.

  1. چیدمان: Flexbox و Grid که مهم‌ترین بخش CSS امروز است.
  2. تایپوگرافی و فونت: تنظیمات فونت خط فاصله و اندازه‌ها.
  3. انتخابگرها و شبه‌کلاس‌ها: انتخاب عناصر با شبه‌کلاس‌ها و شبه‌عنصرها.
  4. رنگ و پس‌زمینه: مدل‌های رنگی گرادیانت و پس‌زمینه.
  5. ریسپانسیو: مدیا کوئری و واحدهای نسبی.
  6. انیمیشن: transition و keyframes و transform.
  7. CSS مدرن: متغیرها container queries و ویژگی‌های تازه.

در نگاه اول ممکن است فکر کنید یک Cheat Sheet جامع کافی است اما در عمل هرکدام از این دسته‌ها کاربرد روزمره‌ی خودش را دارد. برای پروژه‌ای که روزانه با چیدمان سروکار دارد Cheat Sheet چیدمان مهم‌ترین است. برای پروژه‌ای که روی ظاهر کار می‌کند تایپوگرافی و رنگ. انتخاب هوشمندانه به پروژه‌ی شما بستگی دارد.

Cheat Sheet های Flexbox و Grid

در دو دهه‌ی گذشته چیدمان در CSS سخت‌ترین بخش یادگیری بوده. با آمدن Flexbox و Grid این سختی کاهش پیدا کرد اما همچنان ترکیب propertyها گیج‌کننده است. تفاوت align-items و align-content یا تفاوت justify-content در Grid و Flexbox فراموش‌شدنی‌ترین نکات CSS هستند.

Cheat Sheet های Flexbox و Grid معمولاً با دیاگرام‌های بصری همراه‌اند که هر ترکیب را نشان می‌دهند. این دیاگرام‌ها همان چیزی هستند که باعث می‌شوند یک Cheat Sheet از مستندات متن‌محور مفیدتر باشد. در تجربه‌ی خودم برای Flexbox یک Cheat Sheet یک‌صفحه‌ای با دیاگرام کافی است. برای Grid یک Cheat Sheet دو صفحه‌ای با ساختار grid-template کفایت می‌کند. اگر با این دو هنوز آشنا نیستید راهنمای کامل در CSS Flexible Box Layout و منابع تخصصی CSS در دسترس است.

نکته‌ی کاربردی: Cheat Sheet های Flexbox و Grid در قالب تصویر مفیدتر از متن هستند چون ذهن انسان چیدمان را بصری‌تر می‌فهمد. اگر می‌خواهید Cheat Sheet شخصی بسازید برای این دو بخش از دیاگرام استفاده کنید نه فهرست property.

Cheat Sheet تایپوگرافی و فونت

تایپوگرافی نیمی از کیفیت بصری سایت را می‌سازد اما اکثر طراحان آن را دست‌کم می‌گیرند. Cheat Sheet تایپوگرافی شامل تنظیمات اندازه‌ی فونت خط فاصله weight و ترکیب این‌ها با واحدهای نسبی است. در تجربه‌ی خودم مهم‌ترین بخش این Cheat Sheet ترکیب line-height و font-size است که روی خوانایی اثر مستقیم دارد.

برای سایت‌های فارسی Cheat Sheet تایپوگرافی باید تنظیمات RTL و فونت‌های فارسی را هم پوشش دهد. چیزی که در Cheat Sheet های انگلیسی وجود ندارد اما در پروژه‌های فارسی ضروری است. مسیر درست انتخاب فونت را در بهترین فونت‌های فارسی برای وب کدامند نوشته‌ام. اگر روی طراحی سایت فارسی کار می‌کنید این Cheat Sheet را باید شخصی‌سازی کنید.

Cheat Sheet انتخابگرها و شبه‌کلاس‌ها

انتخابگرها بخشی از CSS هستند که هر چند سال با ویژگی‌های جدید گسترده می‌شوند. Cheat Sheet انتخابگرها شامل انتخابگرهای پایه (:hover :focus :first-child) و انتخابگرهای پیشرفته‌تر (:nth-child :not :has) است. در تجربه‌ی خودم سه انتخابگر آخر بیشترین فراموش‌شدگی را دارند و بیشترین بازدهی را در Cheat Sheet دارند.

Cheat Sheet انتخابگرها برای پروژه‌هایی که روی استایل‌دهی دقیق کار می‌کنند ارزشمند است. مثلاً برای انتخاب فرزند دوم یک لیست یا پنهان کردن همه‌ی عناصر به‌جز یک مورد. این کاربردها روزمره هستند اما نحو دقیقشان فراموش‌شدنی است. توصیه‌ی من: یک Cheat Sheet اختصاصی از انتخابگرهای پیشرفته بسازید که با مثال‌های واقعی همراه باشد. مسیر کامل این حوزه در انتخابگرهای CSS آمده است.

Cheat Sheet مدیا کوئری و ریسپانسیو

طراحی ریسپانسیو نیازمند استفاده‌ی مکرر از مدیا کوئری است. Cheat Sheet خوب این حوزه باید سه چیز را پوشش دهد: عرض‌های شکست استاندارد نحو مدیا کوئری مدرن با range syntax و ترکیب با واحدهای نسبی مثل vw vh و clamp. در تجربه‌ی خودم اکثر توسعه‌دهندگان از مدیا کوئری‌های قدیمی استفاده می‌کنند در حالی که نحو مدرن ساده‌تر و خواناتر است.

علاوه بر مدیا کوئری Cheat Sheet ریسپانسیو باید واحدهای نسبی و تابع clamp را هم پوشش دهد. ترکیب این سه می‌تواند سایت را بدون شکست در همه‌ی عرض‌ها نگه دارد. مسیر کامل طراحی ریسپانسیو را در طراحی ریسپانسیو چیست و مدیا کوئری در طراحی ریسپانسیو نوشته‌ام.

Cheat Sheet CSS مدرن

CSS در ده سال گذشته سریع‌تر از هر زمان دیگری تحول یافته. ویژگی‌هایی که امروز استاندارد شده‌اند در Cheat Sheet های قدیمی وجود ندارند. سه ویژگی مدرن که Cheat Sheet امروز باید پوشش دهد: متغیرهای CSS (custom properties) تابع clamp برای تایپوگرافی سیال و container queries که در سال‌های اخیر به پشتیبانی مرورگرها اضافه شده‌اند.

در تجربه‌ی خودم متغیرهای CSS بیشترین بازدهی را در پروژه‌های متوسط و بزرگ دارند چون امکان نگهداری راحت‌تر پالت رنگ و اندازه‌ها را می‌دهند. Cheat Sheet مدرن که این سه ویژگی را پوشش دهد از یک Cheat Sheet جامع قدیمی مفیدتر است. مسیر کامل این حوزه را در متغیرهای CSS و واحدهای اندازه گیری CSS نوشته‌ام.

نکته‌ی مهم درباره Cheat Sheet های CSS مدرن: به‌روزرسانی مرتب ضروری است چون ویژگی‌های تازه اضافه می‌شوند و Cheat Sheet قدیمی می‌تواند گمراه‌کننده باشد. یک Cheat Sheet که سه سال به‌روز نشده باشد نه‌فقط ناقص است بلکه می‌تواند به روش‌های قدیمی سوق دهد.

Cheat Sheet CSS مدرن نه فقط property جدید که روش تفکر جدید را منتقل می‌کند؛ متغیرها و clamp فقط دو property نیستند یک سبک کار هستند.

Cheat Sheet RTL و سایت فارسی

برای سایت‌های فارسی Cheat Sheet عمومی CSS کافی نیست چون بخش RTL و تایپوگرافی فارسی نیازهای خاص خودش را دارد. سه نکته‌ی کلیدی که Cheat Sheet RTL باید پوشش دهد: تفاوت margin-left و margin-inline-start نحوه‌ی mirror کردن iconها و تنظیمات فونت برای متن‌های بلند فارسی.

در تجربه‌ی خودم Cheat Sheet RTL برای اکثر پروژه‌های فارسی مفیدتر از Cheat Sheet های عمومی است چون پروژه‌ها معمولاً در همان نقاط شکسته می‌شوند. مسیر اصولی آماده‌سازی قالب فارسی را در چگونه قالب وردپرس را برای زبان فارسی آماده کنیم نوشته‌ام. اگر روی طراحی سایت فارسی کار می‌کنید یک Cheat Sheet RTL شخصی یکی از ارزشمندترین فایل‌های کارتان خواهد بود.

معیارهای انتخاب Cheat Sheet معتبر

Cheat Sheet های CSS در اینترنت بسیار زیادند اما کیفیتشان متفاوت است. پنج معیار در تجربه‌ی خودم Cheat Sheet معتبر را از نامعتبر جدا می‌کند.

  1. به‌روز بودن: حداقل در یک سال گذشته به‌روز شده باشد چون CSS سریع تغییر می‌کند.
  2. پوشش Flexbox و Grid: بدون این دو Cheat Sheet امروز ناقص است.
  3. ساختار بصری: Cheat Sheet ای که با دیاگرام یا جدول باشد مفیدتر از فهرست ساده است.
  4. فشردگی واقعی: بین دو تا پنج صفحه. بیشتر از این دیگر Cheat Sheet نیست.
  5. مثال عملی: فقط اسم property کافی نیست یک خط مثال کاربرد را نشان می‌دهد.

این معیارها را می‌توانید روی هر Cheat Sheet ای اعمال کنید. اگر بیش از دو معیار را پاس نکرد انتخاب بعدی را جدی بگیرید. مسیر مشابه برای انتخاب منابع آموزشی را در بهترین کتاب های الکترونیکی طراحی وب هم نوشته‌ام.

ساخت Cheat Sheet شخصی

Cheat Sheet شخصی مفیدتر از Cheat Sheet عمومی است چون دقیقاً نیازهای شما را پوشش می‌دهد. در تجربه‌ی خودم ساخت آن چهار مرحله دارد.

  1. انتخاب ساختار پایه: یک Cheat Sheet عمومی معتبر را به‌عنوان ساختار انتخاب کنید. از صفر ساختن فقط وقت شما را می‌گیرد.
  2. حذف نکات بلد: propertyهایی که از حفظ هستید را حذف کنید. Cheat Sheet شخصی باید فقط نکات فراموش‌شدنی باشد.
  3. افزودن snippet شخصی: ترکیب propertyهایی که مکرراً استفاده می‌کنید را اضافه کنید. مثلاً یک ترکیب خاص برای مرکز کردن هم‌زمان عمودی و افقی.
  4. به‌روزرسانی هفتگی: هر هفته یک نگاه سریع و اضافه کردن نکات جدید. Cheat Sheet به‌روز بهتر از Cheat Sheet جامع است.

در تجربه‌ی خودم Cheat Sheet شخصی CSS در سه فرمت مفید است: یک فایل Markdown در پوشه‌ی پروژه یک سند در اپ یادداشت گوشی و یک فایل PDF چاپ‌شده کنار میز. تفاوت این سه در دسترسی است نه در محتوا. برای یک طراح وب که با وردپرس کار می‌کند Cheat Sheet شخصی CSS اغلب با snippetهای اختصاصی قالب پر می‌شود. مسیر مشابه در Cheat Sheet های وردپرس هم نوشته‌ام.

اشتباهات رایج در استفاده از Cheat Sheet CSS

  • استفاده از Cheat Sheet قدیمی: Cheat Sheet ای که پوشش Flexbox یا Grid ندارد امروز گمراه‌کننده است.
  • نداشتن Cheat Sheet شخصی: اتکا فقط به Cheat Sheet عمومی بازدهی کمتری دارد چون نکات شخصی پروژه‌های شما در آن نیست.
  • جمع کردن بیش از حد: دانلود بیست Cheat Sheet و استفاده نکردن از هیچ‌کدام. یک Cheat Sheet فعال بهتر از بیست Cheat Sheet آرشیوی است.
  • استفاده به‌عنوان جایگزین یادگیری: Cheat Sheet ابزار یادآوری است نه یادگیری اولیه. برای یادگیری پایه نیاز به منبع جامع دارید.
  • نادیده گرفتن RTL: برای پروژه‌های فارسی Cheat Sheet عمومی کافی نیست و نیاز به Cheat Sheet RTL اختصاصی دارید.

اشتباهات مشابه در استفاده از قالب را در اشتباهات رایج در استفاده از قالب آماده نوشته‌ام. برای مقایسه‌ی منابع طراحی هم نگاهی به PDF های آموزشی طراحی وب بیندازید.

پرسش‌های پرتکرار درباره Cheat Sheet های CSS

آیا Cheat Sheet CSS برای مبتدی‌ها هم مفید است؟

برای مبتدی‌ها به‌عنوان ابزار یادگیری اولیه نه اما به‌عنوان مرجع بعد از یادگیری بله. برای یادگیری اولیه یک منبع جامع مثل آموزش CSS از صفر را بخوانید و Cheat Sheet را کنار آن به‌عنوان یادآوری استفاده کنید.

کدام Cheat Sheet CSS بهترین است؟

بهترین Cheat Sheet آن است که با پروژه‌ی فعلی شما هماهنگ باشد. برای کار چیدمان یک Cheat Sheet Flexbox و Grid. برای تایپوگرافی یک Cheat Sheet تایپوگرافی. برای پروژه فارسی یک Cheat Sheet RTL. ترکیب چند Cheat Sheet تخصصی بهتر از یک Cheat Sheet جامع است.

آیا Cheat Sheet جایگزین مستندات MDN است؟

خیر. MDN مستندات رسمی و دقیق است برای یادگیری و مرجع دقیق. Cheat Sheet فقط یادآوری سریع است. برای پروژه‌های پیچیده باید به مستندات مراجعه کنید اما برای کار روزمره Cheat Sheet کافی است.

چطور Cheat Sheet شخصی CSS بسازم؟

با یک Cheat Sheet عمومی معتبر شروع کنید و آن را شخصی کنید. نکاتی که از حفظ هستید حذف کنید و snippetهای شخصی پروژه‌های خودتان را اضافه کنید. یک فایل Markdown در پوشه‌ی پروژه بهترین شروع است.

آیا Cheat Sheet CSS را باید چاپ کرد؟

اگر بیشتر وقت خود را روی دسکتاپ می‌گذرانید یک نسخه‌ی چاپی کنار میز مفید است چون دسترسی سریع‌تر از باز کردن فایل دارد. اگر بیشتر روی لپ‌تاپ یا موبایل کار می‌کنید نسخه‌ی دیجیتال کافی است. انتخاب به سبک کار شما بستگی دارد.

آیا Cheat Sheet های CSS برای سایت فارسی هم کاربرد دارند؟

بخشی از آن‌ها بله اما Cheat Sheet تایپوگرافی و RTL معمولاً باید شخصی‌سازی شوند چون بخش بزرگی از Cheat Sheet های انگلیسی این دو حوزه را پوشش نمی‌دهند. برای سایت فارسی یک Cheat Sheet RTL اختصاصی ارزش بالایی دارد.

چطور Cheat Sheet را به‌روز نگه دارم؟

یک عادت ماهانه بگذارید: هر ماه یک بار فایل را باز کنید و propertyهای جدیدی که یاد گرفتید اضافه کنید. نسخه‌ی CSS شما هم هر چند سال تغییر می‌کند و Cheat Sheet باید هم‌راستا با این تغییرات به‌روز شود.

Cheat Sheet و سرعت کار طراح

Cheat Sheet های CSS یک ابزار کوچک اما پرارزش در کار طراح و توسعه‌دهنده‌ی وب هستند. تفاوت یک توسعه‌دهنده‌ی حرفه‌ای با یک مبتدی اغلب در سرعت دسترسی به آموخته‌هاست و Cheat Sheet دقیقاً همین شکاف را پر می‌کند. یک فایل که با هر جست‌وجوی فراموش‌شده پر می‌شود بعد از یک سال به یک مرجع اختصاصی تبدیل می‌شود که در هیچ سایت یا کتاب دیگری پیدا نمی‌شود.

پیشنهاد عملی من: با یک Cheat Sheet عمومی معتبر از Flexbox و Grid شروع کنید و بعد آن را شخصی کنید. یک ماه بعد با Cheat Sheet تایپوگرافی و RTL ترکیبش کنید. این فایل کوچک در طول سال اول به یکی از پرارزش‌ترین ابزارهای کار شما تبدیل می‌شود. اگر تجربه‌ی جالبی از Cheat Sheet شخصی CSS دارید در دیدگاه‌ها به اشتراک بگذارید تا فهرست نکات کاربردی کامل‌تر شود. 🎨