انواع متدلوژی سی‌اس‌اس نویسی (CSS Methodologies)

در این مقاله درباره‌ی متدلوژی‌های سی‌اس‌اس نویسی، دلیل وجود آن‌ها و انواع مختلف این متدها صحبت می‌کنیم.

نوشتن و نگه‌داری کد‌های CSS در مقیاس بزرگ می‌تواند بسیار مشکل باشد. یک دلیل آن نبود سیستم محدودسازی (scoping mechanism) پیش‌فرض در CSS می‌باشد. همه چیز در CSS سراسری (Global) است.

این موضوع به این معنا است که هر تغییری که در کد CSS خود اعمال می‌کنید، پتانسیل این را دارد که باعث تغییر در قسمتی غیرمرتبط با هدفی که در رابط کاربری دارد شود. پیش‌پردازنده‌های CSS، مانند Sass، Less و Stylus، با ارائه برخی قابلیت‌ها نوشتن کد CSS را کمی راحت‌تر می‌کنند.

اما پیش‌پردازنده‌ها نیز به طور کامل مشکل مقیاس‌پذیری را در CSS را حل نمی‌کنند. تا زمانی که CSS سیستم محدودسازی داخلی برای وصل کردن هر استایل به قسمتی خاص از HTML را نداشته باشد، ما نیاز به راه حلی برای این موضوع داریم. متدلوژی‌های CSS نویسی جوابی برای این مشکلات است.

بکار بردن یک متدلوژی CSS، حتی اگر توسط خودتان ساخته شده باشد، می‌تواند طراحی و توسعه پروژه‌ی شما را بسیار راحت‌تر کند. هر متدلوژی یک را‌ه‌حل نسبتا متفاوت برای مشکل مقیاس‌پذیری CSS ارا‌ئه می‌دهد. یک متدلوژی شامل راهنمایی‌هایی برای موضوعات زیر است:

● بهترین شیوه‌ها (Best Practices) برای CSS و HTML

● قراردادهای نامگذاری ID و Class

● مرتب و دسته‌بندی کردن استایل‌های CSS

● مرتب‌سازی کدها

هیچکدام از متدلوژی‌های CSS بهترین نیستند. هر کدام از آن‌ها می‌تواند بسته به گروه/پروژه/شخص بهترین انتخاب باشد.

سی‌اس‌اس شیءگرا ( Object-Oriented CSS (OOCSS) )

نیکول سالیوان (Nicole Sullivan) این متدلوژی را در سال 2009 ارائه کرده است. می‌توان گفت این اولین متدلوژی است که برای CSS ارائه شده. OOCSS از جداسازی بدنه از نما حمایت می‌کند.

این متدلوژی تفاوت مشخصی بین محتوا (Content) و دربرگیرنده آن‌ها (Containers) قائل می‌شود. در OOCSS، استایل‌ها تنها با استفاده از انتخاب کننده‌های (Selectors) کلاس نوشته می‌شود.

مثال موافق

استایل عنصر buttonرا می‌توان با استفاده از دو کلاس تنظیم کرد:

‌● .button ---> که ساختار پایه را برای button مشخص می‌کند

‌● .grey-btn ---> رنگ و سایر مشخصات ظاهری را به آن اعمال می‌کند.

‌CSS:

.button { 
box-sizing: border-box;
height: 50px;
width: 100%; 
} 
.grey-btn {
 background: #EEE; 
 border: 1px solid #DDD; 
 box-shadow: rgba(0, 0, 0, 0.5) 1px 1px 3px; 
 color: #555; 
}

‌HTML:

<button class=&quotbutton grey-btn&quot> 

