Css را بهتر بنویسیم

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

• مشکلاتی که جلو رومونه 

خب چند تا از مشکلاتی که در مورد css وجود داره و میتونیم بگین از شایع ترین مشکلات هم هست میشه: 

• تکرار کد مشترک
• پیشوند های مرورگر
• عدم مستند سازی
• استفاده بیش از حد از انتخابگرهای واجد شرایط
• نام کلاس ضعیف

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

یا در نظر بگیرید در جایی یا شرکتی کار میکنید وقتی کد های css رو دل بخواه بنویسید اون وقت چی میشه ؟ به نظرتون دوستان دیگه اتون که روی پروژه کار میکنن خیلی زود میفهممن که کلاس x برای چه کاریه ؟ من که اینطور فکر نمی کنم . من در یک تیم 8 نفره کار میکردم که وظیفه ای چند نفرمون کد نویسی css بود و در طول سال چند نفر میرفتن و چند نفر به تیم ما اضافه میشدن و هر یک از، اعضای تیم درک و آگاهی متفاوتی نسبت به css داشت . یا اگه بخوام بطور واضع تر بگم در هر پروژه بعد از مدتی مثلا 5 سال ، کدهاتون قدیمی میشن یا نسخه css افزایش پیدا میکنه . اون وقت گشت و گذار تو اون کد ها به بدترین عذابتون تبدیل میشه . پس فک کنم درک کرده باشین این چقدر مشکل بزرگیه . 

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

• راه حل ها

همه ما میدونیم که هیچی راحل یا روشی کامل نیست ، اما من اعتقاد دارم که میتونیم روش های برای بهبود کد هامون پیدا کنیم . وقتی دنبال حل این مشکلات بودم ، گوگل منو راهنمایی کرد به سایت CSS Guidelines اثر Harry Roberts که خودش قول داده با خوندن دستور عمل هاش میتونید "کد های css ای بسازید که در سطح بالایی از مدیریت ، انعطاف پذیری ، قابلیت خوانایی بالا قرار داره " . در این مقاله قصد دارم بخش های مهم این سایت رو براتون توضیح بدم . تا اگه با زبان انگلیسی آشناییتی ندارید بتونید از این مقاله استفاده کنید . 

کامنت گذاری 

در CSS Guidelines توجه ویژه ای به کامنت گذاری شده ، و حرفش هم اینکه تمام سعیتون رو بکنید تا اطلاعاتتون رو کامنت سازی کنید که وقتی در آینده بهش نگاه می کنید بفهمید که منظور از ساخت یک کلاس یا یه هر چیزی در کد هاتون چی بوده . خود من برای کامنت گذاری روی هر کلاس یا هر جایی که نیاز بود سعی میکنم طوری کامنت سازی کنم که وقتی 1 یا 5 سال بعد دوباره اومدم سراغ کدهام کاملا بفهمم که اون زمان چه فکری میکردم برای ساخت اون چیز . 

ممکنه شما از پروسه خاصی برای استایل دادن به کامنت های درون css استفاده میکنید یا شایدم استفاده نکنید ، خود من هنوز دارم روی این بخش کار میکنم تا سعی کنم خودم رو به استایل دادن یه شکل عادت بدم . 

شی گرا 

شی گرا یک الگویی برنامه نویسیه که کد های بزرگ رو به قطعات کوچیک و قابل فهم تبدیل میکنه . ویکیپدیا اینطور تعریف میکنه : " برنامه نویسی شیء گرا (OOP) یک الگوی برنامه نویسی است که نشان دهنده مفهوم «اهداف» [...] که معمولا مواردی از کلاس است، [و] استفاده می شود برای تعامل بین طراحی و برنامه . " شی گرا در ویکیپدیا 

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

کد زیر رو ببینید ساختار پوسته از کد جداست :

/**
 * A simple, design-free button object. Extend this object with a `.btn--*` skin
 * class.
 */
.btn {
    display: inline-block;
    padding: 1em 2em;
    vertical-align: middle;
}
 
/**
 * Positive buttons' skin. Extends `.btn`.
 */
.btn--positive {
    background-color: green;
    color: white;
}
 
/**
 * Negative buttons' skin. Extends `.btn`.
 */
.btn--negative {
    background-color: red;
    color: white;
}

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

OK

من ترجیح میدم که از کلاس های متفاوت مثل بالا برای کد های html ام نسبت متدی به اسم @extend استفاده کنم . این کار به من اجازه میده تا دید بیشتری نسبت به کد html آم داشته باشم که چه کلاس های براش استفاده شده . همچنین به این معناست که استفاده از کلاس های  مختلف آزاده و من محدودیتی ندارم. OOCSS به ما کمک میکنه تا مفاهیمی که استفاده میکنیم رو کپسوله کنیم . 

BEM

BEM یا به اصطلاح (Block, Element, Modifier) به معنیه (بلوک، عنصر، تغییردهنده) یکی دیگه از بحث های مهم ماست ، یکی از مثال های مهم از کارایش هم میتونه موتور جستجو یاندکس باشه (یاندکس یک شرکت فناوری اطلاعات روسی است که بزرگترین موتور جستجوی روسیه و هشتمین موتور جستجوی جهان را اداره می کند.).BEM یک روش نامگداری کامله .البته باید صادقانه بگم با تمام جزئیات نیست اما انقدر ساده است که میشه به راحتی از رو اسمش فهمید چیکار میکنه . این نامگذاری مانند اون نامگذاریه معمولیه اما با کمی تفاوت . 

