همه چیز درباره استاندارد 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 صفحه هست و اگر خواستید بخونیدش میتونید از اینجا کتاب رو دانلود کنید.

امیدوارم که این مطلب به دردتون خورده باشه ، نظرات خودتون رو با من به اشتراک بزارید و برای حمایت از من لایک یادتون نره