برای یک صفحه وب چند فایل CSS نیاز داریم ؟ برای یک وب سایت چند صفحه ای چند فایل CSS می خواهیم؟ یک فایل CSS برای:
به وضوح می توان گفت که یک سایت تک صفحه ای تنها یک فایل css نیاز دارد
یک سایت با تعداد صفحات وب معدود هم احتمالا یک فایل css بیشتر نیاز ندارد مگر اینکه این صفحات قالب و استایل متفاوتی نسبت به هم داشته باشند و گرنه تا زمانی که قالب صفحات به هم شبیه باشند میشود همه را باهم از طریق یک فایل css مدیریت کرد.
حتی سایت هایی با صدها یا هزاران صفحه وب باز هم می توانند با یک فایل CSS قالب بندی شوند به شرطی که این صفحات به لحاظ قالب چندان باهم متفاوت نباشند. این حالت حتی در شرایطی که مانند وبلاگ ها محتوای سایت دارای دسته بندی های مختلف هم باشد باز صدق می کند.
یک برنامه کاربردی که صفحاتش در بخش های نسبتا متفاوت به لحاظ الگوی طراحی گروه بندی شده اند احتمالا به دو فایل CSS نیاز دارد یکی شامل الگوهای طراحی رایج در اکثر صفحات وب سات که اسمش را Global CSS file می گذاریم و دیگری فایل CSS مخصوص بخش های خاص از وب سایت که صفحات ان بخش ها از یک سری الگوهای طراحی استفاده می کنند که در دیگر بخش های سایت استفاده ای ندارد یا به ندرت استفاده شده است. نام این فایل CSS را section_specific CSS file می گذاریم.
سایت هایی با گستره بسیار متفاوتی از استایل ها و الگوهای طراحی که هریک برای صفحه خاصی از وب سایت استفاده می شود. در این حالت هم تنها نیاز به 2 فایل CSS جهت لینک به هر صفحه سایت هست: یکی Global Css file که استایل هایی هست که تقریبا تمامی صفحات از آن ها استفاده می کنند و گویی بین صفحات به اشتراک گذاشته شده است و دیگری فایل css مخصوص همان صفحه که اصطلاحا به ان page_specific Css file می گوئیم.
• سایت های بسیار پیچیده ای که هر سه نوع فایل CSS ای که در بالا به ان اشاره کردیم را برای صفحاتش نیاز دارد: Global CSS file + sectionspecific CSS file + pagespecific CSS file .
زمانی که از یک، دو و یا سه فایل 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 مورد نیاز هر صفحه داخل یک تک فایل سرعت لود و پاسخگویی سرور برای درخواست ان صفحه را بالا می برید و بنابراین این کار از همه بهتر هست باید بگوئیم خیر در اشتباه هستید. این مثل این هست که شما بگوئید یک درخواست به سرور بهتر از سه درخواست هست درحالی که اصلا قابلیت cache مرورگر وب رو نادیده می گیرید.
سناریو ای را در نظر بگیرید که دو تا استایل شیت داریم وقتی بخش مشخصی از صفحات وب سایت را با مرورگر اینترنت مرور می کنیم در اولین درخواست صفحه ای از وب سایت کل صفحه به همراه فایل های css که به ان لینک شده اند از سمت سرور فرستاده شده و در مرورگر اینترنت ما لود می شوند دفعه دوم که صفحه دیگری از وب سایت را درخواست می دهیدچون قبلا فایل global css با لود صفحه اول در کش مرورگر آمده است پس مقداری از درخواست در سمت سرور کاهش پیدا کرده و سرعت لود صفحه دوم نسبت به زمانی که تمامی css های مورد نیاز صفحه دوم در یک تک فایل مخصوص ان صفحه لینک شود بیشتر می شود.اگر شما برای هر صفحه وب یک css فایل منحصر به فرد لینک کنید انگاه نیاز هست تا کاربران به ازای هر صفحه یک درخواست به سرور داشته باشند.ترجمه مقاله از وب سایت: css-tricks.com
کارشناسی ارشد مهندسی نرم افزار تجربه پیاده سازی مجازی سازی سرور و دسکتاپ در محیط عملیاتی
زمان پاسخ گویی روز های شنبه الی چهارشنبه ساعت 9 الی 18
فقط به موضوعات مربوط به محصولات آموزشی و فروش پاسخ داده می شود