استاندارد های نامگذاری css

استاندارد های نامگذاری css نوشته شده در   css ۱ اردیبهشت , ۱۳۹۸ توسط  عباس حسینی

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

Object-Oriented CSS – OOCSS

اولین متدولوژی نامگذاری css روش oocss میباشد که هدف آن جلوگیری از تکرار کد میباشد و روش استفاده از آن به این شکل میباشد که ویژگی های یک المان را در قالب کلاس های مختلف پیاده سازی میکنند تا در بخش هایی دیگری از کد نیز مورد استفاده قرار بگیرد

مثلا برای ساخت یک دکمه رنگی کلاس دکمه و رنگ به صورت مجزا در نظر گرفته میشود، همانطور که در کد زیر مشاهده میکنید که کلاس green علاوه بر دکمه برای پاپ آپ نیز مورد استفاده قرار گرفته و با این کار از تکرار کد جلوگیری شده است


.btn {
    border : 1px solid #ddd;
    font-size: 10px
}

.green {
    background : green
} 

Block, Element, Modifier – BEM

روش نامگذاری BEM مخفف کلمات Block, Element, Modifier میباشد و علت این نامگذاری این میباشد که در این روش نامگذاری را ، به ازای هر کامپوننت بصورت خاص انجام میدهند بطوریکه block نماینده یک کامپوننت و element نماینده یک عضو از آن کامپوننت و modifier یک ویژگی از یکی از عناصر آن کامپوننت میباشد

مثلا یک فرم ورود را در نظر بگیرد خود فرم یک کامپوننت محسوب شده پس بلاک ما loginform نام میگیرد که خود دارای دو بخش نام کاربری و پسورد میباشد که به ترتیب username و password نام میگیرند و هنگام پر کردن فرم هر کدام از این دو المان میتواند دارای خطا باشد یا صحیح پر شوند پس دو حالت error و success را میتوانند داشته باشند

حال با توجه به توضیحات بالا کد css آن با رعایت الگوی BEM به شکل زیر میباشد


.loginform {}
.loginform-username{}
.loginform-password{}
.loginform-username--sucesss{}
.loginform-password--success{}
.loginform-username--error{}
.loginform-password--error{}

Scalable and Modular Architecture – SMACSS

نکته کلیدی در این روش نامگذاری دسته بندی کردن کد های css میباشد مثلا style های یک پروژه را میتوان به بخش های کوچکتری تقسیم کرد که هر یک وظیفه ای خاص به عهده دارند که استفاده از این روش به ما کمک میکند هنگام تغییر یک بخش دقیقا به استایل های همان بخش مراجعه کنیم و این باعث یک نظم در کل پروژه میشود

برای درک بهتر این روش به کد زیر توجه کنید که چطور بخش های مختلف یک صفحه را تفیکیک کرده است


/* Base */
body {}
h1 {}
ul {}
a {}

/* Layout */
.header {}
.sidebar {}
.content {}
.footer {}

/* Modules */
.search-from {}
.slider {}
.comments {}
.button {}
.banner {}

/* States */
.highlited {}
.hidden {}
.opened {}
.closed {}
.animated{}