نام‌گذاری اصولی کلاس‌ها در CSS با متد BEM

خیلی از توسعه‌دهندگان وب حس بدی نسبت به CSS دارند. هرچقدر که بیشتر کد CSS بنویسید، به مرور زمان در نگهداری و توسعه آن کد بیشتر دچار مشکل می‌شوید. مخصوصا اگر در نام‌گذاری کلاس‌ها در CSS بی‌دقت و بدون اصول پیش بروید.

شاید برای شما پیش آمده که بعد از مدتی به سراغ ۵ یا ۱۰ هزار خط کد CSS خود می‌روید اما هیچ برداشتی از کدهای خودتان نمی‌توانید بکنید! شاید با خود فکر کنید که CSS زبان جذاب و زیبایی نیست اما در نظر داشته باشید این زبان بیشتر از ۲۰ سال است که جنبه ظاهری وب‌سایت‌ها را تامین می‌کند.

در این مقاله به چند نکته اساسی در مورد اصول نام‌گذاری در CSS می‌پردازیم.

استفاده از خط تیره در نام‌گذاری

اگر به زبان جاوااسکریپت کدنویسی کرده باشید حتما با قطعه کد زیر آشنایی دارید.

var modalWrapper = document.getElementById('...')

در جاوااسکریپت بهتر است که برای متغیرهایی که بیشتر از یک کلمه هستند از نام‌گذاری camel case استفاده کنیم اما در CSS بهتر است دو کلمه را با خط تیره از هم جدا کنیم.

از نام‌گذاری camel case در CSS استفاده نکنید.

.modalWrapper{
    padding: 5px 10px;
}

بهتر است با خط تیره ۲ کلمه را جدا کنید.

.modal-wrapper{
    padding: 5px 10px;
}

استفاده از این شیوه به خوانایی بهتر کد CSS شما کمک می‌کند.

همچنین استفاده از این شیوه شباهت زیادی به استفاده از ویژگی‌های CSS دارد.

// Correct
.some-class {
   font-weight: 2em;
}
 
// Wrong
.some-class {
   fontWeight: 2em;
}

اصول نام‌گذاری BEM چیست؟

تیم‌های مختلف نرم‌افزاری، اصول متفاوتی را برای نام‌گذاری CSS در نظر می‌گیرند. بعضی از تیم‌ها از خط تیره استفاده می‌کنند. این در حالی است که تیم‌های دیگر از روش دقیق‌تر و اصولی‌تری به نام BEM استفاده می‌کنند.

در حالت کلی این اصول نام‌گذاری ۳ معضل را حل می‌کند:

این‌که با دیدن نام هر selector بدانیم که چه کار می‌کند.
این که بتوانیم با دیدن نام هر selector حدس بزنیم در کجا استفاده می‌شود.
این که با دیدن نام کلاس‌ها بتوانیم به رابطه‌ی بین آن‌ها دست یابیم.

کدهای زیر نمونه‌ای از اصول نام‌گذاری BEM هستند.

.nav--secondary {
  ...
}
.nav__header {
  ...
}

BEM به زبان خیلی ساده

وظیفه ابتدایی BEM تقسیم کردن رابط کاربری به اجزای کوچکتر و قابل استفاده است. توصیه می‌کنم حتما مقاله آشنایی با طراحی اتمی را مطالعه کنید.

تصویر زیر را در نظر بگیرید.

تصور کنیم این آدمک حکم یک بلوک از طراحی را دارد. همان‌طور که حدس زدید حرف اول BEM از Block گرفته شده است. در واقعیت یک بلوک از کد می‌تواند هدر، فوتر، منوی سایت و یا هر قسمت دیگر باشد.

با این شرایط نام مناسب برای کلاس آدمک stick-man است.

.stick-man{

}

عناصر در BEM

حرف دوم در BEM از Element(عنصر) گرفته شده است. بلوک‌ها از عناصر مختلفی تشکیل می‌شوند و هر کدام از این عناصر می‌توانند نام مخصوص به خود را داشته باشند. برای مثال کامپوننت یا همان بلوک آدمک از ۳ عنصر سر، دست و پا تشکیل شده است.