BEM به سه گروه تقسیم مشه : 

Block : ریشه یا پایه یک جزء
Element : یک جزء در داخل یک بلوک
Modifier : تنوع و یا گسترش بلوک (منظور شکل ظاهری)

یک قیاس بسیار اساسی (نه به عنوان مثال):

.dog {}
.dog__tail {}
.dog--small {}

عناصر با دو خط ( __ ) حد و مرزشون مشخص میشه و تغییر شکل با دو خط فاصله از یکدیگر (--) .

در قیاس بالا . ما میبینیم که کلاس .dog بلوک ماست ، ریشه عنصر. سپس کلاس .dog__tail که این هم یک عنصره اما با این تفاوت که بخش کوچکی از عنصر پدرش .dog است . در نهایت کلاس .dog--small که یک تغییر دهنده برای عنصر.dog می باشد . شما همچنین میتونید تغییر دهنده ها رو به عناصر هم اضافه کنید . برای مثال تغییر دهنده .dog__tail--short که برای عنصر dog__tail استفاده میشه . گاهی اوقات ممکنه شما نیاز به ساخت اسم های ترکیبی دیگه ای برای بلوک ها ، عناصر و تغییر دهنده ها داشته باشید. در هر صورت شما با استفاده از یک خط (-) میتونید نام ها رو از هم جدا کنید . 

من زمانی رو که صرف کار با css میکنم از ابزار CSS Preprocessors  برای کد نویسی استفاده میکنم . که واقعا تا الان فوق العاده برای من ارزشمند بوده .  CSS Preprocessors کد های نوشته شده رو میگیره و با استفاده از زبان preprocessed  اونا رو به css قدیمی تبدیل میکنه (در اینجا قدیمی به این معنا نیست که نسخه های قدیمی css بلکه به شکل css در میاره) . زبان preprocessed ، اصلا css نیست و این به این معناست که اونا اصلا محدود به قوانین css نیستن چون همونطور که گفتم اصلا css نیستن . css معمولا بزرگ و کدهای زیادی میخواد اما می میتونیم با استفاده از یکی از زبان های preprocessed کارمون رو راحت تر انجام بدیم . 

برای مثال : یک چیز که واقعا در css نیازه متغیره . شما فرض کنید که 1000 خط css نوشتین و تو جاهایی مختلف ، مثلا به فونت ها اندازه دادین خب در نظر بگیرین که بعدا ممکنه نظرتون تغییر کنه و بخواین اندازه فونت رو تغییر بدین . اگه از خود css استفاده کنید متاسفانه باید 1000 خط کد رو چک کنید و خط به خط فونت رو تغییر بدین اما فکر کنین از زبان preprocessed و برای اندازه فونت یک متغیر تعریف کنید و در هر کجا که اندازه فونت هست اون متغییر رو بدید . خب حالا اگه زمانی تصمیم به تغییر اندازه فونت گرفتین کافیه فقط یه جا اون متغییر رو تغییر بدید نه 1000 خط کد . البته خیلی ویژگی های دیگه برای preprocessed وجود داره و متغیر ها فقط یکی از ویژگی اوناست که بهتون گفتم . 

این کاملا مشخصه که حتما لزومی نداره که شما از یک زبان preprocessed استفاده کنید . ولی به این فکر کنید که بعد از مدتی مثل مثال بالا احتیاج به تغییر داشته باشین اون وقت کارتون دشوار نمیشه اگه از زبان preprocessed برای css استفاده نکنید ؟ حالا دیگه از قابلیت انعطاف پذیری و خوانایی که این زبان ها بهمون میدن بگذریم . 

چندین زبان preprocessors وجود داره اما من تنها دو تا از اونا رو میشناسم که واقعا کارایی دارن و خیلیا ازش استفاده میکنن اسم این دوتا هم LESS و SASS . اگه نظر منو میخواین یکی رو انتخاب کنن و باهاش کد css بنویسین و با css معمولی خیلی کمتر کار کنید . 

• نتیجه گیری 

تمام حرف های ما اینجا فقط این بوده ، زمانی که شما کد نویسی css تون رو بهتر کنید ، همه چیز به دنبالش بهتر میشه . کسی به من اخیرا در یک پست در مورد اینکه "استفاده از معناشناسی در css لازم نیست"  گفت ، کاملا با نظر من مخالفه و css صد در صد به معنا شناسی نیاز داره دلایلشم که بالا گفتیم . شما با استفاده از OOCSS و BEM این قابلیت رو دارین که به کدهای css تون قابلیت معناشناسی بالایی بدین . البته این به معنی نیست که شما دیگه خیلی خیلی خیلی راحت میشن اما میتونم بگم 90% درصد از مشکلاتتون رفع میشه . اگه شما این دو روش یعنی OOCSS و BEM رو با Preprocessors CSS ترکیب کنید شما دارای کد های میشین با قابلیت خوانایی بالا ، انعطاف پذیری بالا در کل همه چیزتون عالی میشه . و اینی که میگم عالی ، شما میتونید با امتحانش تو پروژه هاتون به راحتی درک کنید . ما همه این نکته ها  رو گفتیم که با استفاده از اسم های با معنی میتونیم کلاس های با معنی داشته باشیم و این تو خوندن کد های html هم بهمون کمک میکنه.

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