BEM concept

Elham kiyani — Fri, 02 Oct 2020 18:06:05 +0330

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

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

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

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

Mon

Nov

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

Mon

Nov

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

Mon

Nov

Mi Pan Zoo Zoo zoo Mi Pan Yum yum /

Kerman

//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; } }

کلاس های reusable در css

Elham kiyani — Fri, 28 Aug 2020 20:40:33 +0430

خب این اولین پست من توی ویرگوله کم و کاستی هاشو به بزرگی خودتون ببخشید.این موضوع حتمن برای خیلیاتون ساده است ولی کاربردیه و میبینم که خیلی ها این کارو انجام نمیدن.( تو این مقاله نمیخوام حرفی راجع به فریم ورک ها و ابزار ها بزنم pure css! )کمتر بنویسیم بیشتر بهره ببریمهمه وبسایت هایی که میبینیم از المنت هایی تشکیل شدن مثل دکمه عنوان پاراگراف و …وقتی ی طرح از ظاهر وبسایت بهم میدن اولین بار که نگاهش میکنم به این فکر میکنم که چطوری باید جداشون کنم چند تا کامپوننت باید داشته باشم grid من به چه شکل باید باشه و …هر چی میرم جلو تعداد المنت ها و کلاس ها بیشتر میشه و ممکنه یادم نیاد که فلان دکمه چه اندازه ای دادم فونت سایزش چی بود... هی باید توی فایل هام دنبال استایل هایی که قبلن نوشتم بگردم!حیرووون شدم!حالا برگردیم به عقب بیایید همونجا که داشتیم grid ها رو تشخیص میدادیم ی کار دیگه هم کنیم. هر چیزی که قراره زیاد تکرار بشه رو جدا کنیم مثلن همون دکمه ها…. بالاخره هر وبسایتی ی الگو خاص داره دیگهخب حالا هر چی دارید رو بریزید رو میز. دسته بندیشون کنید و مثل ی کامپوننت باهاشون رفتار کنید.مثلنخب حالا این استایل ها رو تو ی فایل جداگونه ذخیره کنید و بعدش توی فایل اصلی style.css import کنید و هر جا خواستید استفاده کنید کافیه به المنتتون اسم کلاس رو بدید. تامااامچطوره برای حالت ریسپانسیوش هم کد بنویسیم ؟(من حال نداشتم بنویسم خودتون بنویسید)خیلی بهتر شد :)حالا همین کارو میتونیم برای همه تگ های h1, h2,.... لینک ها اینپوت ها و هر چی که داریم انجام بدیمدر واقع این روش همون کاریه که Bootstrap داره انجام میده. اینجوری کد کمتری نوشتیم استایلامون با هم همخوانی داره و از همه مهمتر فردا پس فردا خواستیم عوضشون کنیم اشکمون در نمیاد :D

نوشته های Elham kiyani

BEM concept

Mi Pan Zoo Zoo zoo Mi Pan Yum yum /

کلاس های reusable در css