https://virgool.io/feed/@AliKooshesh fa 2026-06-10 14:09:28 https://files.virgool.io/upload/users/993985/avatar/0GWz0d.png?height=120&width=120 https://virgool.io/@AliKooshesh https://virgool.io/@AliKooshesh/%D9%86%D8%A7%D9%85-%DA%AF%D8%B0%D8%A7%D8%B1%DB%8C-%DA%A9%D9%84%D8%A7%D8%B3-%D9%87%D8%A7-%D8%AF%D8%B1-css-%D8%A8%D8%A7-%D9%85%D8%AA%D9%88%D8%AF%D9%88%D9%84%D9%88%DA%98%DB%8C-bem-mjyr0fkv1gaa اصل ماجرا از اونجایی شروع شد که این هفته برای بوتکمپ فرانت‌اند، میخواستم مبحث نام‌گذاری کلاس‌ها در CSS با متدولوژی BEM رو تدریس کنم، طبق معمول با چالش‌های همیشگی زیرساختی و قطعی اینترنت مواجه شدیم. همین موضوع باعث می شد بچه‌ها نتونن به داکیومنت‌های اصلی دسترسی داشته باشن.در انتها تصمیم گرفتم یه توضیح مختصر و شسته رفته از BEM، اینجا بگذارم. چیزی که خیلی‌ها رو توی پروژه‌های بزرگ اذیت می‌کنه، سردرگم شدن لایِ انبوهی از کلاس‌های بی‌نام‌ونشان مثل text-1 یا inner-box هست که بعد از دو هفته، خودِ نویسنده هم یادش نمی‌ره چی به چیه!خلاصه به فکر افتادم که چکیده‌ی این مفهوم رو با زبون ساده بنویسم تا هم مشکل دانشجوها حل بشه و هم اگه شما توی پروژه‌هاتون با غولِ نام‌گذاری دست‌وپنج نرم می‌کنید، یه راه نجات داشته باشید.البته احتمالا الان خیلی‌ها می‌گن: «بابا کی حال داره این‌همه اسم طولانی بنویسه؟» حرفتون قبول، ولی از قدیم گفتن: جنگِ اول به از صلحِ آخر؛ الان کمی بیشتر تایپ می‌کنید ولی موقع دیباگ کردن، دعا به جونِ BEM می‌کنید.BEM اصلاً چی هست؟این کلمه مخفف Block - Element - Modifier هست. هدفش هم خیلی ساده‌ست: ایجاد یک رابطه‌ی منطقی بین HTML و CSS.۱. بلوک (Block)بلوک همون موجودیت مستقل ماست. مثلاً یک «منو» یا یک «دکمه».CSS/* مثال */ .menu { ... } .btn { ... } .nav { ... } ۲. المان (Element)المان بخشی از اون بلوک هست که به تنهایی معنای خاصی نداره و وابسته به بلوک مادرشه. برای جدا کردنش از اسم بلوک، از دو تا آندرلاین (__) استفاده می‌کنیم. مثلاً اگر توی دکمه‌مون یک آیکون داریم:CSS.btn__icon { ... } .nav__item { ... } یه راه ساده برای اینکه گیج نشید اینه: اگر اون بخش رو از توی بلوک بردارید و بیرون بذارید و دیگه معنا یا عملکردش مثل قبل نباشه، اون قطعاً یه المان هست.۳. اصلاح‌کننده (Modifier)حالا فرض کنید همون دکمه رو می‌خواید توی یه جای دیگه قرمز یا بزرگ‌تر نمایش بدید. به جای اینکه یه کلاس جدید بسازید، از مودیفایر استفاده می‌کنید. نشانه‌اش هم دو تا خط تیره (--) هست.CSS.btn--red { ... } .btn--large { ... } یا حتی ممکنه یک المان داخل بلوک به دو حالت مختلف نمایش داده بشه :CSS.card__icon--small { ... } .card__icon--large { ... } اجازه بدید یه مثال کامل بزنم:فرض کنید یه کارت برای معرفی محصول داریم. ساختار استاندارد BEM به این شکل می‌شه:HTML<div class="card"> <img class="card__image" src="..." /> <h2 class="card__title">نام محصول</h2> <button class="card__button card__button--success">خرید</button> </div> دقت کنید که توی دکمه، من هم کلاس اصلی بلوک رو آوردم و هم مودیفایر رو. این کار باعث می‌شه استایل‌های پایه حفظ بشن و فقط تغییرات (مثلاً رنگ سبز) اعمال بشه.در انتهای کار، شاید اولش براتون سخت باشه که عادت کنید به جای title بنویسید card__title؛ ولی وقتی پروژه‌تون بزرگ شد و خواستید یه تغییر کوچیک بدید و کل سایت نریخت پایین، متوجه ارزشش می‌شید.امیدوارم این چند پاراگراف براتون کاربردی بوده باشه و توی پروژه‌های بعدی ازش استفاده کنید. علی کوشش علی کوشش Sat, 09 May 2026 15:10:37 +0330 https://virgool.io/@AliKooshesh/%D8%B4%D8%AE%D8%B5%DB%8C-%D8%B3%D8%A7%D8%B2%DB%8C-%DA%A9%D8%A7%D8%B1%D8%A7%DA%A9%D8%AA%D8%B1-%DA%A9%D9%84%DB%8C%D8%AF-%D9%87%D8%A7%DB%8C-%DA%A9%DB%8C%D8%A8%D9%88%D8%B1%D8%AF-%D8%AF%D8%B1-%D9%84%DB%8C%D9%86%D9%88%DA%A9%D8%B3-degdd68qspvr persian keyboard layoutاصل ماجرا از اونجایی شروع شد که هفته ی پیش بنا به دلایلی مجبور شدم بعد از گذشت 4 سال دوباره کالی لینوکس رو نصب کنم .به هر حال طی همین مدت کوتاه جذابیتش باعث شد کاملا از ویندوز به لینوکس مهاجرت کنم ولی چیزی که خیلی اذیتم می کرد تفاوت محل کاراکتر های کیبورد فارسی استاندارد با کیبورد فارسی پیش فرض ویندوز بود .مثلا تقریبا توی هر خطی که تایپ میکردم مجبور میشدم دو بار «\» رو پاک کنم و «پ» رو جایگزینش کنم .خلاصه به فکر افتادم که کاملا کیبوردم رو شخصی سازی کنم . شیوه این کار رو هم اینجا قرار میدم تا شاید بتونم مشکل احتمالی دیگران رو هم حل کنم .البته احتمالا الان خیلی ها میگن تایپ با کیبورد فارسی استاندارد راحت تر و سریع تر هست ... حرفتون قبول ولی از قدیم گفتن : ترک عادت موجب مرض استخب قبل از هر چیزی باید به آدرس زیر وارد بشید/usr/share/x11/xkb/symbols/irحالا فایل ir رو پیدا کنید و با یه ادیتور متن بازش کنید ( دقت کنید که برای ویرایشش باید دسترسی sudo داشته باشید )sudo gedit irحالا با یکسری کد C مواجه میشید که شامل کاراکتر مخصوص به هر کلید هستو صد البته اگر مثل من هیچ شناختی نسبت بهش نداشته باشید احتمالا حسابی گیجتون می کنهیه راه ساده برای فرار کردن از این گیج شدن اینه که فایل us رو هم باز کنید تا بتونید با استفاده از حروف انگلیسی که روی کلید هاش تنظیم شدن محل هر کلید و کد اون رو متوجه بشید و بعد همون کلید رو در فایل ir برای زبان فارسی شخصی سازی کنید :)اجازه بدید یه مثال بزنم :مثلا من میخوام حرف «پ» از محل فعلیش که کلید M هست به کلید Backslash منتقل بشهپس اول میرم توی فایل us و خط مربوط به کلید M رو پیدا میکنم key <AB07> { [ m, M ] };و همینطور خط مربوط به کلید Backslash هم پیدا میکنم :key <BKSL> { [ backslash, bar ] };حالا که متوجه شدم این کلیدها با "AB07" و "BKSL" مشخص میشن فایل ir رو باز میکنم و همین کلیدها رو پیدا میکنم و مقادیر کلید "AB07" رو به کلید "BKSL" منتقل میکنم .دقت کنید که مقادیر هر کلید شامل دو ایندکس هستن . مقدار اول مربوط به فشردن کلید و مقدار دوم مربوط به فشردن کلید به همراه دکمه شیفت هست .در انتهای کار با یک بار Restart کردن تغییرات اعمال میشه :)امیدوارم که این چند پاراگراف براتون کاربردی بوده باشه :) علی کوشش علی کوشش Fri, 20 Aug 2021 14:41:06 +0430