فرار از سردرگمی در CSS: متدولوژی های CSS

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

زبان های HTML و CSS برای طراح هاست

یه برداشت غلطی وجود داره که میگه CSS و HTML جز مقوله برنامه نویسی نیست و دلیل کسایی که این حرفو میزنن اینه که بیشتر در حیطه طراحی هست و نه برنامه نویسی. چون با چندتا کد رنگ دادن و پوزیشن همه چی حله. خب اگه با این ذهنیت صحبت کنیم، پس برنامه نویسی جاوا اسکریپت و پی اچ پی و ... همه اش چهارتا خط کد کپی شده از StackOverFlow بیشتر نیست. به قول اهل فن، برنامه نویسی اون نیست که کدت روی کامپیوتر کار کنه، چون بالاخره کار میکنه! برنامه نویس حرفه ای اون هست که کدی بنویسه که:

• برای بقیه قابل درک باشه
• کد تکراری نداشته باشه
• امکان توسعه راحت داشته باشه
• ایراد احتمالی سریعتر پیدا بشه

حالا بر میگردیم به اول صحبتهامون... اینکه کد CSS رو به سختی میتونی ویرایش کنی دلیلش اینه که هیچ یک از اصول برنامه نویسی درش رعایت نشده و همینطور الله بختکی از بالا استایل داده شده رفته جلو.

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

متدولوژی های CSS

متدهای زیادی برای توسعه CSS وجود داره. اینجا اسم چندتاشون رو میاریم، از بین اونا بعضی هاشونو توضیح میدیم و در مورد یکیشون مثال میزنیم. متدهای متداول CSS اینا هستند:

• متد OOCSS (Object orientated CSS)
• متد BEM (Block element modifier)
• متد SMACSS (Scalable Modular architecture)
• متد RSCSS (Reasonable System for CSS Stylesheet Structure)
• متد ITCSS (Inverted Triangle CSS)
• متد Atomic CSS

متد OOCSS (Object orientated CSS)

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

در این متد، استایل بلوک های اصلی که یک مفهوم کلی رو تعریف میکنن با سلکتور تک کلاس (Single Class Selector) تعریف میشن. با این روش دیگه مشکل Specificity در طول مسیر برامون پیش نمیاد. علاوه بر این، محتوا رو از کانتینر محتوا (Container) جدا میکنه و در نهایت اون شیئ دیگه به محل نمایش اون وابسته نیست، بلکه به نوع خود شیئ وابسته است.

متد BEM (Block element modifier)

این متد برنامه نویس رو به سمت تقسیم بندی صفحه به بلوک، المان های زیر مجموعه بلوک و در نهایت ظاهر بلوک هدایت میکنه. این سه بخش با Block، Element و Modifier نام گذاری میشن. تعریف CSS با تک سلکتور بلوک اصلی شروع میشه. در ادامه، نام بلوک به همراه دو تا Underscore و در ادامه نام المان زیر مجموعه میاد. در نهایت هم برای تعریف رنگ و ظاهر اسم بلوک اصلی، به همراه دو تا Underscore و بعد اسم المان زیر مجموعه و در ادامه یه دونه Underscore و اسم خصیصه میاد. گاهی هم به جای تک Underscore دوم، دو تا Hyphen میاد.

اما یه نکته اینه که چطوری بلوک رو از المان تفکیک بدیم؟

شیئی که بتونه بدون نیاز به وارث خودش موجودیت داشته باشه بلوک هست. در غیر اینصورت المانه

برای مثال در یک لیست UL، می دونیم LI بدون UL معنایی نداره. پس LI نمیتونه بلاک باشه

یه جور دیگه: بلوک ها میتونن دارای بلوک و المان های تودرتو باشن اما المان ها این امکان رو ندارن.

روش نامگذاری این متد در تشخیص رفتار یک المان یا بلوک خیلی کمک میکنه. بنابراین شما با نگاه به کد CSS به راحتی میتونید بفهمید اون کد چه کاری انجام میده.

متد SMACSS (Scalable Modular architecture)

این متد به معنای واقعی اصل DRY (Don't Repeat Yourself) رو رعایت میکنه. متد اسماکس، بیشتر از اینکه یه فریم ورک خشک و غیرقابل انعطاف براتون ایجاد کنه، یه راهنمای مسیر هست. این متد، مثه یک راهنمای کاربری کمک میکنه تا فرایند طراحی خودتون رو بازنگری کنید.

به طور کلی، این متد روی 5 نوع ساختار اصلی تمرکز داره تا بتونه ساختار CSS شما رو نظم بده. این ساختارها شامل: Base، Layout، Module، State و Theme هستن.

ساختار Base:

استایل هایی که مربوط به المان های اصلی میشن و تعاریف کلی رو مثل رنگ فونت و نوع فونت یا استایل لینک رو تعیین میکنن در این دسته قرار میگیرن:

body { font-family: sans-serif; }
p { font-size: 1rem; }
a { text-decoration: none; }

ساختار Layout:

این استایل برای تعریف کانتینرهایی هستنن که به خودی خود دارای مفهومی نیستن و بیشتر محل قرارگیری المان های داخلی خودشون و قرارگیری در کل HTML مثل padding و positioning رو تعیین میکنن. این استایل ها با حرف l به معنی layout به همراه Hyphen و یه اسم میان:

.l-container { max-width: 58rem; margin-left: auto; margin-right: auto; }
.l-horizontal-padding { padding: 0 1em; }

ساختار Module:
و اما ساختار Module که بخش اعظمی از استایل ها رو به خودش اختصاص میده. در این ساختار سعی میکنیم استایل های هر بلوک از HTML رو به صورت یک جزء مستقل و در قالب محتوای سمانتیک (Semantic) تعریف کنیم:

.menu { list-style: none; }
// child element of menu
.menu-item { float: left; padding: 1em; }

ساختار State:

همونطور که از اسمش مشخصه به وضعیت یک المان برمیگرده. این استایل ها برای تغییر وضعیت المان بوسیله کدهای جاوا اسکریپت هست. برای مثال مخفی کردن یک المان و یا اکتیو شدن اون. روش نامگذاری این استایل ها به شکل نوشتن کلمه is بهمراه Hyphen و اسم استایل هست:

.is-hidden { position: absolute; left: -999rem; }
.is-visible { position: static; }

ساختار Theme:

هدف اصلی این استایل، ایجاد تغییر در ظاهر یک المان، متفاوت از المان های دیگه صفحه هست. برای مثال، پس زمینه یا فونت یه المان با بقیه المان ها ممکنه فرق کنه که به این روش انجام میشه.

ساختار فولدر در SMACSS

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

base/

layouts/

modules/

states/

app.scss

در هر فولدر یه فایل CSS وجود داره که تعاریف مربوط به همون استایل درش ذخیره میشه

کدام متدولوژی رو استفاده کنیم؟

بسته به اینکه پروژه شما برای چه محیطی باشه و چقدر پروژه می تونه بزرگ باشه، نوع متدولوژی میتونه متفاوت باشه. اینکه بگیم یک متد برتر از یک متد دیگه هست حرف درستی نیست. برتری یک متد در محل استفاده اون یا همون Context اون تعیین میشه.

پیشنهاد میکنم متدولوژی های مختلف رو بررس کنید و اونی که باهاش راحت تر هستین و برای پروژه شما مناسب تره انتخاب کنید.