انواع متدلوژی های CSS (پایه و اساس نوشتن CSS)

متدولوژی CSS، مجموعه ای از دستورالعمل ها برای نوشتن کدهای ماژولار، قابل استفاده مجدد و مقیاس پذیر است. اگرچه نوشتن CSS، بسیار آسان است، اما بدون قرارداد توافق شده، کدها تقریباً به همان سرعتی که نوشته شده اند، بی نظم و شلوغ و غیرخوانا می‌شوند. از آنجایی که هر اعلان CSS (CSS declaration)در خط خودش تعریف می‌شود، فایل‌ها به سرعت بزرگ می‌شوند و نگهداری از آنها به کابوس تبدیل شود.

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

تعدادی از متدولوژی‌های محبوب CSS عبرتند از:

• CSS شی گرا (OOCSS)
• CSS اتمی (Atomic css)
• BEM
• SMACSS

CSS شی گرا (OOCSS)

خلاصه OOCSS: طرح بندی را به اشیاء تقسیم کنید، سپس CSS آنها را به ماژول ها خلاصه کنید.

OOCSS شامل شناسایی اشیاء در یک صفحه و جداسازی سبک های ساختاری و بصری CSS آنها به دو بلوک اعلان است. سپس این بلوک ها می توانند توسط عناصر مختلف مورد استفاده مجدد قرار گیرند و تغییرات فقط در یک مکان انجام شود که منجر به سازگاری بهتر می شود.

بلوک‌های اعلان (declared blocks) برای جلوگیری از مشکلات اختصاصی، روی عناصر با استفاده از انتخابگرهای تک کلاس اعمال می‌شوند. این تکنیک همچنین محتوا را از ظرف جدا می کند، بنابراین اشیا در هر کجا که ظاهر می شوند یکسان به نظر می رسند. کلاس ها همچنین نشانه گذاری را از CSS جدا می کنند. برای درک بهتر این قاعده به عکس زیر دقت نمایید:

OOCSS مفاهیم مفید زیادی را معرفی می کند، اما فقدان قوانین مشخصی در آن منجر به تغییراتی در تفسیر می شود که می تواند منجر به ناسازگاری شود. با این حال، از آن در ایجاد و ساختار قواعد جدیدتر و بهینه تر استفاده می شود.

CSS اتمی (Atomic css)

خلاصه CSS اتمی: برای هر اعلان CSS تکراری یک انتخابگر کلاس ایجاد کنید.

ACSS توسعه دهندگان را تشویق می کند تا انتخابگرهای کلاس تک منظوره را برای هر اعلان قابل استفاده مجدد تعریف کنند. برخلاف OOCSS، که مقادیر ویژگی های CSS را در نام کلاس ها منع می کند، ACSS از آن استقبال می کند.

رویکردهای برنامه‌ای برای ACSS وجود دارد که به طور خودکار CSS را بر اساس کلاس‌ها یا ویژگی‌هایی که کاربران به HTML اضافه می‌کنند، تولید می‌کنند. مزیت اصلی ACSS سهولت در حفظ کد یکنواخت و عدم نیاز به اختراع کلاس برای مؤلفه هایی است که به یک قانون CSS نیاز دارند.با این حال، ACSS به تنهایی می تواند منجر به تعداد غیرقابل مدیریت کلاس ها و فایل های HTML حجیم شده شود. بنابراین معمول است که فقط از اصول ACSS برای ایجاد کلاس های کمکی که بلوک های اعلان سازگار و قابل استفاده مجدد را تعریف می کنند، استفاده کنیم.

Block Element Modifier

خلاصه BEM: از یک قرارداد نامگذاری استاندارد برای کلاس ها استفاده کنید.

BEM توسعه دهندگان را تشویق می کند تا طرح بندی ها را به بلوک ها و عناصر تو در تو تقسیم کنند. تغییرات از ظاهر متوسط ​​یک بلوک یا عنصر نیز باید با استفاده از اصلاح‌کننده‌ها شناسایی و اعمال شوند.

اعلان‌های CSS با استفاده از یک نام کلاسی با فرمت block-name برای بلوک‌ها و block-name__element-name برای عناصر، با دو زیر خط (underline)در بین اعمال می‌شوند. نام‌های اصلاح‌کننده برای وضوح بهتر به کلاس‌ها اضافه می‌شوند، به عنوان مثال block-name__element-name_modifer-name یا block-name__element-name--modifer-name. یک شی یک بلوک است اگر بتواند بدون اجداد وجود داشته باشد، در غیر این صورت یک عنصر محسوب می شود.

بلوک ها می توانند بلوک ها و عناصر تودرتو داشته باشند، اما عناصر نمی توانند. اصلاح کننده ها باید در کنار کلاس های بلوک و عنصر استفاده شوند، نه به جای آنها.

BEM را می توان روی یک لیست اعمال کرد، به نحوی که که list-block--inline و list-block__item--active به ترتیب لیست های نمایش افقی و برجسته کردن موارد است.

BEM یک قرارداد نامگذاری بسیار مؤثر است که CSS با رفتار قابل پیش بینی ایجاد می کند که مدیریت، نگهداری و مقیاس آن آسان است. با این حال، BEM دارای نکات منفی است، از جمله دشواری در اختراع نام کلاس برای اشیاء عمیق تو در تو، نام‌های طولانی کلاس و HTML حجیم که گاهی اوقات ممکن است به وجود بیاید، و همچنین عدم سازگاری ناشی از ناتوانی در اشتراک گذاری CSS بین اشیا.

معماری مقیاس پذیر و ماژولار برای CSS (SMACSS)

به طور خلاصه: کد CSS را در چندین فایل برای عملکرد و سازماندهی بهتر تقسیم کنید

SMACSS با تقسیم CSS به پنج دسته - پایه، طرح، ماژول، حالت و موضوع - معمولاً به فایل های جداگانه تقسیم می شود. سبک های پایه سبک های پیش فرض را لغو می کنند و عمدتاً با استفاده از انتخابگرهای عنصر اعمال می شوند.

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