کلاسهای سراسری (Global classes)
Theme Styles پیشفرضهای المانها را بهزیبایی مدیریت میکنند. اما چطور با استایلهای utility قابل استفاده مجدد که میخواهید در صورت نیاز اعمال کنید؟ چیزهایی مثل وسطچین کردن متن، افزودن سایه، یا ساخت انواع دکمه؟
این مقاله کمیعمیقتر از مقالات قبلی است. اگر عجله دارید، میتوانید الان سریع بخوانید، درک کلی از کلاسهای سراسری داشته باشید، و بعداً وقتی پروژههایتان تکراری شد برگردید.
اینجاست که کلاسهای سراسری درخشان میشوند. آنها کتابخانه کلاس CSS سفارشی شما هستند که بهصورت بصری در Bricks ساخته شده و با یک کلیک در هر جایی قابل استفاده مجدد هستند.
کلاسهای سراسری چیستند؟
کلاس CSS مجموعهای از استایلهاست که میتوانید روی هر المانی اعمال کنید. به جای استایلدهی به هر المان بهصورت جداگانه، یک بار یک کلاس میسازید و آن را هر جا که لازم است اعمال میکنید.
مثال: کلاسی به نام .shadow-large میسازید که drop shadow اضافه میکند. حالا میتوانید آن سایه را فوراً روی دکمهها، تصاویر، کارتها یا هر المانی اعمال کنید، بدون اینکه هر بار استایلهای سایه را دوباره تعریف کنید.
کلاسهای سراسری برای ساخت سایتهای مقیاسپذیر و قابل نگهداری حیاتی هستند. سازگاری را تضمین میکنند و سرعت کار شما را بهشکل چشمگیری افزایش میدهند.
چرا کلاسهای سراسری اهمیت دارند
تصور کنید 20 دکمه در سراسر سایت دارید. بدون کلاس، هر دکمه را بهصورت جداگانه (20 بار) استایل میدهید. اگر مشتری بخواهد سبک دکمه را تغییر دهد، باید هر کدام را بهصورت دستی بهروز کنید. این خستهکننده و مستعد خطاست.
با یک کلاس سراسری:
1. یک بار .btn-primary میسازید
2. آن را روی همه 20 دکمه اعمال میکنید
3. وقتی استایلها نیاز به تغییر دارند، کلاس را یک بار ویرایش میکنید
4. همه 20 دکمه بهطور خودکار بهروز میشوند
اینگونه است که متخصصان سایتهای مقیاسپذیر میسازند.
مشکلی که کلاسهای سراسری حل میکنند
بیایید با یک مثال واقعی نشان دهیم. فرض کنید میخواهید دو عنوان در صفحات مختلف همان رنگ آبی و وزن bold داشته باشند.
بدون کلاس: 1. عنوان اول را استایل میدهید (color: blue، weight: 700) 2. به صفحه دوم میروید 3. آن را به همان شکل استایل میدهید 4. برای هر عنوان مشابه تکرار میکنید
اگر بعداً تصمیم گرفتید آبی باید بنفش شود، باید هر عنوان را جستجو کنید و بهصورت دستی تغییر دهید.
با کلاسهای سراسری:
1. کلاس .heading-blue میسازید (color: blue، weight: 700)
2. با یک کلیک آن را روی هر دو عنوان اعمال میکنید
3. بعداً .heading-blue را برای بنفش ویرایش میکنید
4. هر عنوانی که از آن کلاس استفاده میکند فوراً بهروز میشود
این افزایش کارایی است. یک بار استایل کنید، همه جا اعمال کنید.
ساختن اولین کلاس سراسری
بیایید یک کلاس utility بسازیم تا گردش کار را نشان دهیم.
آماده کردن مثال
- یک صفحه جدید بسازید یا یک صفحه موجود باز کنید
- دو المان Heading به صفحه اضافه کنید
الان اگر میخواهید هر دو عنوان یکسان به نظر برسند، باید هر کدام را جداگانه استایل دهید. به جای آن از یک کلاس سراسری استفاده میکنیم.
ساختن کلاس
- عنوان اول را انتخاب کنید
- به پنل چپ نگاه کنید. بالا، نام المان و یک فیلد ID زیر آن میبینید (چیزی مثل
#brxe-abc123نشان میدهد) - روی آن فیلد ID کلیک کنید
- در ورودی ظاهرشده، تایپ کنید:
heading-feature - Enter را بزنید یا روی آیکون Save (فلاپی دیسک) کلیک کنید
توجه کنید که فیلد اکنون .heading-feature نشان میدهد (با نقطه، که نشان میدهد کلاس است، نه ID).
شما همین الان یک کلاس سراسری ساختید. حالا هر استایلی که روی این عنوان اعمال کنید به کلاس .heading-feature اضافه میشود، نه فقط به این المان خاص.
استایلدهی به کلاس
در حالی که عنوان هنوز انتخاب شده و کلاس اعمال شده:
- در Typography، Font size را روی
32تنظیم کنید - Font weight را روی
700تنظیم کنید - Color را روی آبی روشن (
#0066ff) تنظیم کنید - در Spacing، Margin bottom
20اضافه کنید
این استایلها اکنون در کلاس .heading-feature ذخیره شدهاند.
اعمال کلاس روی المان دیگر
حالا این کلاس را روی عنوان دوم اعمال میکنیم:
- عنوان دوم را انتخاب کنید
- روی فیلد ID بالای پنل کلیک کنید
- شروع به تایپ
heading-featureکنید - آن را در منوی autocomplete میبینید
- آن را انتخاب کنید یا Enter بزنید
عنوان دوم فوراً با اول مطابقت پیدا میکند. همان font size، weight، color و spacing. هیچ تنظیماتی را دوباره تایپ نکردید. فقط کلاس را اعمال کردید.
کلاس را تغییر دهید، همه چیز بهروز میشود:
- هر یک از عنوانها را انتخاب کنید (هر دو از کلاس استفاده میکنند)
- رنگ را به بنفش (
#9333ea) تغییر دهید - هر دو عنوان فوراً بهروز میشوند
این قدرت کلاسهای سراسری است. یک بار استایل کنید، همه جا اعمال کنید، بهصورت سراسری بهروز کنید.
درک تفاوت: استایلهای ID در مقابل کلاس
بهطور پیشفرض، وقتی یک المان را انتخاب میکنید و استایل اعمال میکنید، به ID منحصربهفرد آن المان اضافه میشوند. آن استایلها فقط روی آن یک المان تأثیر میگذارند.
وقتی یک کلاس سراسری میسازید و اعمال میکنید، استایلها به جای آن وارد کلاس میشوند. حالا هر المانی که از آن کلاس استفاده میکند آن استایلها را به ارث میبرد.
مهم: استایلهای ID بر استایلهای کلاس غلبه میکنند (CSS specificity). اگر یک کلاس را روی المانی اعمال کنید اما سپس استایلهای فردی به همان المان اضافه کنید، استایلهای فردی برنده میشوند.
بهترین رویه: از کلاسهای سراسری برای استایلهای مشترک استفاده کنید. از استایلهای خاص المان (ID) فقط برای تنظیمات منحصربهفرد و یکبار استفاده کنید.
ساختن یک سیستم کلاس utility
حالا که مفهوم را درک کردید، بیایید چند کلاس utility مفید بسازیم. اینها کلاسهای کوچک و تکمنظورهای هستند که میتوانید برای حداکثر انعطافپذیری ترکیب کنید.
کلاسهای تراز متن
این سه کلاس را بسازید:
.text-center
1. یک المان Heading بسازید
2. کلاس text-center را اضافه کنید
3. در Typography، Text align را روی Center تنظیم کنید
4. Heading را حذف کنید (فقط برای ساختن کلاس به آن نیاز داشتیم)
.text-left
- همان فرآیند، Text align را روی Left تنظیم کنید
.text-right
- همان فرآیند، Text align را روی Right تنظیم کنید
حالا میتوانید هر المان متنی را فوراً با اعمال .text-center وسطچین کنید.
کلاسهای utility فاصلهگذاری
یک مجموعه کلاس margin برای فاصلهگذاری ثابت بسازید:
.mb-sm (margin bottom کوچک)
- Margin bottom را روی 16 تنظیم کنید
.mb-md (margin bottom متوسط)
- Margin bottom را روی 32 تنظیم کنید
.mb-lg (margin bottom بزرگ)
- Margin bottom را روی 48 تنظیم کنید
در صورت تمایل برای margin top (.mt-sm، .mt-md، .mt-lg) هم همین کار را انجام دهید.
این کلاسهای ساده فاصلهگذاری را بهشکل چشمگیری سرعت میبخشند. به جای تایپ کردن مکرر مقادیر margin، یک کلاس اعمال میکنید.
کلاسهای تنوع دکمه
بیایید تنوع استایل دکمه بسازیم:
.btn-outline
1. یک المان Button اضافه کنید
2. کلاس btn-outline را اعمال کنید
3. در Style، Background color را بردارید (شفاف کنید)
4. در Border، یک border اضافه کنید: 2px solid، رنگ #0066ff
5. Text color را روی #0066ff تنظیم کنید
6. Padding 12 بالا/پایین، 24 چپ/راست اضافه کنید
7. Border radius را روی 8 تنظیم کنید
.btn-ghost
1. مشابه btn-outline، اما بدون border
2. فقط رنگ متن و padding
3. جلوه hover ظریف (حالت :hover را برای افزودن background تنظیم کنید)
حالا میتوانید تنوع دکمه را فوراً با عوض کردن کلاس بسازید.
مدیریت کلاسهای سراسری
با بزرگ شدن کتابخانه کلاسهایتان، سازماندهی مهم میشود.
مشاهده همه کلاسها
Cmd/Ctrl + . را بزنید تا Style Manager باز شود (یا روی آیکون Styles در نوار ابزار کلیک کنید). به تب Classes بروید.
اینجا میتوانید: - همه کلاسهای سراسری خود را ببینید - کلاسها را ویرایش، تغییر نام یا حذف کنید - به دنبال کلاسهای خاص جستجو کنید - ببینید کجا از کلاسها استفاده میشود - کلاسها را export/import کنید
ویرایش یک کلاس
در تب Classes در Style Manager: 1. کلاسی که میخواهید ویرایش کنید را پیدا کنید 2. روی آیکون Edit (مداد) کلیک کنید 3. استایلها را در پنل تغییر دهید 4. همه المانهایی که از آن کلاس استفاده میکنند فوراً بهروز میشوند
حذف کلاسهای بلااستفاده
Manager نشان میدهد کدام کلاسها استفاده میشوند و کجا. اگر کلاسی در جایی استفاده نمیشود، میتوانید با خیال راحت آن را حذف کنید تا کتابخانهتان تمیز بماند.
مثال دنیای واقعی: استایلدهی یکسان به المانهای مختلف
اینجا یک سناریوی رایج که نشان میدهد چرا کلاسهای سراسری ضروری هستند.
مشکل
دارید یک landing page میسازید. میخواهید: - عنوانها در بخش Hero - عنوانها در بخش Features - عنوانها در Testimonials
همه باید همان سایه آبی با همان وزن داشته باشند. این سه عنوان در یک صفحهاند که هر کدام به استایلهای یکسانی نیاز دارند.
بدون کلاس: هر عنوان را بهصورت جداگانه استایل دهید (خستهکننده، سخت برای نگهداری).
با کلاس: .heading-accent را بسازید، آن را روی هر سه عنوان اعمال کنید. تمام شد.
تکامل
بعداً مشتری میپرسد: «میتوانیم آن عنوانهای آبی را بنفش کنیم؟»
بدون کلاس: هر سه عنوان را جستجو کنید، هر کدام را بهصورت جداگانه تغییر دهید، امیدوار باشید هیچ کدام را از دست ندهید.
با کلاس: .heading-accent را ویرایش کنید، رنگ را یک بار تغییر دهید. هر سه بهروز میشوند. در 10 ثانیه تمام است.
این مثال به صدها المان در دهها صفحه تعمیم مییابد. کلاسهای سراسری همه چیز را قابل مدیریت نگه میدارند.
ترکیب کلاسها
میتوانید چندین کلاس را روی یک المان اعمال کنید. این برای ترکیب استایلها قدرتمند است.
مثال: هم .heading-feature و هم .text-center را روی یک عنوان اعمال کنید. استایلهای heading feature (رنگ، وزن، اندازه) به علاوه تراز وسط دریافت میکند.
این رویکرد ماژولار حداکثر انعطافپذیری را با حداقل تکرار به شما میدهد.
Pseudo-selector ها: حالتهای hover و بیشتر
کلاسهای سراسری از pseudo-selector هایی مثل :hover، :focus، :active و بیشتر پشتیبانی میکنند.
ساختن یک جلوه hover:
- کلاس
.btn-primaryبسازید - حالت پیشفرض را استایل دهید (background: آبی، text: سفید)
- State را به
:hoverتغییر دهید - رنگ background را تیره کنید
- یک transform مقیاس ظریف اضافه کنید (در کنترلهای پیشرفته زیر Transform)
حالا هر دکمهای با .btn-primary آن جلوه hover را دارد. یک بار تعریف کردید.
اشاره سریع: ویژگیهای پیشرفته برای مقیاسبندی
با پیشرفت در Bricks، ویژگیهایی مییابید که مکمل کلاسهای سراسری هستند:
Variables — در داخل Style Manager، تب Variables به شما امکان میدهد متغیرهای CSS (رنگها، مقیاسهای spacing، اندازههای font) را تعریف کنید که میتوانید در کلاسهایتان به آنها ارجاع دهید. یک متغیر را تغییر دهید، هر کلاسی که از آن استفاده میکند بهروز شود.
Components — کل layout ها (نه فقط استایلها) را به بلوکهای قابل استفاده مجدد و همگامسازیشده تبدیل کنید. آنها را بهعنوان کلاسهای سراسری برای ساختار + محتوا + استایلها در نظر بگیرید.
این ویژگیهای پیشرفته بر اساس همان اصل هستند: یک بار تعریف کنید، همه جا استفاده مجدد کنید، بهصورت سراسری بهروز کنید. ابتدا کلاسهای سراسری را تسلط پیدا کنید، سپس وقتی پروژههایتان نیاز بیشتری داشتند اینها را بررسی کنید.
امتحان کنید
یک کلاس سراسری به نام .shadow-soft بسازید که یک box shadow ظریف (0 4px 16px rgba(0,0,0,0.1)) اضافه میکند. آن را روی چندین المان مختلف (تصاویر، کارتها، container ها) اعمال کنید. ببینید چگونه یک کلاس در همه جا سایههای ثابت اضافه میکند. سپس کلاس را ویرایش کنید تا سایه قویتر شود. ببینید همه المانها با هم بهروز میشوند. این گردش کاری است که پروژههای بزرگ را قابل مدیریت نگه میدارد.
آنچه یاد گرفتید
اکنون میتوانید:
- کلاسهای سراسری بسازید و بدانید چرا اهمیت دارند
- برای سازگاری، کلاسها را روی چندین المان اعمال کنید
- کلاسهای utility برای تراز متن، فاصلهگذاری و استایل دکمه بسازید
- کلاسها را در Style Manager مدیریت کنید
- از pseudo-selector هایی مثل :hover در کلاسها استفاده کنید
- چندین کلاس را روی یک المان ترکیب کنید
- تفاوت بین استایلدهی ID-محور و کلاس-محور را درک کنید
کلاسهای سراسری نحوه ساختن سایتهایی هستند که مقیاس مییابند. آنها گردش کار شما را از استایلدهی تکراری به سیستمسازی کارآمد تبدیل میکنند.