انواع متدلوژی در css

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

فهرست مطالب
متدلوژی چیست؟
کامنت گذاری
متدلوژی BEM
متدلوژی OOCSS

متدلوژی چیست؟

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

کامنت گذاری

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

متدلوژی BEM

متدلوژی BEM مخفف سه کلمه Block Element Modifier است. روشی کامپوننت محور برای توسعه فرانت اند می باشد. در این متدلوژی کلاس ها به 3 دسته تقسیم می شوند و استفاده از آی دی و نام تگ ها ممنوع می باشد و تمامی عناصر با استفاده از کلاس ها استایل دهی می شوند. در نام گذاری کلاس ها از حروف لاتین کوچک و اعداد و برای جداکردن کلمات از یک خط فاصله استفاده می شود

بلاک (Block): کامپوننت مستقل در صفحه که به تنهایی معنادار می باشد و قابلیت استفاده مجدد را دارد. بلاک ها می توانند درون یکیدیگر قرار داشته باشند و حتی با هم تعامل داشته باشند اما نباید از یکدیگر تاثیر بگیرند. نام بلاگ باید به گونه ای انتخاب شود که هدف آن را توصیف کند.

<form class=&quot&quotsearch-form&quot > </form>

عنصر (ٍElement): کامپوننتی که درون کامپوننت بلاک قرار می گیرد. عنصر ها بخش هایی از بلاک هستند که به صورت مستقل معنا ندارند. نام عنصر ها از نام بلاک و دو Underscore (__) و نام عنصر تشکیل می شوند.

<form class=&quot&quotsearch-form&quot >
    <input class=&quotsearch-form__input&quot />
</form>

پیراینده (Modifier): ماهیتی است که ظاهر، حالت و رفتار یک بلاک یا عنصر را مشخص می کند. نام پیراینده از نام بلاک یا عنصر و یک Underscore (_) و نام پیراینده تشکیل می شود.(توجه در بعضی موارد برای نام گذاری پیراینده از دو تا خط فاصله به جای یک Underscore استفاده می شود)

.search-form__button_disabled
 .search-form__button_size_s

متدلوژی OOCSS

در این متدلوژی از مفهوم شئ گرایی الگو گرفته شده است. در شئ گرایی ما کارهای بزرگ را به چند کار کوچک تر تقسیم می کنیم. حال این کار را در css انجام می دهیم. مهمترین نکته در این متدلوژی طرز فکر ما در توسعه و جداسازی ساختار عناصر از استایل ها می باشد. متدلوژی OOCSS یک الگو (پارادایم) برنامه نویسی است. OOCSS مخفف Object Oriented CSS است، درواقع همان مفهوم برنامه نویسی Object Oriented دارد. در OOCSS تمرکز برروی کامپوننت های منعطف، ماژولار، و قابل تعویض است که تنها یک کار را انجام میدهند. درواقع در OOCSS کامپوننت ها تنها یک وظیفه دارند و از یکدیگر مستقل هستند.

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

علاوه بر متدلوژی های ذکر شده در بالا، متدلوژی های دیگری مانند SMACSS و Atomic CSS و ITCSS و SUIT CSS وجود دارند که می توان از آن ها استفاده کرد. علاوه بر این متلوژی های آماده شده، شما می توانید متدلوژی خاصی را برای خود تنظیم نمائید و از آن استفاده نمائید. البته یادتان نرود متدلوژی خود را مستند کنید تا همکاران یا افراد دیگر بتواند از کدهای شما استفاده نمایند.

امیدوارم این مقاله براتون مفید بوده باشد.