بررسی مزایای css خارجی و نحوه استفاده از آن

CSS خارجی که به آن External Style Sheets نیز گفته می شود یکی از بهترین راه ها برای کنترل و مدیریت وب سایت ها هستند. امروزه همه سایت ها با استفاده از CSS خارجی طراحی می شوند و برای توسعه وب از آن استفاده می کنند. فایل های CSS خارجی به شما این امکان را می دهند که با چند خط کد تغییرات کلی را در همه صفحات سایت خود ایجاد کنید و به همین دلیل استفاده از این فایل ها در همه سایت ها اجتناب ناپذیر است. در این مقاله سعی می کنیم به بررسی مزایا و نحوه استفاده از این فایل ها بپردازیم.(توصیه می شود دوره آموزشی طراحی سایت و پکیج آموزش طراحی سایت  را مشاهده کنید)

بررسی مزایا و معایب  استفاده از CSS خارجی

همانطور که گفته شد می توانید از CSS خارجی، به راحتی برای کنترل سایت خود استفاده کنید. شما می توانید ویژگی ها ای که برای صفحات سایت خود در نظر دارید را در یک صفحه CSS خارجی وارد کنید و سپس تمام صفحات سایت خود را به آن فایل CSS مورد نظر پیوند دهید. ساده ترین راه برای این کار این است که یک صفحه CSS خارجی را در کد HTML سایت خود IMPORT یا LINK کنید.

مزایا استفاده از CSS خارجی

مهمترین مزیت این است که شما می توانید به صورت یک جا استایل ویژگی های مختلف کل سایت را تعیین کنید و تغییرات را اعمال کنید. علاوه بر این شما نیاز نخواهید داشت همه انواع قوانین استایل های مختلف را به یاد داشته باشید. شما می توانید CLASS های مختلفی از استایل ها را بسازید و برای عناصر مختلفی از HTML  از آن ها استفاده کنید. این CLASS ها کاربرد بسیار زیادی دارند و نیاز شما به یادگیری همه قوانین استایل ها را تا حد زیادی کاهش می دهند.

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

معایب استفاده از CSS خارجی

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

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

چگونه یک css خارجی بسازیم

نحوه نوشتن CSS خارجی به همان شکل سایر انواع CSS است، اما شما باید استایل های خود را به صورت selector و declaration وارد کنید.  پس شما باید قوانین نوشتن این استایل ها را به یاد داشته باشید برای مثال :

{; selector { property : value

نشان دهنده نحوه اعمال کردن استایل های selector است. این قوانین باید در یک فایل متنی با پسوند .css نوشته شود. سپس باید نام مناسبی برای این فایل انتخاب کنید. زمانی که این فایل را ایجاد کردید باید آن را به صفحات وب سایت خود پیوند دهید. این کار به دو روش انجام می شود:

پیوند اسناد css خارجی توسط link

در این روش از عنصر LINK استفاده می کنید. این عنصر دارای دو ویژگی یا اتربیوت به نام های rel  و href است. اتربیوت rel به مرورگر می گوید که چه چیزی را لینک کرده اید (در اینجا صفحه استایل ها) و اتربیوت href مسیر رسیدن به فایل را نشان می دهد. برای مثال اگر بخواهیم یک فایل css با نام styles.css را به صفحات خود لینک کنیم باید به شکل زیر عمل کنیم:

پیوند اسناد css خارجی توسط import

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

;(‘import url(‘http://www.yoursite.com/styles.css@

مقایسه link و import

معمولا کاربران بین انتخاب این دو روش دچار سردرگمی ها ای می شوند.  تفاوت بین این دو در نحوه خوانده شدن توسط مرورگر ها است. در مجموع به نظر می رسد در سال های اخیر تفاوت ها کمتر شده اند اما همچنان توصیه می شود از <link> به جای @import استفاده شود. دلیل این امر این است که import در زمان بارگزاری توسط مرورگر ها دانلود های موازی را متوقف می کند. این موضوع به این معناست که مرورگر تا زمانی که بارگزاری فایل های import شده تمام نشود، دانلود سایر فایل ها را شروع نمی کند. بنابراین اگر به سرعت بارگزاری سایت خود اهمیت می دهید بهتر است از link استفاده کنید.

نتیجه گیری

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

منبع : طراحی سایت