یکی از اهداف OOCSS، کم کردن نوشتن ویژگی‌های تکراری در استایل‌های مختلف است. به بیانی دیگر OOCSS می‌تواند به ما کمک کند تا قانون DRY (Don't repeat yourself) را در کد خود پیاده کنیم. در OOCSS برای رسیدن به این هدف از تعداد زیادی کلاس‌های کوچک، ماژولار و تخصصی استفاده می‌کنیم.

تعداد خیلی کمی از استایل‌ها با استفاده از انتخاب‌کننده‌های نوعی (type selectors) اعمال می‌شود.

مثال مخالف

در OOCSS استفاده از انتخاب‌کننده‌های نسلی (descendant) توصیه نمی‌شود.

/* Descendant selectors are discouraged in OOCSS */ 
.wrapper .blog-post .button { ... }

بدین ترتیب نمایش عناصر HTML شما هیچوقت وابسته به استفاده آن‌ها در یک زمینه مشخص یا ساختار DOM مشخص نیست.

بهترین چیز در OOCSS این است که نویسنده را ملزم به استفاده حداکثری از رفتار آبشاری (cascading) CSS به‌جای جلوگیری از آن با استفاده از انتخاب‌کننده‌های با مختص‌سازی بالا (high-specificity) می‌کند.

نویسنده تشویق می‌شود که در هر زمانی که امکان آن هست از استایل‌هایی که قبلا نوشته شده، به جای از نو نوشتن آن، دوباره استفاده کند. همچنین نویسنده تشویق می‌شود تا استایل‌های موجود را با استفاده از نوشتن کلاس‌های های جدید، به جای عوض کرد استایل‌های قدیمی، ارتقا دهد.

مثال مخالف

تصور کنید می‌خواهید به اولین آیتم در یک لیست غیر شماره‌گذاری شده (unordered list) رنگ متفاوت با بقیه آیتم‌ها بدهید.

‌HTML:

<!-- Counter-example --> 
<ul class=&quotto-do&quot> 
 <li>Combine my CSS files</li>
 <li>Run CSS Lint</li>
 <li>Minify my stylesheet</li> 
</ul>

‌CSS:

/* Counter-example */
.to-do { 
  color: #FFF; background-color: #000; 
} 
.to-do li:first-child {
   color: #FF0000; 
}

مثال موافق

برای ماژولار و منعطف کردن کد CSS می‌توان مثال بالا را بدین ترتیب بازنویسی کرد:

‌HTML:

<!-- OOCSS --> 
<ul class=&quotto-do&quot>
 <li class=&quotfirst-to-do-item&quot>Combine my CSS files</li>
 <li>Run CSS Lint</li>
 <li>Minify my stylesheet</li>
</ul>

‌CSS:

/* OOCSS */
.to-do {
 color: #FFF;
 background-color: #000;
 } 
.first-to-do-item {
 color: #FF0000; 
}

شاید بتوان گفت بزرگترین مشکلی که متد OOCSS دارد این است که کد شما می‌تواند به طرز بدی دارای کلاس‌های زیادی شود که توسعه و مدیریت آن را سخت کند. ولی این بدین معنا نیست که OOCSS ناکارآمد است بلکه نقش یک عقل سلیم را دارد که توسعه CSS در مقیاس بزرگ را قابل تحمل و کمی راحت‌تر می‌کند.

بلوک، عنصر، اصلاح‌کننده ( (BEM) Block, Element, Modifier )

متدلوژی BEM، یک سیستم نام‌گذاری است که توسط تیم توسعه‌دهنده Yandex ارائه شده است. ایده‌ی اصلی پشت اسن سیستم، متمایز کردن کلاس‌های CSS براساس نقشی که ایفا می‌کنند است که این مهم با نام‌گذاری آن‌ها براساس نقش آن‌ها محقق می‌شود.

درواقع BEM تکمیل کننده‌ی OOCSS است چون که OOCSS سیستم نام‌گذاری خاصی ارائه نمی‌کند. در واژه‌شناسی BEM، بلوک یک جزء ماژولار و مستقل از یک رابط کاربری است. یک بلوک می‌تواند از چندین عنصر HTML و یا چندین بلوک دیگر تشکیل شده باشد. هر بلوک یک هدف واحد و مشخص دارد.

به طور مثال اگر شما یک بلوک منوی مسیریابی (navigation) داشته باشید، عناصر آن می‌تواند لینک‌های موجود در منوی مسیریابی باشند که در قالب آیتم‌های لیست (عنصر li) یا لینک‌ها (عنصر a) نمایش داده شوند. اصلاح‌کننده (modifier) یک کلاس CSS است که نمایش پیشفرص یک بلوک یا عنصر را تغییر می‌دهد.

مثال سیستم نام‌گذاری BEM :

‌● .block

‌● .block_modifier

‌● .block__element

‌● .block__element--modifier

مثال مخالف

کد زیر را ساختار یک فرم ثبت‌نام در نظز بگیرید:

<form> 
 <label>Username <input type=&quottext&quot name=&quotusername&quot /></label>
 <label>Password <input type=&quotpassword&quot name=&quotpassword&quot /></label> 
 <button>Sign in</button> 
</form>

مثال موافق

تبدیل مثال بالا به روش BEM :

<form class=&quotloginform loginform_errors&quot>
  <label class=&quotloginform__username loginform__username_error&quot> 
   Username <input type=&quottext&quot name=&quotusername&quot /> 
  </label>
  <label class=&quotloginform__password&quot>
    Password <input type=&quotpassword&quot name=&quotpassword&quot /> 
  </label>
  <button class=&quotloginform__btn loginform__btn_inactive&quot> 
    Sign in 
  </button> 
</form>

کلاس loginformیک بلوک است که از سه عنصر تشکیل شده:

‌● loginform__username ---> گرفتن نام کاربری

‌● loginform__password ---> گرفتن رمزعبور

‌● loginform__btn ---> ثبت فرم

سه اصلاح‌کننده :

‌● loginform__username_error ---> نمایش دادن ارور

‌● loginform__btn_inactive ---> نمایش دادن حالت غیر فعال

‌● loginform_error ---> نمایش دادن ارور

سیستم نام‌گذاری BEM به نویسنده CSS کمک می‌کند تا قوانین OOCSS در مورد استفاده کردن از انتخاب‌کننده‌های غیر نسلی و دارای مختص‌سازی یکسان را رعایت کند.

مثال مخالف

به جای استفاده از انتخاب‌کننده زیر :

.loginform .username .error { ... }

مثال موافق

می‌توان از این انتخاب‌کننده استفاده کرد :

.loginform__username_error { ... }

متد BEM یک سیستم قدرتمند در زمینه نام‌گذازی کلاس‌ها می‌باشد که به طور موفقیت آمیزی باعث متمایز کردن هر کلاس براساس نقش آن می‌شود.

دو انتقادی که بعضی از افراد به متد BEM وارد می‌دانند :

● اسامی کلاس‌ها می‌تواند طولانی و نازیبا شود.

● این متد برای افراد تازه کار و دارای تجربه کم خیلی قابل فهم و درک نیست.

معماری ماژولار و مقیاس‌پذیر سی‌اس‌اس ( Scalable and Modular Architecture for CSS (SMACSS) )

جاناتان اسنوک (Jonathan Snook) کتاب معماری ماژولار و مقیاس‌پذیر سی‌اس‌اس را در سال 2011 منتشر کرد. ایده اصلی در این متدلوژی، نحوه دسته‌بندی استایل‌ها در CSS است.

در این متدلوژی پنج دسته‌بندی داریم:

● Base

استایل‌هایی که ویژیگی‌های پیشفرض هر عنصر موجود در HTML را به صورت تکی تعیین می‌کند. این استایل‌ها معمولا با استفاده از انتخاب‌کننده‌های نوعی تعیین می‌شود:

h1 { font-size: 32px; } 
div { margin: 0 auto; } 
a { color: blue; }

● Layout

استایل‌هایی که مربوط به ساختار کلی و چیدمان صفحه است مانند کانتینرها، گرید و ... . این کلاس‌ها با پیشوند layoutیا l نام‌گذاری می‌شوند:

.layout-sidebar { width: 320px; }
.l-comments { width: 640px; }

● Modules

استایل‌های مربوط به جزءهای (components) قابل استفاده مجدد و ماژولار:

.call-to-action-button { text-transform: uppercase; color: #FFF200; } 
.search-form { display: inline-block; background-color: E1E1E1; }

● State

استایل‌هایی که حالت کنونی چیزی را در رابط کاربری تعیین می‌کنند:

.is-hidden { display: none; } 
.is-highlighted { color: #FF0000; background-color: #F4F0BB; border: 1px solid #CBBD15; }

● Themes

استایل‌هایی که layout و modules را تحت تاثیر قرار می‌دهد و با تنظیمات/اکشن‌های کاربر فعال می‌شود.

متد SMACSS سیستم نام‌گذاری ساده‌تری از BEM را ارائه می‌دهد.

مثال ‌موافق

تصور کنید نام چیدمان (layout) ما l-footer است. یک ماژول فرم جستجو نیز داخل این چیدمان است که قبلا یکبار توسط کاربر ثبت شده:

 <section class=&quotl-footer&quot> 
  <form class=&quotsearch is-submitted&quot> 
    <input type=&quotsearch&quot /> 
    <input type=&quotbutton&quot value=&quotSearch&quot> 
  </form> 
</section>

متد SMACSS نیز استفاده از انتخاب‌کننده‌های نسلی (descendant) را توصیه نمی‌کند. جانتان اسنوک این را با معرفی مفهومی به نام عمق قابل اجرا بودن (depth of applicability) توضیح می‌دهد. این مفهوم تماما در مورد محدود کردن تاثیر CSS بر روی ساختار HTML با استفاده از کلاس‌هایی که دقیقا عنصری که می‌خواهیم به آن استایل بدهیم، است.

چند متدلوژی دیگر

‌● SUIT CSS: ترکیب یک سیستم نام‌گذاری شبیه به BEM با پیش‌پردازنده‌های CSS

‌● Systematic CSS

‌● Atomic Design

‌● DoCSSa

‌● csstyle

ترجمه‌ای از مقاله A Look at Some CSS Methodologies