نگاهی به ساختار اصولی فایل‌های CSS

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

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

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

reset.css: این فایل وظیفهٔ ریست و نرمال‌سازی استایل‌ها را بر عهده دارد؛ رنگ‌بندی‌، کادرها، تنظیمات پایه‌ای فونت‌ها و ... در این فایل قرار می‌گیرند.

typography.css: تمامی موارد مربوط به متن از جمله نوع فونت، اندازهٔ فونت، فاصلهٔ بین خطوط، استایل مربوط به عناوین و متن اصلی در این فایل قرار می‌گیرند.

layouts.css: تنظیمات مربوط به صفحه و طراحی آن از جمله نحوهٔ چیدمان اجزای اصلی در صفحه، در این فایل قرار می‌گیرند.

forms.css: کلیهٔ موارد طراحی مربوط به فرم‌ها از جمله فیلدهای ورود اطلاعات و دکمه‌ها در این فایل قرار می‌گیرند.

lists.css: تنظیمات مربوط به لیست‌ها در این فایل قرار می‌گیرند.

tables.css: تنظیمات مربوط به جداول در این فایل قرار می‌گیرند.

carousel.css: اگر در پیاده‌سازی وبسایت خود بخش نمایش خودکار تصاویر (اسلایدشو) داشته باشیم، تنظیمات مربوط به این بخش در این فایل قرار می‌گیرد.

accordion.css: اگر از منوی آکاردئونی در پیاده‌سازی وبسایت استفاده کرده باشیم، تنظیمات مربوط به آن در این فایل قرار می‌گیرد.

نکته
در صورتی که از ابزارهای پیش‌پردازش مانند Sass (سّس)  یا Less (لِس) استفاده کرده باشید، لازم است فایل دیگری به نام config.scss_ یا config.less_ نیز ایجاد کرده و تنظیمات مربوطه را در آن‌ها قرار دهید.

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

برخی از فریمورک‌های سی‌اس‌اس مانند فاندیشن (Foundation) و بوت‌استرپ (Bootstrap) از این رویکرد استفاده می‌کنند؛ هر دو این فریمورک‌ها برای هر یک از المان‌های سی‌اس‌اس مانند نوار پیشرفت (Progress Bar)، فیلدهای ورودی، دکمه‌ها و راهنماها (Tooltip) و ... فایل‌‌های جداگانه‌ای را در نظر می‌گیرند. این روش کمک می‌کند تا توسعه‌دهنده هر المانی را که در پروژهٔ خود نیاز دارد به پروژه اضافه کند و باعث خواهد شد حجم فایل ها کاهش پیداکرده و سرعت بار گزاری بیشتر شود.

اما چه تعداد فایل؟
حتی اگر تعداد زیادی از فایل‌های سی‌اس‌اس را جهت توسعهٔ محصول استفاده کنیم نباید همهٔ آن‌ها را به همین شکل در پروژهٔ نهایی در نظر بگیریم. تعداد درخواست‌های HTTP نباید زیاد باشد زیرا مدت‌زمان بارگزاری سایت برای مخاطبین وبسایت‌مان افزایش پیدا می‌کند. به همین دلیل ما بایستی فایل‌های کوچک سی‌اس‌اس را به فایل‌های بزرگ‌تر الحاق کنیم (الحاق یک مفهوم کلی در این زمینه است، به این معنی که ما چندین فایل را در یک فایل سی‌اس‌اس قرار می‌دهیم. با استفاده از این روش استفاده از کلیدواژهٔ import@ حذف می‌شود و دیگر نیاز نیست یکی‌یکی فایل‌های سی‌اس‌اس را وارد پروژه نماییم. در حال حاضر مرورگرهای وب برای بارگزاری هم‌زمان چندین فایل محدودیت‌هایی را در نظر گرفته‌اند تا بتوانند محتوا را در کمترین زمان ممکن برای کاربران نهایی بار گزاری کنند.)

در اکثر مواقع فریمورک توسعهٔ وب شما که با آن در حال انجام پروژه هستید به‌صورت خودکار عملیات الحاق را به‌عنوان یکی از بخش‌های مدیریت منابع خود انجام می‌دهد که Ruby on rails نمونه‌‌ای از این نوع فریمورک‌ها است. همچنین برخی از سیستم‌های مدیریت محتوای وب (CMS) نیز همین کار را به‌طور خودکار انجام می‌دهد که می‌تواند این مسئله در بخش اصلی خود سیستم در نظر گرفته‌ شده باشد یا به‌عنوان یک افزونه به آن اضافه شود. 

