سازماندهی CSS — آموزش CSS (بخش بیستم)

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

• دیباگ کردن CSS — آموزش CSS (بخش نوزدهم)

نکاتی برای حفظ انسجام CSS

در این بخش برخی پیشنهادهای کلی برای حفظ انسجام و سازماندهی CSS ارائه شده است.

فیلم آموزش امت Emmet – کدنویسی سریع HTML و CSS در فرادرس

کلیک کنید

آیا پروژه شما راهنمای استایل کدنویسی دارد؟

اگر با یک تیم روی یک پروژه موجود کار می‌کنید، نخستین چیزی که باید بررسی کنید این است که آیا این پروژه هیچ راهنمای استایل برای CSS دارد یا نه. راهنمای استایل تیم همواره باید بر ترجیح‌های شخصی شما اولویت داشته باشد. در اغلب موارد هیچ روش درست یا نادرستی برای انجام کارها وجود ندارد، اما حظ انسجام کد حائز اهمیت بالایی است. به عنوان نمونه به بررسی راهنماهای CSS برای مثال‌های کد MDN در این صفحه (+) بپردازید.

حفظ انسجام

اگر مجبور به تعیین قواعدی برای پروژه هستید یا به تنهایی کار می‌کنید، در این صورت مهمترین کاری که باید انجام دهید این است که همه چیز را به طرز منسجمی حفظ کنید. انسجام را می‌توان به روش‌های مختلفی از قبیل استفاده از روش‌های نامگذاری یکسان برای کلاس‌ها، انتخاب یک روش واحد برای توصیف رنگ یا نگهداری قالب‌بندی انسجام به دست آورد. برای نمونه انتخاب کنید که می‌خواهید از tab یا space برای تورفتگی کد استفاده کنید و اگر از اسپیس استفاده می‌کنید چند بار آن را می‌زنید.

داشتن مجموعه قواعد همواره موجب کاهش مقدار سربار ذهنی در زمان نوشتن CSS می‌شود، چون برخی از تصمیم‌ها از قبل گرفته شده‌اند.

قالب‌بندی CSS به روش خوانا

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

