بزرگ‌ترین کابوس یک طراح وب این نیست که سایتی را از صفر بسازد؛ بلکه این است که ۶ ماه پس از تحویل پروژه، کارفرما از او بخواهد رنگ حاشیه کارت‌ها، فاصله درونی دکمه‌ها یا اندازه تایپوگرافی را در سرتاسر وب‌سایتی با صدها صفحه تغییر دهد. در ابزارهای سنتی طراحی وب، اکثر کاربران به دلیل عدم درک معماری استایل‌ها، تمام تغییرات ظاهری را مستقیماً روی شناسه منحصربهفرد المان (ID Styling) اعمال می‌کنند؛ رویکردی مخرب که منجر به کدهای تکراری، افزایش سرسام‌آور حجم فایل‌های CSS و ایجاد معماری شکننده‌ای می‌شود که کوچک‌ترین دستکاری در آن ساعت‌ها کار طاقت‌فرسا می‌طلبد. در نقطه مقابل، Bricks Builder قابلیت Global Classes (کلاس‌های سراسری) را در کانون تجربه طراحی خود قرار داده است. تسلط بر سیستم کلاس‌ها در بریکس، مرز میان یک طراح آماتور و یک توسعه‌دهنده ارشد فرانت‌اند است که وب‌سایت‌هایی مقیاس‌پذیر، تمیز و قابل نگهداری خلق می‌کند.
پاسخ سریع: Global Classes در Bricks چیست و چرا پایه طراحی اصولی است؟
Global Classes (کلاس‌های سراسری) در Bricks مجموعه‌ای از قوانین و مشخصات استایل‌دهی CSS (مانند پدینگ، رنگ، سایه، تایپوگرافی و رفتار ریسپانسیو) هستند که به جای پیوند به یک المان خاص، به عنوان یک برچسب مستقل ذخیره می‌شوند. شما می‌توانید این کلاس را به ده‌ها المان مشابه در صفحات مختلف نسبت دهید. هر زمان که در آینده تنظیمات آن کلاس را ویرایش کنید، تمام المان‌های دارای آن کلاس در سرتاسر وب‌سایت در یک ثانیه به‌روزرسانی می‌شوند. استفاده از کلاس‌ها حجم کدهای خروجی DOM را تا ۵۰ درصد کاهش داده و توسعه سایت را مطابق با استاندارد جهانی DRY (Don’t Repeat Yourself) سامان می‌بخشد.
۱. نبرد بنیادین: استایل‌دهی روی شناسه (ID) در برابر کلاس (Class)
برای پی بردن به چرایی اهمیت کلاس‌های سراسری، باید ابتدا رفتار مرورگر در پردازش اولویت‌های CSS (مفهوم Specificity) را درک کنیم:
معضل استایل‌دهی روی ID
در HTML، شناسه یا ID (مانند #brxe-abcd12) یک شناسه یکتاست که در کل سند فقط باید به یک عنصر تعلق داشته باشد. وزن یا Specificity شناسه در زبان CSS برابر با ۱۰۰ است. وقتی شما در یک صفحه‌ساز المانی را انتخاب کرده و مستقیماً به آن رنگ یا پدینگ می‌دهید، صفحه‌ساز آن استایل را روی ID همان عنصر ذخیره می‌کند. پیامدهای این کار عبارتند از:
- تکرار بی‌پایان کدها: اگر ۵۰ کارت محصول در سایت داشته باشید، مرورگر ۵۰ بلوک کد CSS مجزا برای تک‌تک آن‌ها دانلود می‌کند.
- ناممکن شدن بازنویسی استایل: به دلیل اولویت بالای شناسه، اگر بخواهید در یک موقعیت خاص استایلی را تغییر دهید، مجبور می‌شوید از پرچم‌های مخرب
!importantاستفاده کنید. - کندی نگهداری: هر تغییر نیازمند ویرایش دستی تک‌تک المان‌ها در صفحات گوناگون است.
قدرت و سبکی استایل‌دهی روی Class
کلاس در CSS (مانند .product-card) برچسبی مشترک با وزن اولویت ۱۰ است. وقتی استایل‌ها روی کلاس ذخیره شوند:
- مرورگر فقط یک بلوک کد CSS را یک‌بار می‌خواند و روی تمامی عناصر دارای آن کلاس اعمال می‌کند.
- کدهای تولیدی در سمت فرانت‌اند فوق‌العاده سبک شده و سرعت رندر مرورگر و نمرات Core Web Vitals جهش می‌یابند.
- تغییر پدینگ در کلاس، بلافاصله در کل سایت بازتاب می‌یابد.
۲. ساختار و مدیریت Global Classes در محیط ویرایشگر Bricks
رابط کاربری Bricks Builder به گونه‌ای طراحی شده که مدیریت کلاس‌ها به صورت لحظه‌ای و در بالاترین نقطه دید طراح در دسترس باشد:
نوار انتخاب‌گر کلاس (Class Selector Bar)
در بالای پنل سمت چپ ویرایشگر بریکس، فیلد انتخاب‌گر کلاس قرار دارد. این فیلد دو حالت اصلی را به شما نشان می‌دهد:
- حالت شناسه المان (ID State): شناسه پیش‌فرض المان (مثلاً
#brxe-4a2f8) را نشان می‌دهد. اگر در این حالت استایلی اعمال کنید، فقط همان المان منفرد تغییر می‌کند. - حالت کلاس فعال (Active Class State): نام کلاس سراسری انتخاب‌شده با پس‌زمینه رنگی و نشانگر زرد یا نارنجی نمایش داده می‌شود. هر تغییری در این وضعیت، مستقیماً روی کلاس ذخیره می‌گردد.
قابلیت قفل کلاس (Class Lock)
یکی از قابلیت‌های فوق‌العاده بریکس برای تیم‌های طراحی، دکمه قفل در کنار نام کلاس است. وقتی طراحی یک کامپوننت کلاس‌محور (مانند دکمه اصلی سایت) نهایی شد، می‌توانید آن را قفل کنید تا دیگر محتواگذاران یا همکاران پروژه هنگام تغییر محتوای متنی، به اشتباه استایل‌های سراسری کلاس را دستکاری نکنند.
۳. تفاوت بنیادین Global Classes با Theme Styles در Bricks
بسیاری از طراحانی که به تازگی مسیر شروع کار با Bricks Builder را آغاز کرده‌اند، در مرز میان Theme Styles و Global Classes دچار سردرگمی می‌شوند. جدول و تشریح زیر این مرز را شفاف می‌سازد:
| معیار | Theme Styles (استایل‌های سراسری قالب) | Global Classes (کلاس‌های سراسری) |
|---|---|---|
| دامنه عملکرد | کل تگ‌های HTML پایه (H1, p, a, body, button) | کامپوننت‌ها و الگوهای اختصاصی |
| روش اعمال | به طور خودکار بدون نیاز به افزودن دستی به المان | با انتخاب و نسبت دادن دستی نام کلاس به المان |
| سطح اولویت (Specificity) | پایین‌ترین سطح (پایه طراحی وب‌سایت) | اولویت بالاتر از استایل‌های قالب پایه |
| مثال کاربردی | فونت پیش‌فرض پاراگراف‌ها و عرض کانتینر سایت | کارت تیم .team-card یا دکمه اکشن .btn--primary |
قانون طلایی معماری: ابتدا فونداسیون سایت (رنگ‌های پایه، خانواده فونت‌ها، اندازه هدینگ‌ها و عرض کانتینرها) را در Theme Styles تنظیم کنید؛ سپس برای اجزا و کامپوننت‌های منحصربهفرد از Global Classes استفاده نمایید.
۴. نام‌گذاری استاندارد کلاس‌ها با متدولوژی BEM در Bricks
یکی از بزرگ‌ترین خطرات استفاده از کلاس‌ها، ایجاد اسامی مبهم و آشفته مانند .box1 یا .my-style است. در پروژه‌های حرفه‌ای، استفاده از متدولوژی استاندارد جهانی BEM (Block, Element, Modifier) اکیداً توصیه می‌شود:
۱. بلوک (Block): بخش مستقل و والد
نشان‌دهنده یک کامپوننت کلی و مستقل است که به تنهایی معنا دارد. نمونه‌ها:
.feature-card(کارت ویژگی).site-header(سربرگ سایت).pricing-table(جدول قیمت‌گذاری)
۲. المان (Element): جزء وابسته درونی بلوک
عنصری است که فقط درون بلوک والد کاربرد دارد و با دو خط تیره زیرین (__) از نام بلوک جدا می‌شود:
.feature-card__title(عنوان داخل کارت ویژگی).feature-card__icon(آیکون داخل کارت ویژگی).feature-card__description(توضیحات داخل کارت)
۳. تغییردهنده (Modifier): تغییر حالت یا سبک خاص
وقتی می‌خواهید نسخه‌ای خاص یا متفاوتی از یک بلوک یا المان بسازید، با دو خط تیره وسط (--) آن را متمایز می‌کنید:
.btn--primary(دکمه رنگ اصلی) در برابر.btn--outline(دکمه حاشیه‌دار).pricing-table--highlighted(پلن قیمت‌گذاری برجسته و ویژه)
با رعایت متد BEM، حتی اگر ماه‌ها بعد پروژه را باز کنید یا توسعه‌دهنده دیگری به تیم ملحق شود، وظیفه هر کلاس از نام آن کاملاً شفاف خواهد بود.
۵. ترکیب جادویی Global Classes با متغیرهای CSS (CSS Variables)
قدرت واقعی کلاس‌های سراسری زمانی آشکار می‌شود که مقادیر ثابت پیکسلی (مانند padding: 24px) را با متغیرهای CSS جایگزین کنید. همان‌طور که در راهنمای تفاوت المان‌های چیدمان در Bricks بیان کردیم، اتصال کلاس‌ها به متغیرهای مقیاس‌پذیر به شما امکان کنترل سراسری ابعاد را می‌دهد.
به جای اینکه در کلاس .card بنویسید padding: 20px، از متغیر استفاده کنید: var(--space-m). فریم‌ورک‌های مدرن توسعه نظیر Automatic.css (ACSS) یا Core Framework هزاران کلاس کمکی و متغیر از پیش آماده را برای فاصله، رنگ و تایپوگرافی فلویید (Fluid Typography) مستقیماً به ویرایشگر Bricks تزریق می‌کنند که سرعت کدنویسی را تا ۴ برابر افزایش می‌دهد.
۶. حالت‌های تعاملی (Pseudo-Classes) و ریسپانسیو در کلاس‌های Bricks
یکی از درخشان‌ترین ویژگی‌های سیستم کلاس در بریکس، انتقال کامل وضعیت‌های هاور و نقاط شکست ریسپانسیو (Breakpoints) روی همان کلاس است:
- استایل‌های Hover و Active: در کنار نوار کلاس، با انتخاب وضعیت
:hover، می‌توانید استایل‌های زمان قرار گرفتن ماوس روی المان (مانند تغییر رنگ، سایه یا جابه‌جایی ظریف) را روی کلاس ذخیره کنید. با این کار تمام عناصر دارای آن کلاس رفتاری هماهنگ پیدا می‌کنند. - طراحی ریسپانسیو اختصاصی: اگر در نمای موبایل یا تبلت تغییری در پدینگ یا جهت فلکس‌باکس کلاس ایجاد کنید، آن مدیاکوئری (Media Query) به طور خودکار به بدنه کلاس الحاق شده و در تمام المان‌های متصل اعمال می‌گردد.
- شبه‌عناصر (Pseudo-Elements): با استفاده از
:beforeو:afterروی کلاس‌ها می‌توانید المان‌های تزئینی، نشانگرها یا پوشش‌های گرادینت را بدون تزریق تگ اضافه به ساختار سند ایجاد کنید.
۷. پنج اشتباه رایج و خطرناک در کار با کلاس‌ها در Bricks
حتی طراحان باسابقه نیز گاهی مرتکب این لغزش‌ها می‌شوند. مراقب این موارد باشید:
- ویرایش سهوی شناسه (ID) به جای کلاس: همیشه قبل از تغییر فونت یا رنگ، نوار بالای پنل را نگاه کنید و مطمئن شوید که برچسب کلاس با رنگ مشخص فعال است، نه شناسه المان.
- ایجاد کلاس‌های یک‌بارمصرف: اگر استایلی فقط برای یک المان منحصربهفرد در کل سایت کاربرد دارد، ساخت کلاس سراسری برای آن بیهوده است و همان استایل‌دهی روی ID کفایت می‌کند.
- تداخل کلاس‌ها به دلیل اولویت‌بندی نامناسب: انتساب همزمان دو کلاسی که روی یک خصوصیت مشترک (مثلاً رنگ پس‌زمینه) قوانین متضاد دارند باعث سردرگمی مرورگر می‌شود.
- فراموش کردن پاک‌سازی کلاس‌های بدون استفاده (Orphan Classes): بریکس در پنل مدیریت استایل‌ها ابزاری برای شناسایی و حذف کلاس‌هایی که به هیچ المانی متصل نیستند فراهم کرده است؛ هر از چند گاهی این پاک‌سازی را انجام دهید.
- عدم هماهنگی با تیم: در پروژه‌های تیمی، داشتن یک مستند سبک (Style Guide) از کلاس‌های موجود مانع از بازتولید کلاس‌های تکراری توسط اعضای مختلف می‌شود.
۸. جمع‌بندی: گام برداشتن به سمت مهندسی فرانت‌اند پایدار
همان‌طور که در تحلیل مقایسه‌ای Bricks یا Elementor نشان دادیم، تفاوت ابزارهای نسل جدید در احترام به معماری استاندارد وب است. قابلیت Global Classes در Bricks Builder صرفاً یک ابزار جانبی نیست، بلکه فلسفه‌ای است که پروژه شما را از ورطه بی‌نظمی نجات داده و پایداری، سرعت و آرامش خاطر را برای سال‌های متمادی تضمین می‌نماید.
پرسش‌های متداول درباره Global Classes در Bricks Builder
۱. آیا می‌توان چند کلاس سراسری را به طور همزمان به یک المان اختصاص داد؟
بله، شما می‌توانید چندین کلاس (مثلاً یک کلاس چیدمان مانند .grid-3-col و یک کلاس ظاهری مانند .bg-glass) را به یک المان نسبت دهید. این متدولوژی ماژولار باعث انعطاف‌پذیری شگفت‌انگیز در ساخت صفحات می‌شود.
۲. چطور بفهمیم یک استایل روی ID المان ذخیره شده یا روی Class؟
در پنل تنظیمات بریکس، هر ویژگی که دارای استایل فعال باشد یک نشانگر رنگی در کنار نام آن فیلد نمایان می‌شود. اگر نام کلاس در کادر بالا انتخاب شده باشد، آن نشانگر متعلق به کلاس است؛ در غیر این صورت متعلق به ID المان است.
۳. آیا حذف یک کلاس از روی یک المان، استایل‌های آن را در کل سایت پاک می‌کند؟
خیر، حذف کلاس از یک المان فقط ارتباط آن المان خاص را با کلاس قطع می‌کند. خود کلاس و کدهای استایل آن در حافظه بریکس باقی می‌مانند و روی سایر المان‌های سایت دست‌نخورده اجرا می‌شوند.
۴. اگر استایلی هم روی ID و هم روی Class وجود داشته باشد، کدام‌یک اولویت دارد؟
بر اساس قوانین پایه CSS، شناسه (ID) همواره اولویت بالاتری نسبت به کلاس دارد. بنابراین اگر روی کلاسی رنگ آبی و روی ID المان رنگ قرمز تعریف شده باشد، المان با رنگ قرمز رندر خواهد شد.
۵. آیا می‌توان کلاس‌های سراسری را بین وب‌سایت‌های مختلف خروجی یا ورودی گرفت؟
بله، بریکس امکان خروجی گرفتن (Export) و ورودی گرفتن (Import) ساختار کلاس‌های سراسری را در قالب فایل‌های JSON یا سیستم کپی-پیست تمپلیت‌ها فراهم کرده است که توسعه پروژه‌های بعدی را به شدت تسریع می‌کند.
