بخشی از معماری یک استایل خوب، سازماندهی آن است؛ ابتدا لازم است این مطلب را ذکر کنیم که در طراحی وب‌سایت برای تنظیم بخش‌های بصری از جمله رنگ، فونت و غیره، از فایلهای CSS استفاده می‌شود. در نوشتن این‌گونه فایل‌ها، فایلی یکپارچه برای توسعه‌دهنده‌ای که به صورت فردی بر روی یک پروژه‌ای کوچک کار می‌کند بسیار مناسب است اما برای پروژه‌های بزرگ طراحی وب‌سایت که دارای طرح‌ها و محتواهای متعددی هستند و یا چندین برند که طراحی آن‌ها زیر یک چتر و شبیه به هم انجام می‌شود، قضیه کمی متفاوت است. در این‌گونه پروژه‌ها، روش هوشمندانه‌تر استفاده از سبک ماژولار و تقسیم‌بندی فایلهای CSS به چندین فایل مجزا است که در این مقاله قصد داریم این موضوع را به تفصیل مورد بررسی قرار دهیم.
تقسیم‌بندی فایلهای CSS به شما کمک می‌کند تا بتوانید به شکل بهتری وظایف را تقسیم‌بندی کنید؛ در پروژه‌های بزرگ، معمولاً هر شخص مسئول بخشی از طراحی سایت خواهد بود و به همین دلیل بهتر است که فایلهای استایل وب‌سایت به چندین فایل مجزا تقسیم‌بندی شوند به طوری که این تقسیم‌بندی نه‌تنها به تقسیم بهتر وظایف کمک می‌کند، بلکه جهت بررسی مشکلات احتمالی نیز سرعت‌عمل را بالا خواهد برد.
با استفاده از این روش، یک دولوپر می‌تواند بر روی تایپوگرافی کار کند در حالی که توسعه‌دهندهٔ دیگر می‌تواند بر روی لی‌اوت سایت تمرکز کند؛ هر یک از این توسعه‌دهندگان در آن واحد بر روی فایل خاصی کار می‌کنند و این موضوع به افزایش سرعت پیاده‌سازی پروژه کمک شایانی خواهد داشت. اما چه روشی برای تقسیم‌بندی فایلهای سی‌اس‌اس سایت مناسب است؟ اینجا ما به معرفی یکی از روش‌ها که امروزه بسیاری از طراحان به آن روی آورده‌اند خواهیم پرداخت.
فایل‌هایی که می‌توانیم کدهای CSS را داخل آن‌ها بگنجانیم
reset.css: این فایل وظیفهٔ ریست و نرمال‌سازی استایل‌ها را بر عهده دارد؛ رنگ‌بندی، کادرها، تنظیمات پایه‌ای فونت‌ها و ... در این فایل قرار می‌گیرند.
typography.css: تمامی موارد مربوط به متن از جمله نوع فونت، اندازهٔ فونت، فاصلهٔ بین خطوط، استایل مربوط به عناوین و متن اصلی در این فایل قرار می‌گیرند.
layouts.css: تنظیمات مربوط به صفحه و طراحی آن از جمله نحوهٔ چیدمان اجزای اصلی در صفحه، در این فایل قرار می‌گیرند.
forms.css: کلیهٔ موارد طراحی مربوط به فرم‌ها از جمله فیلدهای ورود اطلاعات و دکمه‌ها در این فایل قرار می‌گیرند.
lists.css: تنظیمات مربوط به لیست‌ها در این فایل قرار می‌گیرند.
tables.css: تنظیمات مربوط به جداول در این فایل قرار می‌گیرند.
carousel.css: اگر در پیاده‌سازی وب‌سایت خود اسلایدشو داشته باشیم، تنظیمات مربوط به این بخش در این فایل قرار می‌گیرد.
accordion.css: اگر از منوی آکاردئونی در پیاده‌سازی وب‌سایت استفاده کرده باشیم، تنظیمات مربوط به آن در این فایل قرار می‌گیرد.
در ساختاری که ارائه شد، هر یک از فایلهای CSS دارای دامنهٔ مشخصی است. در واقع، هر یک از آن‌ها مربوط به بخشی از تنظیمات گرافیکی وب‌سایت می‌شود و تنظیمات مربوط به تمامی اِلِمان‌های بصری در بخش مربوط به خود آن‌ها قرار داده خواهد شد (در صورتی که از ابزارهای پیش‌پردازش مانند Sass یا Less استفاده کرده باشید، لازم است فایل دیگری به نام config.scss_ یا config.less_ نیز ایجاد کرده و تنظیمات مربوطه را در آن‌ها قرار دهید).
برخی از فریمورک‌های سی‌اس‌اس مانند Foundation و Bootstrap از این رویکرد استفاده می‌کنند؛ هر دوی این فریمورک‌ها برای هر یک از اِلِمان‌های سی‌اس‌اس مانند نوار پیشرفت (Progress Bar)، فیلدهای ورودی، دکمه‌ها، تولتیپ و ... فایلهای جداگانه‌ای را در نظر می‌گیرند. این روش کمک می‌کند تا توسعه‌دهنده هر اِلِمانی را که در پروژهٔ خود نیاز دارد به پروژه اضافه کند و باعث خواهد شد حجم فایل‌ها کاهش پیدا کرده و سرعت بارگزاری بیشتر شود.
چند نکته در مورد تعداد فایل‌ها
حتی اگر تعداد زیادی از فایلهای سی‌اس‌اس را جهت توسعهٔ محصول استفاده کنیم، نباید همهٔ آن‌ها را به همین شکل در پروژهٔ نهایی در نظر بگیریم. تعداد درخواست‌های HTTP نباید زیاد باشد زیرا مدت‌زمان بارگزاری سایت برای مخاطبین وب‌سایت‌مان افزایش پیدا می‌کند؛ به همین دلیل ما باید فایلهای کوچک سی‌اس‌اس را به فایلهای بزرگ‌تر الحاق کنیم (الحاق یک مفهوم کلی در این زمینه است، به این معنی که ما چندین فایل را در یک فایل سی‌اس‌اس قرار می‌دهیم. با استفاده از این روش، اقدام به استفاده از کلیدواژهٔ import@ کرده و دیگر نیاز نیست یکی‌یکی فایلهای سی‌اس‌اس را وارد پروژه نماییم. مرورگرهای وب در حال حاضر برای بارگزاری هم‌زمان چندین فایل، محدودیت‌هایی دارند تا بتوانند محتوا را در کمترین زمان ممکن برای کاربران نهایی بارگزاری کنند).
در اکثر مواقع، فریمورک توسعهٔ وبی که با آن در حال انجام پروژه هستید به صورت خودکار عملیات الحاق را به عنوان یکی از بخش‌های مدیریت منابع خود انجام می‌دهد. همچنین برخی از سیستم‌های مدیریت محتوا (CMS) نیز همین کار را به طور خودکار انجام می‌دهند که می‌تواند این مسئله در بخش اصلی خود سیستم در نظر گرفته شده باشد یا به عنوان یک افزونه به آن اضافه شود.
الحاق فایل‌ها یکی از رویکردهای بهینه‌سازی سی‌اس‌اس است؛ یکی دیگر از مواردی که بسیار در بهینه‌سازی سی‌اس‌اس مؤثر است، به حداقل رساندن حجم فایل (Minify) است، به این معنا که کاراکترهای اضافی و فضای خالی درون فایل متنی سی‌اس‌اس را پاک‌سازی کنیم که برای این کار روش‌های مختلف و ابزارهای متفاوتی وجود دارد.
اما واقعاً از چه تعداد فایل می‌بایست در پروژهٔ خود استفاده کنید؟ اینجا است که باید از تجربهٔ خود استفاده کنید و بتوانید راه‌کاری مؤثر اتخاذ کنید؛ یکی از راه‌کارهای مناسب در این زمینه این است که توسعه‌دهنده کمترین فایلهای مورد نیاز پروژهٔ خود را به پروژه ایمپورت کند و فایلهای دیگری که ممکن است در آینده نیاز شوند با استفاده از کدهای جاوااسکریپت به پروژه اضافه شوند.
خبر خوب اینکه اگر وب‌سایت شما از طریق پروتکل HTTP/2 بارگزاری می‌شود، نیاز به الحاق فایل‌ها نیست! در پروتکل HTTP/1.1 مرورگرها منابع را به صورت پشت سرهم بارگزاری می‌کردند به طوری که در این روش پس از دانلود یک فایل، فایل دیگر بارگزاری می‌شد که در صورت کاهش فایل‌ها مطمئناً بهبود در عملکرد بارگزاری سایت صورت می‌گرفت اما در پروتکل جدید HTTP/2 این مشکل حل شده و مرورگر می‌تواند هم‌زمان چندین فایل را بارگزاری نماید. در نتیجه، می‌توان گفت که اگر وب‌سایت شما بر بستر HTTP/2 است، کاهش تعداد ریکوئست‌ها در حال حاضر منفعتی برای شما نخواهد داشت.
نتیجه‌گیری
همان‌طور که ساخت یک بنا نیازمند معماری است، طراحی و پیاده‌سازی مناسب و بهینهٔ قسمت‌های مختلف یک پروژهٔ طراحی سایت نیز نیازمند معماری است. سازماندهی فایلهای سی‌اس‌اس یکی از بخش‌های مهم در معماری طراحی صفحات وب به شمار می‌آید که در این مطلب شما با کلیات و روش‌های مناسب جهت پیاده‌سازی آن آشنا شدید.