در سیستم‌عامل‌های مک یا گنو/لینوکس، الحاق فایل ها با دستور cat و از طریق کد زیر امکان‌پذیر است:

cat file1.css file2.css > combined-output-file.css

اما در ویندوز چطور؟ از دستور type استفاده کنید:

type file1.css file2.css > combined-output-file.css

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

نکته: بهینه‌سازی سی‌اس‌اس‌
الحاق فایل‌ها یکی از رویکردهای بهینه‌سازی سی‌اس‌اس است؛ یکی دیگر از مواردی که بسیار در بهینه‌سازی سی‌اس‌اس مؤثر است، به حداقل رساندن فایل است، به این معنا که کاراکترهای اضافی و فضای خالی درون فایل متنی سی‌اس‌اس را پاک‌سازی کنیم که برای این کار روش‌های مختلف و ابزارهای متفاوتی وجود دارد. اما واقعاً از چه تعداد فایل می‌بایست در پروژهٔ خود استفاده کنید؟

اینجا است که باید از هوش و ذکاوت خود استفاده کنید و بتوانید راهکاری مؤثر را اتخاذ کنید؛ یکی از راه‌کارهای مناسب در این زمینه این است که توسعه‌دهنده کمترین فایل‌های مورد نیاز پروژهٔ خود را به پروژه ایمپورت کند و فایل‌های دیگری که ممکن است در آینده نیاز شوند با استفاده از کدهای جاوا اسکریپت به پروژه اضافه شوند. 

خبر خوب این‌که اگر وبسایت شما از طریق پروتکل‌ HTTP/2 بارگزاری می‌شود، نیاز به الحاق فایل‌ها نیست! در پروتکل HTTP/1.1 مرورگرها منابع را به‌صورت پشت سرهم بارگزاری می‌کردند به طوری که در این روش پس از دانلود یک فایل، فایل دیگر بارگزاری می‌شد که در صورت کاهش فایل‌ها مطمئناً بهبود در عملکرد بارگزاری سایت صورت می‌گرفت اما در پروتکل‌ جدید HTTP/2 این مشکل حل‌شده و مرورگر می‌تواند هم‌زمان چندین فایل را بار گزاری نماید. درنتیجه می‌توان گفت که اگر وبسایت شما بر بستر HTTP/2 است، کاهش تعداد ریکوئست‌ها در حال حاضر منفعتی برای شما نخواهد! داشت. 

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

CSS Architecture: CSS File Organization

0


محسن سمسارپور

محمدحسن (محسن) سمسارپور زاده نیمهٔ مهرماه سال 1364، چپ دست، علاقمند به نویسندگی، فوتبال (ورزش) و آموزش، کارشناس ارشد فناوری اطلاعات گرایش معماری سازمانی، از سال 1379 برنامه‌نویسی رو شروع کردم و از سال 1382 در زمینهٔ تولید محتوای آموزشی آنلاین و مجازی (تولید دروس مجازی دانشگاه‌های مجازی) شروع به فعالیت کردم. توضیحات بیشتر در مورد من رو می‌تونین روی وب سایتم بخونین. روی‌ هم‌ رفته، از این‌که بتونم داشته‌هام رو با دیگران به اشتراک بذارم بسیار خوشحال می‌شم.






  • saeed در تاریخ: 1396/01/08

    به به آقای سمسارپور
    قبلا شما رو دنبال می‌کردم خوشحالم که در سکان آکادمی هم از دانش شما بهره میگیریم

    محسن سمسارپور در تاریخ: 1396/01/08

    بزرگوارید، سپاس از شما، لطف دارید

از طریق این فرم، می توانید بدون ثبت نام نظر دهید و یا اگر قبلا ثبت نام کرده اید، با ورود ناحیه ی کاربری می توانید علاوه بر ثبت نظر، به مدیریت نظرات خود نیز بپردازید.
(فیلد اجباری)
(فیلد اجباری)
(فیلد اجباری)
(فیلد اجباری)