هنگامی با CSS و HTML کد نویسی میکنید، وقتی تعداد کدها زیاد میشود. بررسی خطایابی و اصلاح کدها کاری مشکل میباشد. مخصوصا اگر بعد از مدتی به کدها مراجعه کنید و بخواهید کدها را اصلاح کنید. یا اینکه بخواهید کدهایی که فرد دیگری نوشته را تغییر دهید یا اصلاح کنید. در صورتی که از قواعد مشخصی استفاده نکرده باشد کاری زمانبر است. این موضوع برای پروژه های بزرگتر به مراتب بحرانی تر است. برای رفع این مشکلات استاندارد هایی برای کد نویسی تعریف شده که به کمک این استانداردها کد نویسی و توسعه برنامه ها ساده تر شده است. در این مقاله سه تا از قوانین استاندارد نویسی را با هم بررسی میکنیم. و استاندارد معروف BEM را مفصل تر توضیح میدهیم.
OOCSS
BEM
SMACSS
استاندارد نویسی با OOCSS – ( Object-Oriented CSS)
این استاندارد اولین متدولوژی نامگذاری در Css میباشد. که قوانین استاندارد نویسی در آن تعریف شده است. همانطور که از نامش مشخص است شی گرایی در Css است. شی گرایی در Css به کمک کلاس ها صورت میگیرد. هدف آن ایجاد اشیاء با قابلیت استفاده مجدد است. شی گرایی در برنامه نویسی به معنای شکستن کارهای بزرگ به کارهای کوچک میباشد. در این تکنیک اسکلت اصلی نوشته میشود و استایل های بصری در قالب کلاسهای جداگانه روی ساختار اصلی اعمال میشود. این امر توسعه پروژه ها را بسیار ساده تر میکند. فریم ورک Bootsrap بر این پایه کار میکند.
استاندارد نویسی با BEM – (Block, Element, Modifier)
BEM در واقع یک ساختار اصولی برای کد نویسی در پروژه های CSS و HTML میباشد. متد BEM از سر واژه کلمات Element ، Block و Modifier گرفته شده است. این متد توسط تیم Yandex روسیه معرفی شده است. به کمک این استاندارد درک و نحوه استفاده از کدها همچنین توسعه پروژه ها بسیار ساده میشود. در واقع به کمک این روش با استفاده از قوانین نامگذاری برای کلاس ها که در آن تعریف شده است کد نویسی و تحلیل پروژه ساده تر میشود. در این قسمت قصد داریم هر یک از این المان ها و نحوه نامگذاری کلاس ها در هر یک از این بخش ها را با هم بررسی کنیم:
بلاک – Block
به عناصری که به خودی خود معنادار هستند و جدای از قسمت های دیگر طراحی میشود Block میگویند. به عنوان مثال یک پروژه که <body> آن شامل تگ های <header> ، <main> و <footer> است را در نظر بگیرید هریک از این تگ ها که به صورت مستقل هستند و به قسمت های دیگر وابسته نیستند یک بلاک میکویند. مثلا تگ <Li> یک بلاک نیست چون به تگ <Ul> وابسته است و به تنهایی معنا ندارد.
نامگذاری کلاس ها در بلاک
اولین نکته ای که باید به آن توجه کنیم این است که باید نام کلاس معرف چیستی کلاس باشد نه ویژگی کلاس. برای مثال نام کلاس معرف رنگ نوشته یا سایز آن نباشد. نکته بعدی در مورد نامگذاری نام کلاس است که معمولا با حروف کوچک نوشته میشود و در صورتی که بخواهیم از نام های چند کلمه ای استفاده کنیم کلمات را با “-” از هم جدا میکنیم. میتوانیم بلاک های تودرتو داشته باشیم ولی هر قسمت به صورت مستقل عمل میکند. در قسمت CSS نیز قوانینی برای استایل دهی به تگ ها وجود دارد.
از اسم تگ و ID برای استایل دادن استفاده نمیکنیم و همه بلاک ها را با نام کلاسشان استایل دهی میکنیم.
به بلاک اصلی margin و padding اعمال نمیکنیم. دلیل آن این است که یک بلاک نباید محیط اطرافش را تحت تاثیر قرار دهد تا بتوان از آن درقسمت های دیگر پروژه هم استفاده کرد.
با توجه به اینکه بلاک ها مستقل از یکدیگر هستند. هیچگاه از تگ والد آنها برای نامگذاری استفاده نمیکنیم. استفاده از نام کلاس به تنهایی کفایت میکند.
به عنوان مثال برای بلاک ها میتوان به موارد زیر اشاره کرد.
Header , input , menu , checkbox , container
برای درک بهتر مفهوم به مثال زیر دقت کنید:
<header>
<div class="container"></div></header>
Css:
Header .container{}
Css:
Header .container{}
اگر در قسمت CSS به صورت بالا کد بزنیم کار اشتباهی انجام داده ایم چرا که container یک بلاک مستقل است. و به header وابسته نیست استفاده از نام کلاس به تنهایی کفایت میکند.
کد صحیح:
Css:
.container{ }
هدف از قوانین BEM تعریف شده برای استاندارد نویسی این است که بلاک ها به قسمت های دیگر کد وابستگی نداشته باشند. یعنی بتوانیم همین قطعه کد را در قسمت دیگری از پروژه استفاده کنیم بدون اینکه نیاز باشد در کد CSS یا Javascript آن تغییری ایجاد کنیم.
نکته دیگری باید در Block ها به آن دقت کنیم. آن است که میتوانیم بلاک های تو در تو تعریف کنیم ولی همواره باید این نکته را در نظر داشته باشیم که میزان تورفتگی ها را به درستی رعایت کنیم تا کد ما خوانا باشد.
عناصر – Element
عناصری که به بلاک والد خود وابسته هستند را Element میگویند. این عناصر به خودی خود معنای جداگانه ندارند. به عنوان مثال میتوان از تگ Li نام برد این تگ وابسته به تگ Ul است. به عنوان مثالی دیگر فرض کنید در سایت خود تعدادی card دارید. هریک از این قسمت ها که شامل یک عکس ، یک عنوان و یک توضیح میباشد. یک بلاک است. هریک از قسمت های عکس ، عنوان و توضیح یک Element میباشند.
به عنوان مثال هایی برای Element میتواند از موارد زیر نام برد:
menu item, list item, checkbox caption, header title
قوانین نامگذاری کلاس ها در Element ها
برای انتخاب نام Element ها نیز همانند بلاک ها نام کلاس باید معرف چیستی کلاس باشد نه ویژگی آن. کلاس های Element ها را به این صورت نامگذاری میکنیم:
ابتدا نام بلاک دو عدد “_” سپس نام کلاس Element را می‌آوریم. در واقع استفاده از نام بلاک اصلی قبل از نام کلاس Element به نوعی namespace را تعریف میکند. یعنی مشخص میکند هر Element به کدام بلاک وابسته است.
دقت کنید هیچ گاه Element های داخل یک Element دیگر را با نام Element نامگذاری نمیکنیم. بلکه آنها را با نام بلاک والد آنها نامگذاری میکنیم. به عنوان به مثال تگ a در مثال بالا دقت کنید. با اینکه این تگ فرزند تگ Li است. به صورت menu__item__link نامگذاری نشد. برای نامگذاری این کلاس از تک بلاک اصلی استفاده کردیم.
در Element ها نیز مانند Block ها در صورتی که بخواهیم از نامهای چند کلمه ای استفاده کنیم کلمات را با “-” از هم جدا میکنیم.
در قسمت CSS نیز نیازی نیست ابتدا از نام کلاس تگ والد استفاده شود و سپس نام کلاس Element را بیاوریم. تنها نام کلاس Element کفایت میکند.
در کدهای CSS مثال بالا قسمت اول ابتدا از نام بلاک والد استفاده شده که نادرست است. در قسمت بعدی از نام تگ والد استفاده شده که باز هم کار درستی نیست. درست آن این است که تنها از نام کلاس تگ Element استفاده شود.
اصلاح کننده – Modifier
Modifier ها برای تغییر در رفتار یا ظاهر یک Element استفاده میشوند. به عنوان مثال در صورتی که بخواهیم سایز یک Element را تغییر دهیم. از کلاس های modifier استفاده میشود.
به طور کلی Modifier ها بیانگر شکل ظاهری مثل size، معرف حالت مثل disabled یا رفتار Element اینکه چه واکنشی نشان دهد مثل directions_left-top .
به تصویر زیر دقت کنید:
در این مثال بلاک ها با رنگ سبز و Element ها با رنگ آبی و Modifier ها با رنگ قرمز نشان داده شده اند.
مثال هایی از Modifier ها نیر از این جمله اند:
disabled, highlighted, checked, fixed, size big, color yellow
قوانین نامگذاری کلاس ها در Modifier
برای نامگذاری کلاس ها در Modifier از دو عدد “-” استفاده میشود. در واقع ابتدا نام بلاک اصلی بعد دو عدد “_” بعد نام Element بعد از آن از دو عدد “-” سپس نام کلاس Modifier را می‌آوریم.
میتوانید چند کلاس Modifier برای Element ها در نظر بگیریم. تا در حالت های خاص رفتار متفاوت داشته باشند.
نکته مهم: هیچ گاه از نام های فینگلیش برای نامگذاری کلاس ها استفاده نکنید.
در Modifier نیز مانند block و Element در صورتی که بخواهیم از نام های دو کلمه ای استفاده کنیم به کمک “-” کلمات را از هم جدا میکنیم.
استاندارد نویسی با SMACSS – (Scalable and Modular Architecture)
این استاندارد بر پایه 5 اصل یا سطح تعریف شده است. base، layout، module، state و theme در مورد هریک توضیح مختصری میدهیم.
Base:
قوانین Base شامل تعاریف اولیه میشوند. تعریف های مربوط به تعریف فونت اصلی سایز متن رنگ اصلی متن و…
Layout:
قوانین layout برای بخش بندی صفحه به قسمت های کوچکتر در نظر گرفته میشوند. به عنوان مثال محل قرارگیری هدر و فوتر، گرید بندی ها نیز در ایت دسته قرار میگیرند. گرید سیستم های 960 و susy در این دسته قوانین قرار میگیرند.
Module:
قوانین ماژول شامل بخش هایی از طراحی است که قابلیت استفاده مجدد داشته باشند. فرم های ورود به سایت، لیست محصولات، اسلایدرها از این دست قوانین هستند.
State:
این قوانین برای نشان دادن حالت عناصر در حالت های مختلف میباشند. برای مثال حالت نمایش دکمه وقتی در حالت active است. یا مثلا متن روی دکمه اضافه کردن به سبد خرید بعد از افزودن به سبد خرید به حذف از سبد خرید تغییر کند.
Theme:
قوانین Theme به همه پروژه ها مربوط نیست بسته به پروژه دارد. به عنوان مثال ممکن است در قالب خاصی کاربر بتواند صفحه کاربری خود را سفارشی کند.
برای اطلاعات بیشتر در مورد این استاندارد میتوانید به مستندات آن مراجعه کنید.
سخن پایانی
استفاده از هر یک از این متدها در جای خود ارزشمند است. ممکن است تنوانید در پروژه خود همه ی این قوانین را بکار ببرید. یا اینکه بخواهید از ترکیبی از این روش ها در پروژه های خود استفاده کنید. اما مطمئنا بکار گیری این روش ها به خوانایی و توسعه پروژه ها مخصوصا پروژه های بزرگ کمک میکند. بهتر است بدانید استفاده از کدنویسی اصولی علاوه بر خوانایی به سرعت لود شدن صفحه و سئو سایت هم کمک میکند.
تیم برنامه نویسی متخصص وب یار برنامه ها را بر پایه اصول استاندارد جدید پیاده سازی میکند. برای داشتن برنامه اصولی و منظم و سفارش طراحی سایت با متخصصین ما در مجموعه وب یار تماس بگیرید. همچنین برای آموزش طراحی سایت پروژه محور و اصولی میتوانید در کلاس های طراحی سایت مجموعه وب یار شرکت کنید.
تیم وب یار در راستای کمک به پیشرفت شما عزیزان آموزش‌های کاربردی فراوانی در زمینه‌ی طراحی سایت و سئو سایت در اینستاگرام خود قرار داده است.