طبق اصول نام‌گذاری BEM باید عناصر را با دو “_” از نام بلوک جدا می‌کنیم.

.stick-man__head {

}
.stick-man__arms {

}
.stick-man__feet {

}

حالات مختلف یک کامپوننت در BEM

اگر یکی از آدمک‌های ما آبی و دیگری قرمز باشد چطور این تفاوت رنگ را نام‌گذاری کنیم؟ حرف آخر در BEM از کلمه‌ی “Modifier” گرفته می‌شود و برای بیان حالات مختلف یک کامپوننت استفاده می‌شود.

مثال واقعی‌تر این مورد در طراحی می‌تواند منوی ثابت(fixed) و منوی متحرک باشد. رنگ آبی و قرمز در واقع اصلاحاتی هستند که بنا به شرایط خاص بر روی کامپوننت اعمال می‌شوند. برای بیان این حالات طبق اصول BEM باید از ۲ خط تیره در کنار هم استفاده کنیم.

.stick-man--blue {

}
.stick-man--red {

}

همیشه شرایط به گونه‌ای نیست که فقط کامپوننت‌ها با هم تفاوت حالت داشته باشند(کد فوق) و در بعضی مواقع عناصر کامپوننت هستند که با هم تفاوت دارند. برای مثال اگر قسمت سر آدمک حالات مختلف داشته باشد چگونه نام‌گذاری کنیم؟

این بار عنصر داخلی یک کامپوننت تغییر حالت داده شد و این عنصر جزئی از کل بلوک است. نام .stick-man نماینده کل بلوک و stick-man__head. نماینده عنصر سر در این بلوک است. در نتیجه برای بیان حالات مختلف در عنصر سر می‌توان به شکل زیر نام‌گذاری را انجام داد.

.stick-man__head--small {

}
.stick-man__head--big {

}

برای پروژه‌های کوچک می‌توانید از همان روش اول استفاده کنید و برای پروژه‌های بزرگتر و یا پروژه‌های تیمی از روش BEM استفاده کنید.

اصول نام‌گذاری متغیرها را در BEM توضیح دادیم و در زیر به بیان ۲ نکته مهم دیگر در شیوه نام‌گذاری در CSS می‌پردازیم.

نام‌گذاری CSS برای جاوااسکریپت

تصور کنید قطعه کد HTML به شکل زیر نوشته‌اید:

<div class="siteNavigation">

</div>

بعد از آشنایی با اصول نام‌گذاری در CSS تصمیم به تغییر این کد به شکل زیر کردید.

<div class="site-navigation">

</div>

شاید این تغییر در نگاه اول بدون هیچ مشکلی به نظر برسد اما اگر قطعه کد جاوااسکریپت زیر در پروژه وجود داشته باشد، از آن‌جایی که متغیر nav بر اساس کلاس siteNavigation تعریف می‌شود، با تغییر نام آن کلاس به site-navigation، کد جاوااسکریپت ما دچار خطا می‌شود.

const nav = document.querySelector('.siteNavigation')

برای جلوگیری از بروز این‌گونه خطاها توصیه می‌شود نام کلاس عناصری که قرار است به طور مستقیم در جاوااسکریپت هم استفاده شوند با پیشوند -js شروع شوند. در این حالت می‌توانید به راحتی تشخیص دهید که تغییر نام یک کلاس به کد جاوااسکریپت شما صدمه‌ای می‌زند یا خیر.

<div class="site-navigation js-site-navigation">

</div>

سپس از نام کلاس به شکل زیر استفاده می‌کنید.

const nav = document.querySelector('.js-site-navigation')

در این حالت با مشاهده نام کلاس js-site-navigation تشخیص می‌دهید که این عنصر در DOM با کد جاوااسکریپت ارتباط مستقیم دارد.

نوشتن توضیحات در میان کدها

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

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