1.box { background-color: #567895; }
2h2 { background-color: black; color: white; }

برخی توسعه‌دهندگان دیگر ترجیح می‌دهند که همه موارد را در یک خط جدید بنویسند:

1.box {
2  background-color: #567895;
3}
4
5h2 {
6  background-color: black;
7  color: white;
8}

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

نوشتن توضیح برای CSS

افزودن توضیح به CSS کمک می‌کند افراد بعدی که روی فایل شما کار می‌کنند، آن را بهتر درک کنند. همچنین درصورتی‌که در آینده دوباره به سراغ پروژه خود بروید، بهتر می‌توانید با آن ارتباط بگیرید.

1/* This is a CSS comment
2It can be broken onto multiple lines. */

یک نکته مناسب هم این است که بین بخش‌های منطقی استایل‌شیت نیز توضیحاتی اضافه کنید تا یافتن بخش‌های مختلف CSS در زمانی که به دنبال چیزی می‌گردید آسان‌تر باشد. همچنین بدین ترتیب می‌توانید به دنبال آن توضیح به خصوص بگردید تا مستقیماً به بخش خاصی از سند بروید. اگر از یک رشته استفاده کنید که در CSS وجود ندارد می‌توانید با جستجو کردن به دنبال آن در بخش‌های مختلف سند حرکت کنید. مثلاً در کد زیر ما از || به این منظور استفاده کرده‌ایم.

1/* || General styles */
2
3...
4
5/* || Typography */
6
7...
8
9/* || Header and Main Navigation */
10
11...

البته لزومی به نوشتن توضیح برای تک‌تک خط‌های CSS وجود ندارد، چون اغلب بخش‌های آن خودگویا هستند. بخش‌های که نیاز به توضیح دارند شامل مواردی هستند که به دلیل معینی تصمیم خاصی را اتخاذ کرده‌اید. برای مثال ممکن است از یک مشخصه CSS به روشی خاص استفاده کرده باشید تا مشکل ناسازگاری با مرورگرهای قدیمی را حل کنید:

1.box {
2  background-color: red; /* fallback for older browsers that don't support gradients */
3  background-image: linear-gradient(to right, #ff0000, #aa0000);
4}

ممکن است از یک راهنما برای رسیدن به یک حالت خاص بهره گرفته باشید و CSS چندان بدیهی نباشد. در این حالت می‌توانید URL آن راهنما را در بخش توضیحات کد درج کنید. ممکن است در صورتی که پس از سال‌ها به کد خود مراجعه کنید، در مورد این که چرا به آن شیوه خاص عمل کرده‌اید دچار سردرگمی شوید و بدین ترتیب می‌توانید متوجه شوید که بر اساس راهنمایی آن وب‌سایت خاص این گونه عمل کرده‌اید.

ایجاد بخش‌های منطقی در استایل‌شیت

به عنوان یک رویه مناسب بهتر است ابتدا استایل‌بندی‌های مشترک را در استایل‌شیت بیاورید. این بدان معنی است که همه استایل‌هایی که به طور کلی اعمال می‌شوند (مگر این که کار خاصی با یک عنصر داشته باشید) ابتدا می‌آیند. به طور معمول ابتدا قواعد زیر را اعمال می‌کنیم:

• body
• p
• h1, h2, h3, h4, h5
• ul  و ol
• مشخصه‌های table
• لینک‌ها

در این بخش از استایل‌شیت، استایل‌بندی پیش‌فرض را برای نوع سایت ارائه می‌کنیم و استایل پیش‌فرض را برای جداول داده و لیست‌ها و غیره می‌نویسیم.

1/* || GENERAL STYLES */
2
3body { ... }
4
5h1, h2, h3, h4 { ... }
6
7ul { ... }
8
9blockquote { ... }

پس از این بخش می‌توانیم چند کلاس کاربردی تعریف کنیم. برای نمونه کلاسی تعریف می‌کنیم که استایل لیست پیش‌فرض را برای لیست‌هایی که می‌خواهیم به صورت آیتم‌های flex یا روش دیگری نمایش پیدا کنند، حذف می‌کند. اگر چند مورد است که می‌دانید قرار است روی عناصر زیادی اعمال شوند، می‌توانید آن‌ها را در این بخش بیاورید:

1/* || UTILITIES */
2
3.nobullets {
4  list-style: none;
5  margin: 0;
6  padding: 0;
7}
8
9...

سپس می‌توانیم هر چیزی که روی سایت استفاده خواهد شد را بیاوریم. این موارد می‌توانند شامل چیزهایی مانند لی‌آوت ابتدایی صفحه، هدر، استایل‌بندی ناوبری و مواردی از این دست باشد.

1/* || SITEWIDE */
2
3.main-nav { ... }
4
5.logo { ... }

در نهایت CSS را برای موارد خاصی که بر اساس زمینه، صفحه یا حتی کامپوننت مورد استفاده تغییر می‌یابند، می‌آوریم.

1/* || STORE PAGES */
2
3.product-listing { ... }
4
5.product-box { ... }

با استفاده از چنین ترتیبی، دست کم ایده‌ای داریم که برای گشتن به دنبال چیزی که می‌خواهیم تغییر دهیم، باید در کدام بخش از استایل‌شیت بگردیم.

خودداری از سلکتورهای خیلی خاص

اگر سلکتورهای خیلی خاصی ایجاد کنید، متوجه خواهید شد که مجبور هستید بخش‌های زیادی از CSS را کپی کنید تا قواعد مشابه را روی عنصر دیگری اعمال کنید. برای نمونه ممکن است چیزی مانند یک سلکتور پایه داشته باشید که قاعده‌ای را روی یک <p> با کلاس box درون یک <article> با کلاس main اعمال کند.

1article.main p.box {
2  border: 1px solid #ccc;
3}

در این صورت اگر بخواهید همین قاعده را در مورد چیزی خارج از main اعمال کنید یا بخواهید آن را روی چیزی به جز <p> اعمال کنید، باید سلکتور دیگری به این قواعد اضافه کنید و یا کلاً مجموعه قواعد جدیدی بنویسید. به جای این کار می‌توانید یک کلاس به نام box ایجاد کرده و آن را هر جایی که دوست دارید اعمال کنید.

1.box {
2  border: 1px solid #ccc;
3}

مواردی وجود دارند که وقتی چیزی را خاص‌تر می‌سازیم، معنی پیدا می‌کند. اما این حالت به طور کلی یک استثنا است و رویه معمول همان است که اشاره کردیم.

تقسیم استایل‌شیت قدیمی به چند استایل‌شیت کوچک‌تر

به طور خاص در مواردی که استایل‌های بسیار متفاوتی برای بخش‌های متمایز سایت داشته باشیم، باید یک استایل‌شیت خاص طراحی کنیم که شامل همه قواعد سراسری باشد و سپس چند استایل‌شیت کوچک‌تر طراحی کنیم که شامل قواعد خاص مورد نیاز برای آن بخش‌ها باشد. می‌توان از یک صفحه به چند استایل‌شیت لینک داد و زمانی که قواعد نرمال آبشاری اعمال شوند، قواعدی که در استایل‌شیت‌های متأخرتر می‌آیند، پس از قواعد استایل‌شیت‌های جلوتر اعمال خواهند شد.

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

این کار موجب می‌شود که سازماندهی CSS آسان‌تر شود و همچنین در حالتی که چند نفر روی CSS کار می‌کنند احتمال این که افراد همزمان لازم باشد روی یک استایل‌شیت کار کنند کاهش می‌یابد و مشکلات تداخل در کنترل سورس کاهش می‌یابد.

معرفی برخی ابزارهای مفید دیگر

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

فیلم آموزش طراحی وب با سی اس اس CSS3 – تکمیلی در فرادرس

کلیک کنید

روش‌شناسی‌های CSS

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

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

رویکرد OOCSS

اغلب رویکردهایی که با آن‌ها مواجه می‌شویم به نحوی از مفهوم «CSS شیءگرا» (OOCSS) استفاده می‌کنند این رویکرد برحسب تلاش‌های «نیکول سالیوان» (Nicole Sullivan) محبوب شده است. ایده اساسی OOCSS این است که CSS را از اشیای با قابلیت استفاده مجدد که ممکن است در هر جایی در وب‌سایت مورد استفاده قرار گیرند جدا کنیم. مثال استاندارد OOCSS الگویی است که در «شیء مدیا» (+) توضیح داده شده است. این الگو برای تصاویر، ویدئوها یا دیگر عناصر از یک سو اندازه ثابتی دارد و در دیگر سو محتوای انعطاف‌پذیر قرار دارد. این الگویی است که در همه وب‌سایت‌ها برای توضیح، فهرست بندی و موارد مشابه می‌بینیم.

اگر از رویکرد OOCSS استفاده نمی‌کنید، می‌توانید CSS سفارشی برای مکان‌های مختلف که این الگو مورد استفاده قرار می‌گیرد، بسازید. برای نمونه می‌توانید کلاسی به نام comment بسازید که بخش‌های توضیح را پوشش دهد، سپس کلاسی به نام list-item با تقریباً همان قواعد کلاس کامنت داشته باشید که برخی تفاوت‌های جزئی با آن داشته باشد. تفاوت بین این دو بخش این است که آیتم‌های لیست یک لبه پایینی دارند و تصاویر در کامنت‌ها دارای حاشیه هستند، در حالی که تصاویر لیست آیتم چنین خصوصیتی را ندارند.

1.comment {
2  display: grid;
3  grid-template-columns: 1fr 3fr;
4}
5
6.comment img {
7  border: 1px solid grey;
8}
9
10.comment .content {
11  font-size: .8rem;
12}
13
14.list-item {
15  display: grid;
16  grid-template-columns: 1fr 3fr;
17  border-bottom: 1px solid grey;
18}
19
20.list-item .content {
21  font-size: .8rem;
22}

در رویکرد OOCSS می‌توان الگویی به نام media ساخت که همه CSS مشترک برای هر دو الگو را دارد. این یک کلاس مبنا برای مواردی است که به طور کلی شکل اشیای مدیا را تعیین می‌کنند. سپس می‌توان یک کلاس دیگر برای پرداختن به تفاوت‌های جزئی اضافه کرد. بدین ترتیب استایل‌بندی به روش‌های خاص بسط می‌یابد.

1.media {
2  display: grid;
3  grid-template-columns: 1fr 3fr;
4}
5
6.media .content {
7  font-size: .8rem;
8}
9
10.comment img {
11  border: 1px solid grey;
12}
13
14 .list-item {
15  border-bottom: 1px solid grey;
16}

در فایل HTML هر دو کلاس media و comment باید اعمال شوند:

1<div class="media comment">
2  <img />
3  <div class="content"></div>
4</div>

لیست آیتم می‌تواند کلاس‌های media و list-item را داشته باشد:

1<div class="media comment">
2  <img />
3  <div class="content"></div>
4</div>

کاری که نیکولاس سالیوان در توصیف و ترویج این رویکرد انجام داد به این معنی است که افرادی که صراحتاً از رویکرد Nicole Sullivan پیروی می‌کنند به طور کلی می‌توانند از CSS به این ترتیب استفاده مجدد بکنند. این رویکرد به شکل یک رویه مناسب برای انجام کارها به طور کلی وارد ادراک ما شده است.

BEM

BEM اختصاری برای عبارت «Block Element Modifier» است. BEM هر بلوک یک نهاد مستقل از قبیل دکمه، منو یا لوگو است. هر عنصر چیزی مانند آیتم لیست یا عنوان است که به بلوکی که در آن قرار دارد پیوند یافته است. مادیفایر به فلگی گفته می‌شود که روی بلوک یا عنصری تعریف می‌شود و رفتار یا استایل‌بندی آن را تغییر می‌دهد. کدی که از BEM استفاده می‌کند را می‌توان از روی کاربرد گسترده خط تیره و زیرخط در کلاس‌های CSS شناخت. برای نمونه به کلاس‌هایی که روی HTML زیر اعمال شده توجه کنید:

1<form class="form form--theme-xmas form--simple">
2  <input class="form__input" type="text" />
3  <input
4    class="form__submit form__submit--disabled"
5    type="submit" />
6</form>

کلاس‌های اضافی مشابه کلاس‌هایی هستند که در مثال OOCSS استفاده می‌شوند، اما آن‌ها از روش نامگذاری صریح BEM پیروی می‌کنند.

BEM در پروژه‌های بزرگ وب کاربرد زیادی دارد و بسیاری از افراد CSS خودشان را به این روش می‌نویسند. به احتمال زیاد در مثال‌های مختلف حتی در خودآموزها با نمونه‌هایی از کاربرد نحو BEM مواجه خواهید شد و شاید توضیح داده نشده باشد که چرا CSS به این روش سازماندهی شده است.

سیستم‌های رایج دیگر

علاوه بر مواردی که در بخش‌های قبلی توضیح دادیم، تعداد زیادی از سیستم‌های دیگر نیز وجود دارند که از سوی توسعه‌دهندگان مورد استفاده قرار می‌گیرند. رویکردهای رایج دیگر شامل «معماری مقیاس‌پذیر و ماژولار» (SMACSS) که از سوی «جاناتان اسنوک» (Jonathan Snook) خلق شده، ITCSS ساخته «هری روبرتز» (Harry Roberts) و CSS اتمیک (ACSS) است که در ابتدا از سوی یاهو ساخته شده بود. اگر با پروژه‌ای مواجه شوید که از یکی از این رویکردها استفاده می‌کند، می‌توانید جستجو کرده و مقالات زیادی برای درک شیوه کدنویسی به آن سبک پیدا کنید. عیب استفاده از این سیستم‌ها آن است که به خصوص برای پروژه‌های کوچک‌تر، ممکن است بیش از حد پیچیده به نظر برسند.

ساختن سیستم CSS

روش دیگر برای سازماندهی CSS آن است که از برخی ابزارهایی که برای توسعه‌دهندگان فرانت‌اند ارائه شده است بهره بگیریم. این ابزارها به ما امکان می‌دهند که رویکردهای مبتنی بر برنامه‌نویسی برای نوشتن CSS اتخاذ کنیم. این ابزارها به نام «پیش‌پردازشگر» (pre-processors) و «پس‌پردازشگر» (post-processors) نامیده می‌شوند. یک پیش‌پردازشگر روی فایل‌های خام اجرا می‌شود و آن‌ها را به استایل‌شیت تبدیل می‌کند، در حالی که پس‌پردازشگر استایل‌شیت نهایی را می‌گیرد و کاری روی آن اجرا می‌کند، مثلاً آن را بهینه‌سازی می‌کند تا سریع‌تر بارگذاری شود.

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

رایج‌ترین پیش‌پردازشگر Sass است. با توجه به این که این راهنما در Sass نیست، صرفاً به توضیح مختصر برخی از کارهایی که Sass انجام می‌دهد اکتفا می‌کنیم. حتی در صورتی که از هیچ یک از ویژگی‌های دیگرش بهره نمی‌گیرید، Sass به منظور سازماندهی CSS بسیار مفید است.

تعریف کردن متغیرها

CSS اینک برخی مشخصه‌های سفارشی نیتیو دارد که موجب شده تعریف متغیر اهمیت خود را تا حدود زیادی از دست بدهد، اما یکی از دلایلی که ممکن است بخواهید از Sass استفاده کنید، پدید آمدن امکان تعریف کردن همه رنگ‌ها و فونت‌های مورد استفاده در پروژه به صورت تنظیمات است. بدین ترتیب می‌توان به سادگی از این متغیرها در همه جای پروژه بهره گرفت. این بدان معنی است که اگر متوجه شوید در جایی از کد از سایه نامناسبی از رنگ آبی استفاده کرده‌اید، کافی است آن را در یک جای کد عوض کنید. اگر متغیری به نام ‎$base-color مانند خط نخست زیر ایجاد کنید، می‌تواند از آن در سراسر استایل‌شیت، هر جایی که به آن رنگ نیاز دارید بهره بگیرید:

1$base-color: #c6538c;
2
3.alert {
4  border: 1px solid $base-color;
5}

زمانی که این کد به CSS کامپایل شود، در نهایت CSS زیر را در استایل‌شیت نهایی مشاهده می‌کنید:

1.alert { 
2  border: 1px solid #c6538c; 
3}

کامپایل کردن استایل‌شیت‌های کامپوننت

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

پس پردازش برای بهینه‌سازی

اگر در مورد اندازه استایل‌شیت خود دغدغه دارید و توضیحات زیادی به آن اضافه کرده‌اید و یا فواصل خالی زیادی در آن وجود دارد، می‌توانید با استفاده از پس پردارش CSS و جدا کردن همه موارد غیرضروری در نسخه پروداکشن آن را بهینه‌سازی کنید.

فیلم مجموعه آموزش طراحی سایت با HTML و CSS – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

برای مطالعه بخش بعدی روی لینک زیر کلیک کنید:

• استایل مقدماتی متن و فونت در CSS --- آموزش CSS (بخش بیست و یکم)

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌های طراحی سایت با HTML و CSS
• مجموعه آموزش‌های برنامه‌‌نویسی
• آموزش مقدماتی پیش پردازنده SasS برای توسعه CSS
• طراحی تایمر معکوس با HTML ،CSS و JavaScript — به زبان ساده
• ساخت لینک های زیبا با CSS — از صفر تا صد

==