BEM concept

روشی برای نام گذاری کلاس ها در css

خب این بار میخام راجع به مفهومی به اسم BEM حرف بزنم.

تعریف BEM:
مخفف ‌Block, Element, Modifier . ی روشه که به ما یاد میده چطوری کلاس بندی کنیم و چه اسمی روی کلاس هامون بزاریم. فایده اش اینه که خیلی راحتتر میتونیم UI (رابط کاربری) رو به قسمت های مستقل از هم تقسیم کنیم اینجوری دولوپ کردن رابط کاربری بزرگ و پیچیده هم آسونتر میشه، استانداردتر کد نوشتیم و همچنین کد شما خوانا تر و قابل فهم تر برای دولوپرهای دیگه هست.
حالا این ‌Block, Element, Modifier اجزای تشکیل دهنده اسم کلاسمونه.

<div class="block-name__element-name--modifier-name"></div>

الان ی مثال میزنم و کدشو به کمک این روش مینویسیم.

• اول باید تشخیص بدیم Block یا Block ها کدومان. بلاک یعنی المنت مادر و تعریف کننده اون المنت هست ( دکمه هست یا پاراگراف). نکته ای که باید بدونیم اینه که بلاک ها میتونن توی هم باشن (nested).مدل نوشتن:

<div class="block-name"></div>

اینجا ۳ تا بلاک داریم(البته که میشه کلش رو ی بلاک در نظر گرفت ولی فعلن بیخیال میشم).

<div class=&quottime&quot></div>
<div class=&quotplace&quot></div>
<div class=&quotbtn&quot></div>

• دوم المنت هامون رو مشخص میکینم. المنت یعنی بچه. به بلاک وابستگی داره و نشون دهنده هدف بلاکی هست که توش قرار داره و با دو تا underscore شروع میشه. مدل نوشتن المنت:

<div class="block-name__element-name"></div>

<div class=&quottime&quot>
<div class=&quottime__date&quot>20</div>
<div class=&quottime__day-time&quot>
<div class=&quottime__day-time&quot>Mon</div>
<div class=&quottime__day-time&quot>Nov</div>
</div>
</div>

• در آخر نوبت مشخص کردن modifier هست. همینجور که از اسمش مشخصه کارش مدیفای کردنه المنت هست. مثلن متن ما بزرگه یا کوچیک قرمزه یا سبز. با دو تا hyphen شروع میشه. مدل نوشتن:

<div class="block-name__element-name--modifier-name"></div>

<div class=&quottime&quot>
<div class=&quottime__date time__date--big&quot>20</div>
<div class=&quottime__day-time&quot>
<div class=&quottime__day-time--small time__day-time--grey&quot>Mon</div>
<div class=&quottime__day-time--small&quot>Nov</div>
</div>
</div>

شاید اولش براتون سخت باشه و بگید این که کد ما رو طولانی تر کرد! اما کم کم متوجه موهبت های زیادی که بهتون میده میشید :) خلاصه چیز خوبیه که این همه دارن میگن :D

اینم از کد کامل شدس:

<div class=&quotrow&quot>
<div class=&quotcol-2&quot>
<div class=&quottime&quot>
<div class=&quottime__date time__date--big&quot>20</div>
<div class=&quottime__day-time&quot>
<div class=&quottime__day-time--small time__day-time--grey&quot>Mon</div>
<div class=&quottime__day-time--small&quot>Nov</div>
</div>
</div>
</div>
<div class=&quotcol-6&quot>
<div class=&quotplace&quot>
<h4>Mi Pan Zoo Zoo zoo Mi Pan Yum yum /</h4>
<span class=&quotplace--thin-text&quot>Kerman</span>
</div>
</div>
<div class=&quotcol-2&quot>
<button class=&quotbtn btn--big btn--red&quot>Book</button>
</div>
<div class=&quotcol-2&quot>
<button class=&quotbtn btn--big btn--white&quot>Register</button>
</div>
</div>

//Styles
.time {
display: flex;
&__date {
font-size: 3rem;
}
&__day-time {
padding: 0.7rem;
&--grey {
color: $color-grey-dark-2;
}
}
}
.place {
padding-top: 1rem;
& h4 {
display: inline;
}
}
.btn {
&--big {
padding: 1rem 3rem;
border-radius: 8px;
}
&--red {
background-color: #c84869;
border: 1px solid $color-grey-dark-2;
float: right;
color: $color-white;
}
&--white {
border: 1px solid #c84869;
color: #c84869;
}
}