اگر اهل ادیتورهای مدرن امروزی باشید حتما با Emmet آشنا هستید. ابزاری برای ساده‌سازی فرآیند کدنویسی که به شما اجازه می‌دهد با نوشتنul>li.item$*5 و زدن دکمه‌ی تب آن را تبدیل به کد زیر کنید:

Emmet دستورها و کدهای کوتاه‌شده‌ی زیادی دارد که در مستندات سایت آن می‌توانید مشاهده کنید. خودم خیلی به استفاده از emmet و گرامر اون عادت کردم. یعنی از tar برای نوشتن text-align: right استفاده می‌کنم و از fl برای نوشتن float: left.

ساختار CSSHelpers

گاهی اوقات نیازهای شما از CSS محدود به همین دستورات ساده‌ست، یعنی زمانی که می‌خواهید جهت نوشتن یک المان را عوض کنید. به جای دادن کلاس یا ID و مشخص کردن ویژگی در فایل Style خود می‌توانید از این کلاس‌های کمکی استفاده کنید. مثلا به کد زیر دقت کنید:

در CSSHelpers، مقداری margin-top را برابر ۱۰، مقدار margin-bottom را برابر ۳۰، مقدار text-align را right و display را inline-block قرار دادیم. درنامگذاری تلاش شده هم قوانین Emmet رعایت شود و هم خوانایی بالایی داشته باشد. ساختار نامگذاری CSSHelpers به این شکل است که هر کلاس  از ۲ بخش تشکیل شده: نام خاصیت و مقدار آن که توسط یک خط dash از هم جدا شده‌اند.

پروژه‌ی CSSHelpers با Sass و به کمک Gulp.js نوشته شده است. فایل‌های این پروژه کوچک را می‌توانید در گیت‌هاب من بیابید. همچنین سورس فایل‌ها نیز قرار داده شده تا بتوانید به خواست خود تغییرش دهید یا کلاس‌های جدیدی اضافه کنید. بزودی راهنمای کامل کلاس‌ها رو آماده می‌کنم تا به لیست کاملشون دسترسی داشته باشین. هر نظر یا پیشنهادی هم دارین لطف می‌کنید بگین تا به یک مجموعه کلاس کمکی عالی برسیم. من خودم همیشه یه فایل Helpers در فایل‌های پروژه‌ی Sass دارم تا کمک حالم در انجام پروژه باشه و حالا می‌تونیم با هم از این امکان استفاده کنیم.