استایل نویسی ماژولار در CSS به همراه روش های مختلف

استایل نویسی برای صفحات وب نسبت به زمان های گذشته دستخوش تغییر شده، زمانی که تنها یک فایل استایل برای صفحه وب پاسخگوی نیازها بود گذشته و حالا به سمت ماژولار بودن حرکت می‌کند.

امروزه به لطف ابزارهایی مثل Styled Components گاها نیازمند به تعریف کلاس ها نیستیم، اما این واقعیت پذیرفته شده است که عمده زمان برنامه نویسان صرف نام گذاری متغیرها (در این مورد کلاس‌ها) می‌شود.

پس راه حل استفاده از چارچوب های تعریف شده برای نام گذاری سلکتورهای سی اس اس و ساختار صفحه وب است، برای مثال نمونه کد زیر بر هیچ مبنایی نوشته نشده:

قطعه کد بالا فاجعه محض است؛ چون هیچ نظم و قاعده ای برای نوشتن آن وجود ندارد، فردا روزی اگر قسمت اضافه کردن ویژگی یا رفع مشکلی را داشته باشیم، نهایتا یا زمان زیادی از ما گرفته می‌شود یا اینکه نهایتا کامپوننت را از صفر می‌نویسیم. به همین دلیل در این مطلب محبوب ترین روش‌های نوشتن سی اس اس بصورت ماژولار را بررسی می‌کنیم تا کدی مثل کد بالا ننویسیم.

سی اس اس ماژولار چیست؟

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

بصورت خلاصه سی اس اس ماژولار دارای ویژگی های زیر است:

• تبدیل صفحات وب به استایل های CSS با قابل استفاده مجدد.
• براساس کلاس ها و روش نام گذاری از پیش تعیین شده.
• سهولت در خوانایی، نگهداری و توسعه استایل ها.

به علاوه یک ماژول سی اس اس باید سه فاکتور زیر را داشته باشد:

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

مزایای سی اس اس ماژولار

1- انعطاف و مقیاس پذیری
2- منحصر بودن با اعمال روش نام گذاری معین
3- کمک به توسعه سریع و کارآمدتر
4- استفاده مجدد از استایل های CSS
5- مرتب، سهولت در خوانایی و نگهداری استایل

کلیات و اصول اولیه

برای نوشتن استایل های ماژولار باید به نکات زیر توجه داشته باشیم:

1- خودداری از سلکتورهای تو در تو بیشتر از یک مرحله
2- پرهیز از به کار بردن ای دی ها
3- استفاده از کلاس ها به جای تگ ها
4- جداکردن استایل های تنظیم موقعیت (position) از طرح (layout)
5- افزودن پیشوند به کلاس ها برای جلوگیری از تداخل استایل ها

روش های تعریف شده برای سی اس اس ماژولار

متودلوژی (Methodology) های مختلفی برای نوشتن استایل ماژولار وجود دارد که در ادامه آنها را باهمدیگر بررسی می‌کنیم.

OOCSS - سی اس اس شی گراء

سی اس اس شی گراء توسط نیکول سالیوان خلق شده است و همانطور که از نامش پیداست از اصول برنامه نویسی شی گرا پیروی می‌کند. هدف ساخت کامپوننت های منعطف، قابل استفاده مجدد، مقیاس پذیر، مستقل و با قابلیت مدیریت آسان است، ویژگی هایی که بالاتر نیز به آنها اشاره شد.

بصورت کلی در این روش کامپوننت ها مجزا طراحی می‌شوند و استایل آنها تحت تاثیر موقعیتی که در آن مورد استفاده قرار می‌گیرند نیست.

دو اصل مهم سی اس اس شی گرا به شرح زیر است:

1- جدایی ساختار از پوسته

ساختار در اینجا به معنی تمام استایل هایی است که به عنصر در صفحه وجود می بخشد برای مثال خاصیت هایی از جمله ،overflow، width، height، padding و... که کلیت عنصر هستند به عنوان ساختار محسوب می‌شوند. از طرفی پوسته استایل هایی هستند که با ساختار ترکیب می‌شوند و آن را شخصی سازی می‌کنند در این مورد می‌توان ویژگی هایی مثل رنگ متن و پس زمینه، نوع فونت و سایه ها را مثال زد.

مثال زیر یک کد سی اس اس است که بصورت معمولی نوشته شده:

حالا از همین کد قسمت هایی که تکرار شده اند را فاکتور می‌گیریم و جز ساختار حساب می‌کنیم، سایر موارد که مخصوص خود عنصر هستند جز پوسته آن عنصر تنظیم می‌شوند:

ساختار HTML به این شکل خواهد شد:

2- جدایی دربرگیرنده و محتوای درون آن

