CSS Naming Conventions (BEM, SMACSS, OOCSS)

در پروژه‌های کوچک شاید هر اسمی دلت بخواهد به کلاس‌های CSS بدهی و مشکلی پیش نیاید، اما در پروژه‌های بزرگ با هزاران خط کد و چندین نفر توسعه‌دهنده، بدون یک روش نام‌گذاری منظم، خیلی سریع همه چیز به هم می‌ریزد. Naming Convention یعنی یک قاعده مشخص برای نام‌گذاری کلاس‌ها که کد را خواناتر، قابل پیش‌بینی‌تر و ماژولار می‌کند. مثلاً در روش BEM، هر المان به‌صورت Block__Element–Modifier نام‌گذاری می‌شود (مثل .card__title--large) که کمک می‌کند بفهمی هر کلاس مربوط به کدام بخش و حالت است. SMACSS و OOCSS هم روش‌های معماری و نام‌گذاری هستند که تلاش می‌کنند CSS را ماژولار، مقیاس‌پذیر و قابل استفاده مجدد کنند. استفاده از این روش‌ها باعث می‌شود در تیم‌های چندنفره، همه به‌راحتی کد یکدیگر را درک کنند و تغییر دهند.

CSS Preprocessors: Sass

Sass یکی از محبوب‌ترین CSS Preprocessorها است که نوشتن CSS را قدرتمندتر و راحت‌تر می‌کند. Sass به تو اجازه می‌دهد از متغیرها، تو در تو نویسی (nesting)، توابع، mixin و import استفاده کنی. مثلاً می‌توانی رنگ اصلی سایت را در یک متغیر ذخیره کنی و در تمام فایل‌ها استفاده کنی. اگر بعداً رنگ برند عوض شد، کافی است یک خط را تغییر دهی. Sass به‌صورت فایل‌های .scss نوشته می‌شود و در نهایت به CSS خام کامپایل می‌شود که مرورگر بتواند آن را بخواند. همین موضوع باعث می‌شود کدهایت هم خواناتر باشند و هم سریع‌تر توسعه پیدا کنند. در پروژه‌های بزرگ، Sass کمک بزرگی است برای ماژولار کردن کدها و جلوگیری از تکرار.

CSS Preprocessors: Less

Less هم مثل Sass یک Preprocessor است که نوشتن CSS را ساده‌تر و قدرتمندتر می‌کند. با Less می‌توانی متغیر بسازی، تو در تو کدنویسی کنی، mixin بسازی و حتی محاسبات ریاضی انجام دهی. Syntax آن ساده‌تر از Sass است و بیشتر شبیه CSS عادی است. Less ابتدا در جامعه JavaScript محبوب شد چون به‌راحتی با Node.js کار می‌کرد. استفاده از Less باعث می‌شود در پروژه‌های بزرگ بتوانی کدها را بخش‌بخش کنی و نگهداری آن‌ها ساده‌تر باشد. هرچند امروزه Sass محبوب‌تر شده است، ولی هنوز Less در پروژه‌های قدیمی یا سیستم‌هایی مثل Bootstrap 3 کاربرد زیادی دارد. استفاده از Less می‌تواند یک گام حرفه‌ای برای کدنویسی ساخت‌یافته‌تر باشد.

CSS Architecture

وقتی پروژه تو کوچک است، شاید نوشتن همه استایل‌ها در یک فایل مشکلی ایجاد نکند. اما در پروژه‌های بزرگ، داشتن CSS Architecture (معماری CSS) حیاتی است. معماری CSS یعنی کدهایت را طوری سازمان‌دهی کنی که ماژولار، خوانا و قابل توسعه باشد. روش‌هایی مثل OOCSS، SMACSS یا ITCSS پیشنهاد می‌کنند که کدها را در دسته‌های مشخص مثل Layout، Components، Utilities و Theme تقسیم کنی. این کار باعث می‌شود کدهایت در پروژه‌های بزرگ کمتر به هم وابسته شوند و تغییر در یک بخش، بقیه بخش‌ها را به‌هم نریزد. معماری CSS کمک می‌کند با تیم‌های بزرگ‌تر راحت‌تر کار کنی، پروژه‌ها سریع‌تر توسعه پیدا کنند و نگهداری آن‌ها ساده‌تر باشد. به‌طور خلاصه: معماری CSS یعنی فکر کردن به آینده!

Cross-browser Compatibility

یکی از چالش‌های بزرگ هر طراح وب، Cross-browser Compatibility است. یعنی مطمئن شوی سایت تو در همه مرورگرها (مثل Chrome، Firefox، Safari و حتی Edge) به‌درستی نمایش داده می‌شود. برخی ویژگی‌های CSS در همه مرورگرها یکسان پشتیبانی نمی‌شوند یا ممکن است نیاز به Prefix داشته باشند. مثلاً برای استفاده از user-select، گاهی باید بنویسی:

.user-select {
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

برای اینکه بفهمی یک ویژگی در کدام مرورگرها پشتیبانی می‌شود، می‌توانی از سایت‌هایی مثل Can I Use کمک بگیری. همچنین باید حتماً سایت را در چند مرورگر تست کنی. Cross-browser Compatibility بسیار مهم است چون نمی‌توانی مطمئن باشی همه کاربران تو از یک مرورگر استفاده می‌کنند. اگر سازگاری را رعایت نکنی، کاربران ممکن است سایتت را با ظاهری خراب ببینند و از دست بدهی!

Autoprefixer

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

.user-select {
  user-select: none;
}

Autoprefixer آن را تبدیل می‌کند به:

.user-select {
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

این ابزار کمک می‌کند:

  • کدت کوتاه‌تر و تمیزتر باشد
  • سازگاری مرورگرها را فراموش نکنی
  • سریع‌تر کد بنویسی

Autoprefixer معمولاً با ابزارهایی مثل PostCSS، Webpack یا Gulp استفاده می‌شود. نتیجه این است که نیازی نیست دائم درگیر این باشی که هر ویژگی CSS در کدام مرورگر پشتیبانی می‌شود.

PostCSS

PostCSS یکی از حرفه‌ای‌ترین ابزارهای دنیای CSS است. برخلاف Sass یا Less که فقط یک Preprocessor هستند، PostCSS یک پلتفرم قدرتمند است که با کمک پلاگین‌ها هر کاری می‌تواند انجام دهد:

  • اضافه کردن Prefixها (مثل Autoprefixer)
  • Minify کردن CSS
  • تبدیل ویژگی‌های CSS آینده (Future CSS) به CSS فعلی که مرورگرها بفهمند
  • چک کردن کدهای CSS برای خطاهای احتمالی

PostCSS بسیار سریع و منعطف است و به‌خصوص در پروژه‌های بزرگ استفاده می‌شود. مثلاً می‌توانی با PostCSS کاری کنی که به‌صورت خودکار Grid Gap را برای مرورگرهای قدیمی‌تر شبیه‌سازی کند. اگر می‌خواهی وارد دنیای حرفه‌ای CSS شوی، یادگیری PostCSS یکی از قدم‌های مهم است.