مقالات طراحی سایت

در مورد CSS اصطلاحی وجود دارد که میگوید به راحتی میتوان CSS نوشت، اما توسعه و پشتیبانی آن سخت است. ولی آیا راهی وجود دارد که بتوان CSS ها را سازماندهی کرد؟ در این مقاله سه شیوه OOCSS، SMACSS، و BEM را توضیح میدهم که میتواند راه حلی برای این مشکل باشد.

OOCSS چیست؟

OOCSS یک الگو (پارادایم) برنامه نویسی است. OOCSS مخفف Object Oriented CSS است، درواقع همان مفهوم برنامه نویسی Object Oriented دارد: spageti CSS در مقابل OOCSS.

در OOCSS تمرکز برروی کامپوننت های منعطف، ماژولار، و قابل تعویض است که تنها یک کار را انجام میدهند. درواقع در OOCSS کامپوننت ها تنها یک وظیفه دارند و از یکدیگر مستقل هستند.

به مثال زیر دقت کنید:

 
.media {}
.media .img {}
.media .img img {}
.media .imgExt {}
.bd {}
 

کلاس .media یک آبجکت مستقل از باقی کلاس ها است، بنابراین میتواند در هر جایی از سایت - یا حتی پروژه های دیگر - نیز استفاده شود.

مطالعه بیشتر: OOCSS

SMACSS چیست؟

SMACSS (تلفظ smaks) مخفف Scalable and Modular Architecture است. SMACSS روش یا methodology نوشتن CSS است. در این شیوه سطوحی معرفی شده اند که CSS باید در آن سطوح نوشته شوند.

بر اساس SMACSS پنج سطح base، layout، module، state، و theme وجود دارند.

قوانین base همان قوانین پیش فرض هست که بر روی المان های html اعمال میشود. مثلا حذف margin از المان body.

قوانین rule صفحه را به بخش های مختلف تقسیم میکند. layoutها میتوانند یک یا چند ماژول را درون خود داشته باشند.

moduleها بخش هایی هستند که در پروژه تکرار میشوند. مانند لیست محصولات، calloutها و .. .

قوانین state توضیح میدهد که ماژول ها یا Layoutها در وضعیت های مختلف چگونه نمایش داده شوند. آیا باید مخفی شوند و یا expand بشوند؟ فعال هستند یا غیر فعال؟

قوانین theme چیزی شبیه به قوانین state هستند. themeها هم توضیح میدهند که layout و moduleها چگونه نمایش داده شوند. البته سایت میتواند theme نداشته باشد.

مطالعه بیشتر: SMACSS

BEM چیست؟

BEM مخفف Block Element Modifier است. این شیوه، الگویی را برای نام گذاری هر کلاس ارائه میدهد.

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

element بخشهایی از block هستند که مستقلا معنایی ندارند. هر element به block خود متصل است. نام element میتواند حروف لاتین، اعداد، خط فاصله و underscore باشد. کلاس CSS آن متشکل از نام block بعلاوه دوتا underscore بعلاوه نام element می باشد.

modifier برای تغییر ظاهر، رفتار، و یا وضعیت استفاده میشوند. نام modifier میتواند حروف لاتین، اعداد، خط فاصله و underscore باشد. کلاس CSS آن متشکل از نام block یا نام element بعلاوه دوتا خط فاصله بعلاوه نام modifier می باشد.

 
.byline {}
.byline__name {}
.byline__title {}
.byline__picture {}
.byline--expanded {}
.byline--expanded__bio {}
 

محمد صالح کاتبی نهم اکتبر 2019