BEM در توسعه وب: تقسیم بندی و بهینه‌سازی کدهای CSS

BEM یا Block, Element, Modifier یک روش مبتنی بر اجزاست که به توسعه‌دهندگان وب امکان می‌دهد رابط‌های کاربری پیچیده را به بخش‌های کوچک‌تر و مستقل تقسیم کنند. این روش به‌ویژه در پروژه‌های بزرگ که نیاز به استفاده مجدد از کد دارند، مؤثر است. پس با کداکسپلور همراه باشید تا به بررسی BEM بپردازیم.

BEM چیست؟

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

همچنین بخوانید: ارزش شبکه اجتماعی X پس از خرید ماسک ۷۹٪ کاهش یافت!

بلوک (Block)

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

• درست: <div class="error"></div> (بلوک error)
• نادرست: <div class="red-text"></div> (نام بر اساس ظاهر)

بلوک‌ها در HTML با استفاده از صفت class نمایش داده می‌شوند و نباید بر محیط بیرونی خود تأثیر بگذارند. همچنین، استفاده از شناسه‌ها و انتخابگرهای تگ CSS در روش BEM توصیه نمی‌شود.

ویژگی‌ها و مزایا

• نام بلوک باید بیانگر عملکرد آن باشد (نه ظاهر).
• بلوک‌ها مستقل از محیط اطراف هستند.
• کدها به‌راحتی قابل جابجایی و استفاده مجدد هستند.

المان (Element)

المان یک بخش ترکیبی از یک بلوک است که به‌تنهایی نمی‌تواند استفاده شود. نام المان باید عملکرد آن را توضیح دهد. ساختار نام‌گذاری یک المان به‌صورت block-name__element-name است.

<!-- Block search-form -->
<form class="search-form">
    <input class="search-form__input">
    <button class="search-form__button">Search</button>
</form>

راهنمای استفاده از المان‌ها

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

مدفایر (Modifier)

Modifierحالتی است که ظاهر، رفتار یا وضعیت یک بلوک یا المان را تعریف می‌کند. این ویژگی‌ها می‌توانند به‌صورت بولین (وجود یا عدم وجود آن مهم است) یا کلید-مقدار باشند.

<form class="search-form search-form_focused">
    <button class="search-form__button search-form__button_disabled">Search</button>
</form>

فایل‌ها و ساختار پروژه در BEM

روش BEM نه‌تنها برای نام‌گذاری کلاس‌ها، بلکه برای سازمان‌دهی فایل‌های پروژه نیز به‌کار می‌رود. این روش کمک می‌کند تا اجزای پروژه به‌صورت منظم و ماژولار مدیریت شوند و توسعه‌دهندگان بتوانند کدهای مربوط به هر بلوک، المان یا Modifier را به‌راحتی پیدا و تغییر دهند.

ساختار کلی فایل‌ها

در روش BEM، هر بلوک به یک دایرکتوری مجزا تبدیل می‌شود و داخل این دایرکتوری، فایل‌های مربوط به CSS، JavaScript و… قرار می‌گیرد. هر عنصر (Element) و مدفایر (Modifier) نیز در زیرمجموعه‌های خاص خود درون این دایرکتوری قرار می‌گیرند. این ساختار باعث می‌شود که فایل‌های پروژه به‌خوبی از هم جدا شده و کدها به‌راحتی قابل استفاده مجدد باشند.

search-form/                           # Directory of the search-form block
    __input/                           # Subdirectory of the input element in the search-form block
        search-form__input.css         # CSS implementation for the input element
        search-form__input.js          # JavaScript implementation for the input element

    __button/                          # Subdirectory of the button element in the search-form block
        search-form__button.css        # CSS implementation for the button element
        search-form__button.js         # JavaScript implementation for the button element

    _theme/                            # Subdirectory of the theme modifier for the search-form block
        search-form_theme_islands.css  # CSS implementation for the theme_islands modifier
        search-form_theme_lite.css     # CSS implementation for the theme_lite modifier

    search-form.css                    # CSS implementation for the search-form block itself
    search-form.js                     # JavaScript implementation for the search-form block itself

ساختار فلت (Flat) در BEM

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

search-form/
    search-form.css
    search-form.js
    search-form__input.css
    search-form__button.css
    search-form_theme_islands.css

این ساختار برای پروژه‌های کوچک‌تر مناسب‌تر است که در آن تعداد اجزا کمتر است و نیاز به جداسازی فایل‌ها در زیرپوشه‌های متعدد وجود ندارد.

ساختار فلکس (Flex) در BEM

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

نتیجه‌گیری

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

یک مقاله دیگر بخوانید: DeepSeek Coder: مدل هوش مصنوعی پیشرفته برای برنامه‌نویسی

اگر شما هم از روش BEM در پروژه‌های خود استفاده کرده‌اید، تجربیات خود را در بخش نظرات با ما به اشتراک بگذارید. به نظر شما این روش چگونه می‌تواند به بهبود سازمان‌دهی کد کمک کند؟

منبع: BEM.info