همه چیز درباره استاندارد SMACSS در توسعه CSS

اکثر زبان های برنامه نویسی مثل PHP و یا python دارای style guide هستند ، اگر نمیدونید style guide چیه باید بگم که یک سری قوانین و مقررات هستن که باعث میشه کد ها منظم تر بشن و علاوه بر این هر برنامه نویسی ساز خودش رو نزنه و اینطوری نباشه که هر کی از جاش بلند شد بگه این سبک کد نویسی منه !به طور دقیق تر style guide ها یک سری قوانین هستن که ساختار کد های مارو منسجم تر و یکپارچه میکنن مثل PSR-2 style guide که برای PHP هست یا PEP8 که برای پایتون هست ، حالا جالب اینجاست که CSS هم یک Style guide داره به نام SMACSS که به صورت "اسمکس" خونده میشه .بیاد با هم ببینیم که SMACSS چه چیز هایی رو به ما میگه و ما چه چیز هایی رو باید تو کد هامون رعایت کنیم ایده پشت اسمکس این هست که شما کد های css تون رو به 5 قسمت زیر بشکونید :Base , layout , modules , state , themeپایه یا Base :شما میتونید برای پروژتون یه فایل درست کنید که مقادیر اولیه المان هاتون رو تغییر بدید ، البته نه صرفا المان ، میتونید مقادیر اولیه selector ها ، pseudo-selector ، children selector و یا هر چیز دیگه ای رو تغییر بدید مثل کد زیر :html, body, form { margin: 0; padding: 0; } ;input[type=text] { border: 1px solid #999; }; a { color: #039; }; a:hover { color: #03C; };لایه بندی یا layout :در لایه بندی استایل هایی قرار میگیرند که مربوط به لایه بندی سایتتون هستن مثل navbar , footer , articles , aside و یا هر چیز دیگه .مثلا شما میتونید برای اسم گزاری این بخش ها ، اول هر اسم از "L-" استفاده کنید که در واقع مخفف کلمه layout هست و این باعث میشه شما متوجه بشید این بخش مربوط به layout شما هست مثل کلاس زیر :.l-full-width { width: 100%; } .l-half-width { width: 50%;}ماژول ها یا Moduls :ماژول ها پارت هایی هستند که مجدد قابل استفاده هستند ، مثل لیست محصولات یا لیست مقالات و ...اسمکس یه قانون برای نام گزاری ماژول ها داره ، همونطور که میدونید اصولا ماژول ها از پارت های زیادی تشکیل شدن ، برای مثال ما یک کارد article داریم و اسم تگ پدر article هست و داخل این تگ چندین بخش دیگه وجود داره مثل title ، اسمکس میگه برای نام گزاری title ، ابتدا اسم پدر رو بنویسید بعد با دوتا dash "--" اون رو از title جدا کنید یعنی به صورت زیر :.article--titleنکته : اگر مقاله قبلی من در رابطه با استاندارد نام گزاری BEM رو خونده باشید متوجه میشید که این سبک از نام گزاری اصلا شبیه BEM نیست و احتمالا این سوال براتون پیش بیاد که پس چی کار کنیم ؟ از این استفاده کنیم یا از BEM ؟اگر مقاله استاندارد نام گزاری BEM رو نخوندید میتونید از اینجا یه سری بهش بزنید .در جواب سوالتون باید بگم که اگر توی پروژه تنها هستید ، هر کدوم رو که دوست دارید انتخاب کنید و اگر توی یک تیم هستید ، با تیمتون به توافق برسید که بهتر هست از کدوم استفده کنید ، من شخصا BEM رو ترجیه میدم .وضعیت یا state :وضعیت یا state درواقع نشون میده که ماژول های ما توی موقعیت های مختلف چجوری باید باشند .بزارید یه خورده دقیق تر توضیح بدمبرای مثال یکی از روش های درست کردن modal توی javascript این هست که ما یک کلاس درست کنیم به اسم active.active{ display : block; }بعد با استفاده از جاوااسکریپ بگیم وقتی کاربر روی یک دکمه خاص کلیک کرد کلاس active به modal ما اضافه بشه و modal ما روی صفحه به نمایش در بیاد .توی مثال بالا کلاس active در واقع یک state هست که باعث میشه یک المالن تغییر وضعیت پیدا کنه.معمولا state ها بیشتر توی javascript به کار میان .موضوع یا theme :به زبان ساده ، مقادیری مثل رنگ ، سایه ها ، border ها ، شکل های مختلف و هر چیزی که مربوط به برند شما بشه ، theme هستبعضی از وب سایت ها هیچ them خاصی ندارند .توجه کنید که theme سایت شما صرفا برای زیبایی سایت به کار میره و اگر فایل استایل theme رو از سایت حذف کنید نباید به هم ریختگی خاصی تو سایت دیده بشه و سایت شما بدون theme هم باید به درستی کار کنه سخن پایانیدر کل استفاده از این style guide میتونه برای منسجم کردن سایت خیلی مفید باشه ، و نکته مهم تر اینجاست که اگر پس فردا روز یکی دیگه خواست کد های شمارو بررسی که و تغییراتی رو اعمال کنه به راحتی بتونه این کار رو انجام بده .چیز هایی که داخل این نوشته خوندید مطالب مختصری بود از کتاب : Scalable and modular architecture for cssاین کتاب حدود 112 صفحه هست و اگر خواستید بخونیدش میتونید از اینجا کتاب رو دانلود کنید.امیدوارم که این مطلب به دردتون خورده باشه ، نظرات خودتون رو با من به اشتراک بزارید و برای حمایت از من لایک یادتون نره