دربرگیرنده در اینجا همان عنصر والد است و محتوا تصاویر، پاراگراف ها، لینک‌ها، متن‌ها و... هستند که درون دربرگیرنده وجود دارند. برای درک این مفهوم مثال زیر را بررسی کنید:

در کد بالا با توجه به اینکه .list عنصری مجزا است اما چون به منو محدود شده در قسمت های دیگر سایت قابل استفاده نیست، کد زیر از اصل جدایی این دو پیروی می‌کند:

تغییراتی که در کد بالا اعمال شد:

1- تغییر navbar آیدی به کلاس
2- حذف #navbar قبل از سلکتورهای عنصرهایی که درون آن هستند

BEM - بلوک، عنصر، اصلاحگر

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

در این روش نام‌گذاری براساس این سه فاکتور انجام می‌شود:

بلوک (Block):

عنصر بالا دستی که به معنای کامل یک کامپوننت قابل استفاده است و در آن عناصر (elements) قرار گرفته اند.

عنصر (Element):

عناصر به خودی خود کار قابل توجهی انجام نمی‌دهند اما با ترکیب و قرار دادن آنها در یک والد تحت عنوان بلوک به کارایی مدنظر می‌رسند. برای مثال یک دکمه در یک کارت عنصری است که به کارت معنا می‌بخشد.

اصلاحگر (Modifier):

برای اعمال حالت خاص یا تغییر ظاهر اعمال می‌شود، برای مثال یک دکمه می‌تواند موفق (success) یا حالت خطر (danger) داشته باشد.

سینتکس سلکتورهای سی اس اس به روش BEM در تصویر زیر آمده:

برای مطالعه بیشتر می‌توانید این مقاله را از سایت ترفندهای سی اس اس مطالعه کنید.

DRY - خودتو تکرار نکن

این روش مخفف عبارت «خودتو تکرار نکن» (Don't Repeat Yourself) یک اصطلاح معروف در دنیای کامپیوتر است توسط جرمی کلارک (Jeremy Clarke) ابداع شده به مفهوم بهینه کردن کدها اشاره می‌کند.

این روش طرز فکری متفاوت نسبت به روش‌هایی که بالاتر مشاهده کردیم دارد، در این روش تاکید بروی جداسازی استایل‌ها از محتوا دارد هدف نوشتن استایلی است که در هر موقعیتی بدون کمترین مشکل کار کند.

برای مثال کد زیر را داریم:

ابتدا قسمت های تکراری را فاکتور می‌گیریم و باهم یکجا قرار می‌دهیم. اولین سلکتور را با یک آیدی و آخرین سلکتور را با یک کلاس می‌بندیم به صورت زیر:

حالا هر موقع نیاز به استفاده از استایل‌های بالا داشتیم به سادگی سلکتور آن را در میان آیدی و کلاس تعریف شده قرار می‌دهیم یا اینکه کلاس یا آیدی تعریف شده را استفاده می‌کنیم.

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

SMACSS - معماری مقیاس پذیر و ماژولار سی اس اس

این روش مختصر عبارت Scalable and Modular Architecture for CSS است، به معنی معماری سی اس اس که هدف آن مقیاس پذیری و ماژولار بودن است، به خودی خود گویای مقصود خودش است.

این روش دارای پنج دسته بندی برای کدها است:

1- پایه: استایل ها پیشفرض و آنهایی که محدود به یک عنصر خاص می‌شوند برای مثال سلکتورهای زیر:

2- طرح: صفحه وب به مجموعه هایی مجزا از طرح ها (layouts) می‌شود که هر طرح می‌تواند یک یا چند ماژول درون خود داشته باشد.

3- ماژول: درون طرح قرار می‌گیرد یا می‌تواند درون ماژول دیگری استفاده شود.

4- حالت: با حالت‌ها ظاهر طرح و ماژول‌ها در وضعیت خاصی تنظیم می‌شود، این وضعیت می‌تواند پنهان شدن، فعال شدن،‌ باز شدن و... باشد. دستورهای حالتی تعیین می‌کنند اجرا در سایزهای با سایز صفحه کوچک یا بزرگتر چگونه نمایش داده شوند.

5- تم: مفهمومی شبیه به حالت ها را دارد اما بیشتر در مورد ویژگی های ظاهری از جمله رنگ متن، پس زمینه، مرزها، سایه ها و تایپوگرافی صدق می‌کند.

برای مطالعه بیشتر و بررسی مثالهای کاربردی در مورد این روشبه سایت رسمی آن مراجعه کنید.

خلاصه کلام

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

منابع:

How to Implement Basic Modular CSS Guidelines
How To Nest Blocks Within Blocks in BEM
blue and yellow plastic blocks photo – Free Lego Image on Unsplash