سیستم های نامگذاری CSS

من یک توسعه دهنده فرانت اند تازه کارم که شدیدا به یادگیری در این زمینه علاقه مندم و میخوام یکی از مشکلاتی که باهاش درگیر هستم رو حل کنم .

مشکل من نام گذاری کلاس های CSS هست ،من گاهی به کلاسی نیاز دارم که توی بخش های مختلف ازش استفاده کنم ولی نام گذاری اشتباه باعث میشه من کلاس های اضافی زیادی داشته باشم ، گاهی وقتی به پروژه قبلی برمیگردم بین کلاس ها گم میشم و واقعا نمیدونم چی به چیه یا اینکه نگرانم اگر این کلاس رو تغییر بدم توی بخش های دیگه تغییری رخ نده.

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

سه راه حل که تاکنون برای حل این مشکلات بوجود آمده اند در زیر آمده:

1. OOCSS ==> object oreinted CSS

2. SMACSS ==> scables and madular architecture for CSS

3. BEM ==> block element modifier

تقریبا میتوان گفت که درحال حاضر جامع ترین و بهترین روش برای من BEM است پس بریم ببینیم این روش چیه ...

‌BEM:

همونطور که در تصویر میبینید کل بدن آدمک یک Block است که در صفحاتی که ما توسعه میدهیم میشود گفت همان component است ،به دست و پا و بقیه اجزا که زیر مجموعه بدن هستند Elementمیگوییم که همان اجزای تشکیل دهنده ی component هستند و در نهایت Modifier که برای بیان ویژگی ها و توصیف بکار میرود.

بزارید یک مثال واضح بزنم این تصویر رو ببینید

دراین تصویر component اصلی ما card هست که از اجزای دیگه ای که به اون ها element میگیم تشکیل شده و حالت دکمه های پایین که میتونن دکمه های back و successباشن و تغییراتی مثل رنگ واندازه وفونت دارن که میشه modifier .

صبرکنین میدونم هنوز متوجه داستان نشدین و میخوام بهتون بگم چطور کلاس های همین مثال رو بنویسید.

به طور کلی ساختار کلاس ها در روش BEM به اینصورته:

Block__Element--Modifier

ابتدا نام Block سپس دوتا underscore سپس نام Element و بعد از آن دوتا dash و در انتها Modifier .

حالا شروع میکنیم به نوشتن نام برای کلاس های مثال بالا:

خب component اصلی ما اسمش چیه؟

card

میریم سراغ Element ها :

card__image

card__description

card__button

و در انتها Modifier:

card__button--success

card__button--back

درضمن درکنار استفاده از BEM اگر از Sass استفاده کنین بسیار کار خودتون رو راحت تر میکنید.

همچنین اگر دراستفاده از BEM دوبار یا بیشتر از __ استفاده کردید بدونید دارید اشتباه میکنید ینی اگر Element های تودرتو داشتید اون هارو زنجیر وار بهم دیگه متصل نکنید و فقط Element مورد نظر رو به بالاترین والد یا همون Block اصلی وصل کنید.

خب BEM همین بود اما من پیشنهاد میکنم برای مدیریت بهتر style هاتون در پروژه تمام کلاس هاتون در یک فایل Sass ننویسید بلکه برای هر component یک فایل Sass ایجاد کنید تا پروژه تمیز تری داشته باشین و بین کدها و کلاس ها گم نشین .

اگر این مقاله به شما کمک کرد درانتشار آن کوتاهی نکنید.

شیوا توکل | 27 بهمن 98