چه تعداد فایل CSS برای صفحات وب مورد نیاز است؟

برای یک صفحه وب چند فایل CSS نیاز داریم ؟ برای یک وب سایت چند صفحه ای چند فایل CSS می خواهیم؟ یک فایل CSS برای:

دوره های شبکه، برنامه نویسی، مجازی سازی، امنیت، نفوذ و ... با برترین های ایران
  • یک سایت تک صفحه
  • یک سایت نسبتا ساده متشکل از 2 صفحه وب که تفاوت چندانی باهم ندارند.
  • یک سایت بلاگ مانند که با وجود هزاران صفحه وبی که دارد اما این صفحات به لحاظ استایل خیلی به هم شبیه هستند.
stylesheet1

به وضوح می توان گفت که یک سایت تک صفحه ای تنها یک فایل css نیاز دارد

stylesheet2

یک سایت با تعداد صفحات وب معدود هم احتمالا یک فایل css بیشتر نیاز ندارد مگر اینکه این صفحات قالب و استایل متفاوتی نسبت به هم داشته باشند و گرنه تا زمانی که قالب صفحات به هم شبیه باشند میشود همه را باهم از طریق یک فایل css مدیریت کرد.

stylesheet3

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

دو تا فایل CSS برای

  • یک برنامه کاربردی با مجموعه سراسری از الگوهای طراحی و یک سری الگوهای طراحی کمتر استفاده شده که فقط برای بخش های خاصی از وب سایت استفاده می شوند . (CSS سراسری+ CSS گروه صفحات خاص)
  • سایت های با محتوای سنگین با یک مجموعه ساختار و شبکه بندی سراسری که در همه صفحات سایت استفاده می شوند و CSS های اضافه ای که بیشتر برای صفحات وب بخش های خاصی از وب سایت استفاده می شوند.
  • سایت هایی که هر صفحه آن از نظر قالب طراحی بسیار متمایز و متفاوت از سایر صفحات هست نیز برای هر صفحه وب ان باید 2 تا فایل css به head صفحه لینک شود: CSS سراسری + CSS مخصوص همان صفحه
  • اغلب سایت ها در این دسته قرار می گیرند
stylesheet4

یک برنامه کاربردی که صفحاتش در بخش های نسبتا متفاوت به لحاظ الگوی طراحی گروه بندی شده اند احتمالا به دو فایل CSS نیاز دارد یکی شامل الگوهای طراحی رایج در اکثر صفحات وب سات که اسمش را Global CSS file می گذاریم و دیگری فایل CSS مخصوص بخش های خاص از وب سایت که صفحات ان بخش ها از یک سری الگوهای طراحی استفاده می کنند که در دیگر بخش های سایت استفاده ای ندارد یا به ندرت استفاده شده است. نام این فایل CSS را section_specific CSS file می گذاریم.

stylesheet5

سایت هایی با گستره بسیار متفاوتی از استایل ها و الگوهای طراحی که هریک برای صفحه خاصی از وب سایت استفاده می شود. در این حالت هم تنها نیاز به 2 فایل CSS جهت لینک به هر صفحه سایت هست: یکی Global Css file که استایل هایی هست که تقریبا تمامی صفحات از آن ها استفاده می کنند و گویی بین صفحات به اشتراک گذاشته شده است و دیگری فایل css مخصوص همان صفحه که اصطلاحا به ان page_specific Css file می گوئیم.

سه فایل CSS برای :

• سایت های بسیار پیچیده ای که هر سه نوع فایل CSS ای که در بالا به ان اشاره کردیم را برای صفحاتش نیاز دارد: Global CSS file + sectionspecific CSS file + pagespecific CSS file .

stylesheet6

فایل های CSS استقرار یافته در صفحات

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

Global = main.css + grid.css + typography.css + buttons.css + print.css

Site section A = tabs.css + editor.css

Site section B = forms.css + video.css + details.css

در این مثال انچه که باید در قسمت "editor" وب سایت لینک شود: global.css و site-section-a.css و انچه باید برای صفحه "details" وب سایت لینک شود: global.css و site-section-b.css

آیا همیشه استفاده از یک فایل CSS در صفحات وب بهتر نیست؟

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

سناریو ای را در نظر بگیرید که دو تا استایل شیت داریم وقتی بخش مشخصی از صفحات وب سایت را با مرورگر اینترنت مرور می کنیم در اولین درخواست صفحه ای از وب سایت کل صفحه به همراه فایل های css که به ان لینک شده اند از سمت سرور فرستاده شده و در مرورگر اینترنت ما لود می شوند دفعه دوم که صفحه دیگری از وب سایت را درخواست می دهیدچون قبلا فایل global css با لود صفحه اول در کش مرورگر آمده است پس مقداری از درخواست در سمت سرور کاهش پیدا کرده و سرعت لود صفحه دوم نسبت به زمانی که تمامی css های مورد نیاز صفحه دوم در یک تک فایل مخصوص ان صفحه لینک شود بیشتر می شود.اگر شما برای هر صفحه وب یک css فایل منحصر به فرد لینک کنید انگاه نیاز هست تا کاربران به ازای هر صفحه یک درخواست به سرور داشته باشند.ترجمه مقاله از وب سایت: css-tricks.com


عالیه زاری
عالیه زاری

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

نظرات