۶ روش برای سازماندهی کدهای CSS

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

با این وجود این روش، Cascade بر این باور است که شما در سال ۱۹۹۸ در حال ساخت یک وب سایت استاتیک کوچک در html هستید. اشتباه نکنید قابلیت Cascade همچنان مهم و قدرتمند است. فقط باید گفت که وبسایت های امروزی بسیار پیچیده تر شده اند. توسعه دهندگان Front-end اغلب برای یک پروژه شخصی نه چندان بزرگ هزاران خط کد CSS مینویسند.

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

۱.از یک پیش پردازنده CSS استفاده کنید

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

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

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

۲.فایل های جداگانه CSS برای صفحات منفرد

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

برای مثال زمانی که صفحه درباره ما را باز می کنید تنها از فایل about-page.css استفاده می شود و نیاز به تغییر در کدهای CSS نیست.

۳.فایل های جایگزین برای کامپوننت های پیچیده و تکراری

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

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

۴.تقسیم بندی بیشتر

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

روشی که من به شما پیشنهاد می کنم Atomic Design نامیده می شود. این روش عناصر طراحی را به پنج دسته تقسیم بندی می کنند :

• اتم ها
• مولکول ها
• مجموعه ها
• قالب ها
• صفحات

در این روش اتم ها همان عناصر منفرد همچون دکمه ها و فیلد های متنی و ... هستند. مولکول ها در این روش می توانند فرمی باشند که از ترکیب فیلد های متنی و دکمه ها به وجود آمده است. مجموعه ها بزرگتر بوده و  از اجتماع مولکول ها ایجاد می شود. مثالی از یک مجموعه می‌تواند هیدر یک وب سایت باشد.

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

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

۵.از CLASS-ITIS اجتناب کنید

CLASS-ITIS چیست؟ یک بیماری وحشتناک است که کاربر را مجبور به استفاده از class= attribute همچون یک style= attribute می کند. بعضی ها چنین بیماری را دارند. کد زیر مثالی از این بیماری است :

<div class="red-bg corners-rounded-5px columns-3 height-flexible helpme icantgoonlikethis">[Insert content here]</div>

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

۶.حداقل عمق

در اینجا می‌خواهم به روشی در CSS اشاره کنم که واقعا دوستش دارم : SMACSS . در این قسمت به مسئله ای می‌پردازیم که کاربرد حداقل عمق را نشان میدهد. حالا معنای این روش چیست؟ خوب به خاطر بیاورید که گفتم استفاده از کلاسهای متعدد کار صحیحی نیست. می توانیم شبیه همان قانون را در نوشتن کد های CSS پیاده سازی کنیم. این کار باعث می شود از نوشتن کد های تکراری پرهیز کنیم :

header nav ul, footer nav ul, aside div ul {margin-top: 1rem;}

کد بالا نه تنها می تواند حجم کدنویسی شما را افزایش دهد، بلکه به دلیل اختصاصی نبودن کد ها، می تواند قسمت های دیگر وبسایت را نیز تحت تاثیر قرار دهد زیرا مشخصه مورد نظر به جای کلاس بر روی تگ ها اعمال می شود. اما می توان کدهای بالا را به شکل زیر هم نوشت :

.molecule-nav {margin-top: 1rem;}

همانطور که در بالا میبینید کد نویسی ما تا حد زیادی کاهش یافته است.

منبع: لرن سورس